/* ═══════════════════════════════════════════════════════════════════
   مدار · ORBIT — التصميم

   ═══ من أين جاء هذا الملفّ ═══

   لم يُكتب بالنظر إلى النموذج ثم محاكاته: **نُقل منه**. الرموز ونظام
   التصميم وطبقة العلامة مأخوذة حرفًا بحرف من صفحات النموذج نفسها،
   فما صُمّم هو ما يُعرض — لا تقريبٌ له يقترب كل مرّة ولا يصل.

   والترتيب مقصود، وآخره يُبطل أوّله:

     ١· الخطّ — محلّيّ لا من شبكة (انظر أدناه).
     ٢· الرموز، ٣· نظام التصميم المشترك، ٤· إضافات كل شاشة.
     ٥· طبقة العلامة والصقل — تأتي أخيرًا لأنها تُبطل ما قبلها
        عمدًا (العلامة الكوكبية تُلغي خلفية المربّع مثلًا).
     ٦· ما يخصّ التطبيق وحده — حوارات ونماذج ومحرّر قيود. لا شيء
        هنا يعيد تعريف مكوّنًا في النموذج: أي قاعدة تمسّ صنفًا
        يعرفه النموذج حُذفت آليًّا عند التجميع.

   ═══ الخطّ محلّيّ ═══

   نظامٌ محاسبيّ يُفتح خلف جدار ناريّ أو على شبكة مقطوعة يجب أن يبقى
   مقروءًا. وخطٌّ يُنتظر من خادم بعيد يترك الشاشة بلا حروف ثوانيَ في
   كل فتحة — وسياسة المحتوى تمنع مصدرًا خارجيًّا أصلًا.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-arabic-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-arabic-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-arabic-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Orbit Arabic';
  src: url('noto-kufi-arabic-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F;
}



/* ═══════════════════════════════════════════════════════════════
   الرموز — من النموذج حرفًا بحرف
   ═══════════════════════════════════════════════════════════════ */

:root{
  --c-void:#08060f;--c-space:#140f2a;--c-indigo:#2d1f5e;--c-violet:#7d57a3;--c-nebula:#8e6bae;
  --c-lavender:#a27cb7;--c-pearl-lav:#cdb1d4;--c-pearl:#d8bad8;--c-moon:#6c4b9d;
  --border-glass:rgba(var(--rgb-fill),.14);--border-subtle:rgba(var(--rgb-fill),.08);
  --text-primary:#fff;--text-body:rgba(var(--rgb-text),.72);--text-muted:rgba(var(--rgb-text),.58);--text-label:rgba(var(--rgb-label),.72);
  --glass-blur:blur(28px) saturate(200%) brightness(1.05);--glass-standard:rgba(var(--rgb-fill),.08);--glass-surface:rgba(var(--rgb-fill),.13);
  --shadow-deep:0 26px 64px -18px rgba(var(--rgb-shade),.7);--glow-violet:0 0 60px rgba(142,107,174,.32);
  --grad-primary:linear-gradient(135deg,#a27cb7,#2e2a6e);--grad-button:linear-gradient(135deg,#8e6bae,#5c3f86);
  --success:#8fe6b0;--danger:#e0667e;--warn:#e6b85c;--info:#6f9ad6;
  --font-arabic:'Noto Kufi Arabic',sans-serif;--font-mono:ui-monospace,monospace;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-2xl:32px;--r-pill:999px;--ease-spring:cubic-bezier(.34,1.56,.64,1);--dur:240ms;
}


/* ═══════════════════════════════════════════════════════════════
   نظام التصميم المشترك — من النموذج
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);overflow:hidden;-webkit-font-smoothing:antialiased}
.lic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
#stars{position:fixed;inset:0;z-index:-3}
.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.7;pointer-events:none}
.orb.a{width:460px;height:460px;background:radial-gradient(circle,#7d57a3,transparent 70%);top:-130px;inset-inline-end:-110px}
.orb.b{width:420px;height:420px;background:radial-gradient(circle,#2d1f5e,transparent 70%);bottom:-150px;inset-inline-start:-90px}
.glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:100%;height:100vh;overflow:hidden}
.side{margin:14px;border-radius:var(--r-2xl);display:flex;flex-direction:column;padding:20px 15px;min-height:0}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;color:inherit}
.brand .mk{width:34px;height:34px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.brand .mk svg{width:18px;height:18px}
.brand .wd{font-weight:600;font-size:15px}.brand .wd small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-label);margin-top:3px}
.snav{display:flex;flex-direction:column;gap:3px}
.snav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--text-muted);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:var(--dur);font-family:var(--font-arabic)}
.snav a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.05)}.snav a.active{color:var(--text-primary);background:rgba(142,107,174,.2)}
.snav a svg{width:16px;height:16px}
.grp{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-label);padding:16px 12px 7px}
.legend{display:flex;flex-direction:column;gap:3px;padding:0 6px;overflow-y:auto;min-height:0}
.leg{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:11.5px;color:var(--text-body)}
.leg .sw{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg-n{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);direction:ltr}
.side-foot{margin-top:auto;padding:14px 8px 2px;border-top:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);line-height:1.7}
.main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px 4px;overflow:hidden}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 12px}
.back{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;text-decoration:none;font-family:var(--font-arabic);margin-bottom:6px}.back svg{width:14px;height:14px}
.ptitle h1{margin:0;font-family:var(--font-arabic);font-size:23px;font-weight:600}
.sub{font-family:var(--font-arabic);font-size:12px;color:var(--text-muted);margin-top:5px}.sub b{color:var(--c-pearl-lav);font-family:var(--font-mono);font-weight:600}
.acts{display:flex;gap:9px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);border:none;cursor:pointer;font-family:var(--font-arabic);font-size:12.5px;font-weight:600;transition:var(--dur) var(--ease-spring)}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--grad-button);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(142,107,174,.75),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(var(--rgb-fill),.07);color:var(--text-body);border:1px solid var(--border-glass)}.btn.ghost:hover{color:var(--text-primary);transform:translateY(-2px)}
.btn.sm{padding:7px 13px;font-size:11.5px}
.tabs{display:flex;gap:4px;padding:5px;margin:0 6px 12px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill);width:max-content}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:transparent;transition:var(--dur)}
.tab svg{width:15px;height:15px}.tab:hover{color:var(--text-primary)}
.tab.on{color:var(--text-primary);background:var(--grad-button);box-shadow:0 8px 20px -10px rgba(142,107,174,.7)}
.tab .cnt{font-family:var(--font-mono);font-size:10px;background:rgba(var(--rgb-fill),.16);padding:1px 6px;border-radius:var(--r-pill)}
.view{flex:1;overflow-y:auto;min-height:0;padding:0 6px 8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:14px}
.kpi{padding:14px 16px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass)}
.kpi .kl{font-size:11px;color:var(--text-muted);font-family:var(--font-arabic);display:flex;align-items:center;gap:6px}.kpi .kl svg{width:14px;height:14px}
.kpi .kv{font-size:19px;font-weight:700;font-family:var(--font-mono);margin-top:7px;color:var(--text-primary);font-variant-numeric:tabular-nums;direction:ltr;text-align:end}
.kpi .kv small{font-size:10.5px;font-family:var(--font-arabic);color:var(--text-muted);font-weight:400;margin-inline-start:4px}
.kpi.good .kv{color:var(--success)}.kpi.bad .kv{color:var(--danger)}.kpi.warn .kv{color:var(--warn)}.kpi.info .kv{color:var(--info)}
.panel{margin-bottom:14px}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px 11px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.p-head h3{margin:0;font-family:var(--font-arabic);font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}.p-head h3 svg{width:16px;height:16px;color:var(--c-nebula)}
.p-head .hint{font-family:var(--font-arabic);font-size:11px;color:var(--text-muted)}
.two{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:1100px){.two{grid-template-columns:1fr}}
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.srch{position:relative;flex:1;min-width:190px;max-width:320px}
.srch svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted)}
.srch input{width:100%;padding:9px 12px;padding-inline-start:34px;border-radius:var(--r-pill);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.06);color:var(--text-primary);font-family:var(--font-arabic);font-size:12px;outline:none;transition:var(--dur)}
.srch input:focus{border-color:var(--c-nebula);box-shadow:0 0 0 4px rgba(142,107,174,.18)}
.fpills{display:flex;gap:4px;padding:4px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill)}
.fpill{padding:6px 13px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--text-muted);font-family:var(--font-arabic);font-size:11px;font-weight:600;cursor:pointer;transition:var(--dur)}
.fpill:hover{color:var(--text-primary)}.fpill.on{color:var(--text-primary);background:rgba(142,107,174,.32)}
.tblwrap{padding:6px 12px;overflow:auto;max-height:62vh}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.tbl th{font-family:var(--font-arabic);font-size:10.5px;font-weight:600;color:var(--text-label);text-align:start;padding:10px 12px;border-bottom:1px solid var(--border-glass);white-space:nowrap;position:sticky;top:0;background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.tbl td{font-family:var(--font-arabic);font-size:12px;color:var(--text-body);padding:11px 12px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;vertical-align:middle}
.tbl tbody tr:hover td{background:rgba(var(--rgb-fill),.03)}
.tbl tr.total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border-glass);background:rgba(142,107,174,.08)}
.tbl tr.click{cursor:pointer}
.mono{font-family:var(--font-mono);font-size:11.5px}
.num{font-family:var(--font-mono);font-size:11.5px;text-align:end;direction:ltr;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:10.5px;font-weight:600}
.chip .sw{width:7px;height:7px;border-radius:50%}
.chip svg{width:12px;height:12px}
.acode{display:inline-block;font-family:var(--font-mono);font-size:10.5px;color:var(--c-pearl-lav);background:rgba(142,107,174,.14);border:1px solid rgba(142,107,174,.25);padding:2px 8px;border-radius:var(--r-sm)}
.av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad-primary);color:var(--text-primary);font-weight:600;font-size:10px;font-family:var(--font-arabic);box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25);margin-inline-end:8px;vertical-align:middle}
.prog{height:7px;border-radius:99px;background:rgba(var(--rgb-fill),.07);overflow:hidden;min-width:90px}
.prog>div{height:100%;border-radius:99px}
.ico-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:inline-grid;place-items:center;transition:var(--dur)}
.ico-btn:hover{color:var(--text-primary);transform:translateY(-2px)}.ico-btn svg{width:14px;height:14px}
.chart{padding:16px 18px 12px}
.chart svg{width:100%;display:block;direction:ltr}
.chart text{fill:rgba(var(--rgb-text),.45);font-family:var(--font-arabic)}
.chart line.grid{stroke:rgba(var(--rgb-fill),.06)}
/* ── نظرة عامة (مشتريات · مخزون · عهد): قضبان معنونة وقوائم تنبيه ── */
.hbars{padding:4px 0}
.hbars-pad{padding:14px 18px}
.hrow{display:grid;grid-template-columns:110px 1fr 110px;gap:10px;align-items:center;margin:8px 0;font-family:var(--font-arabic);font-size:11px}
.hrail{height:13px;border-radius:99px;background:rgba(var(--rgb-fill),.05);overflow:hidden;display:block}
.hfill{height:100%;border-radius:99px;opacity:.82;display:block}
.hval{font-family:var(--font-mono);font-size:10.5px;color:var(--text-body);text-align:end}
.od-list{padding:10px 18px 14px;font-family:var(--font-arabic);font-size:12px;color:var(--text-body)}
.od-row{padding:5px 0;cursor:pointer}
.od-row:hover{color:var(--text-primary)}
.od-row-flat{display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.od-amt{color:var(--danger);font-family:var(--font-mono);font-size:11.5px}
.ok-note{padding:22px;text-align:center;color:var(--success);font-family:var(--font-arabic);font-size:12px}
.panel-tight{margin:0}
/* ── الاشتراك: بطاقات الباقات ومبدّل الدورة ── */
.sec-title{font-family:var(--font-arabic);font-size:15px;margin:18px 0 12px;color:var(--text-muted)}
.cycle-row{display:flex;justify-content:center;margin-bottom:16px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass)}
.seg-b{border:0;background:transparent;color:var(--text-body);font-family:var(--font-arabic);font-size:12.5px;padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:var(--dur)}
.seg-b small{color:var(--warn);font-size:10px;margin-inline-start:4px}
.seg-b.on{background:var(--grad-primary);color:var(--text-primary)}
/* على التدرّج البنفسجي يبقى الحبر فاتحًا في المظهرين */
.seg-b.on small{color:#ffd9a0}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:16px}
.plan-card{padding:22px;display:flex;flex-direction:column;gap:10px}
.plan-card.on{border-color:rgba(142,107,174,.7);box-shadow:0 0 35px rgba(142,107,174,.22)}
.plan-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-arabic);font-size:10.5px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(142,107,174,.22);color:var(--c-pearl-lav)}
.plan-card h3{margin:0;font-family:var(--font-arabic);font-size:17px;color:var(--text-primary)}
.plan-desc{font-family:var(--font-arabic);font-size:11.5px;color:var(--text-muted)}
.plan-price{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--text-primary);display:flex;align-items:baseline;gap:8px}
.plan-price small{font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);font-weight:400}
.plan-was{font-size:13px;color:var(--text-muted);text-decoration:line-through;opacity:.7}
.plan-feats{display:grid;gap:7px;flex:1;margin:6px 0}
.plan-feat{display:flex;align-items:center;gap:8px;font-family:var(--font-arabic);font-size:12px;color:var(--text-body)}
.plan-feat svg{color:var(--success);flex-shrink:0}
/* ── «تذكّرني» في الدخول ── */
.remember-row{display:flex;align-items:center;gap:9px;margin:2px 0 4px;font-family:var(--font-arabic);font-size:12px;color:var(--text-body);cursor:pointer;user-select:none}
.remember-row input.chk{appearance:auto;width:15px;height:15px;accent-color:var(--c-nebula);cursor:pointer;margin:0}
/* ── المظهر الفاتح: إضافاتنا بعد النموذج (نظرات · اشتراك) ── */
[data-theme="light"] .hlab{color:var(--text-body)!important}
[data-theme="light"] .seg-b.on{color:#fff}
[data-theme="light"] .hrail{background:rgba(45,31,94,.08)}
[data-theme="light"] .od-row:hover{color:#241c47}
/* ── الإعدادات: معاينة ترويسة الفاتورة — ورقة بيضاء في السمتين ── */
.settings-two{grid-template-columns:1.15fr .85fr;margin-bottom:14px;align-items:start}
.inv-prev{padding:16px 18px;border-radius:14px;background:#fff;color:#1b1230;font-family:var(--font-arabic);border:1px solid rgba(0,0,0,.06)}
.ip-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ip-name{font-size:14.5px}
.ip-cur{font-size:9.5px;color:#666}
.ip-ids{font-size:10px;color:#444;text-align:left;direction:ltr}
.ip-addr{font-size:10px;color:#555;margin-top:8px}
@media (max-width:980px){.settings-two{grid-template-columns:1fr}}
.mback{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:var(--dur);z-index:80}
.mback.open{opacity:1;visibility:visible}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;width:min(700px,94vw);max-height:92vh;overflow:hidden;z-index:81;transition:transform var(--dur) var(--ease-spring),opacity var(--dur),visibility var(--dur);display:flex;flex-direction:column;border-radius:var(--r-2xl)}
.modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-subtle)}
.m-head h2{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}.m-head h2 svg{width:18px;height:18px;color:var(--c-nebula)}
.m-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:grid;place-items:center}.m-x:hover{color:var(--text-primary)}.m-x svg{width:16px;height:16px}
.m-body{padding:16px 22px;overflow-y:auto}
.m-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px;border-top:1px solid var(--border-subtle)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin-bottom:14px}
.meta .mi{padding:9px 12px;border-radius:var(--r-md);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle)}
.meta .ml{font-family:var(--font-arabic);font-size:9.5px;color:var(--text-label)}
.meta .mv{font-family:var(--font-arabic);font-size:12px;color:var(--text-primary);margin-top:3px}.meta .mv.mono{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.fl{font-family:var(--font-arabic);font-size:11.5px;font-weight:600;color:var(--text-muted);margin:12px 0 6px}
.fi{width:100%;padding:10px 13px;border-radius:var(--r-md);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.06);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;outline:none;transition:var(--dur)}
.fi:focus{border-color:var(--c-nebula);box-shadow:0 0 0 4px rgba(142,107,174,.18)}
select.fi option{background:var(--c-space);color:var(--text-primary)}
.jprev{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:rgba(142,107,174,.09);border:1px dashed rgba(142,107,174,.4);font-family:var(--font-arabic);font-size:11px;color:var(--text-body)}
.jprev b{color:var(--c-pearl-lav)}
.jprev .jl{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:11px}
.jprev .jl span:last-child{font-family:var(--font-mono);direction:ltr}
.errbox{margin-top:10px;padding:10px 13px;border-radius:var(--r-md);background:rgba(224,102,126,.12);border:1px solid rgba(224,102,126,.35);color:var(--danger);font-family:var(--font-arabic);font-size:11.5px;display:none}
.errbox.show{display:flex;align-items:center;gap:8px}
.toasts{position:fixed;bottom:22px;inset-inline-start:22px;z-index:130;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-glass);box-shadow:var(--shadow-deep);font-family:var(--font-arabic);font-size:12px;color:var(--text-primary);animation:tin .32s var(--ease-spring)}
.toast svg{width:15px;height:15px;color:var(--success)}.toast.err svg{color:var(--danger)}
@keyframes tin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ═══════════════════════════════════════════════════════════════
   إضافات كل شاشة — **منطَّقة بصنف الشاشة**

   ولمَ التنطيق؟ لأن النموذج يستعمل الاسم الواحد لمعنيين: `.chip` في
   جهات الاتصال شارةُ حالة صغيرة، وفي الموظفين زرُّ ترشيح بحدٍّ
   وحشوٍ أكبر. ودمجُ الملفّين بلا نطاق يجعل آخِرَهما يفوز في كل
   شاشة — فتصير شارات «عميل» و«مكتمل» أزرارًا ضخمة في جدول.

   كُشف بالنظر إلى لقطة، لا بقراءة الشفرة: القاعدتان صحيحتان كلٌّ
   في موضعها، والخطأ في جمعهما.
   ═══════════════════════════════════════════════════════════════ */

/* ── .scr-contacts ── */
.scr-contacts *{box-sizing:border-box}
html, body{margin:0;height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);overflow:hidden;-webkit-font-smoothing:antialiased}
.scr-contacts .lic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
.scr-contacts #stars{position:fixed;inset:0;z-index:-3}
.scr-contacts .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.scr-contacts .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.7;pointer-events:none}
.scr-contacts .orb.a{width:460px;height:460px;background:radial-gradient(circle,#7d57a3,transparent 70%);top:-130px;inset-inline-end:-110px}
.scr-contacts .orb.b{width:420px;height:420px;background:radial-gradient(circle,#2d1f5e,transparent 70%);bottom:-150px;inset-inline-start:-90px}
.scr-contacts .glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.scr-contacts .app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:100%;height:100vh;overflow:hidden}
.scr-contacts .side{margin:14px;border-radius:var(--r-2xl);display:flex;flex-direction:column;padding:20px 15px;min-height:0}
.scr-contacts .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;color:inherit}
.scr-contacts .brand .mk{width:34px;height:34px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.scr-contacts .brand .mk svg{width:18px;height:18px}
.scr-contacts .brand .wd{font-weight:600;font-size:15px}
.scr-contacts .brand .wd small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-label);margin-top:3px}
.scr-contacts .snav{display:flex;flex-direction:column;gap:3px}
.scr-contacts .snav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--text-muted);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:var(--dur);font-family:var(--font-arabic)}
.scr-contacts .snav a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.05)}
.scr-contacts .snav a.active{color:var(--text-primary);background:rgba(142,107,174,.2)}
.scr-contacts .snav a svg{width:16px;height:16px}
.scr-contacts .grp{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-label);padding:16px 12px 7px}
.scr-contacts .legend{display:flex;flex-direction:column;gap:3px;padding:0 6px;overflow-y:auto;min-height:0}
.scr-contacts .leg{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:11.5px;color:var(--text-body)}
.scr-contacts .leg-n{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.scr-contacts .side-foot{margin-top:auto;padding:14px 8px 2px;border-top:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);line-height:1.7}
.scr-contacts .av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--grad-primary);color:var(--text-primary);font-weight:600;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25);flex-shrink:0;font-family:var(--font-arabic)}
.scr-contacts .acc-ic{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(142,107,174,.18);color:var(--c-pearl-lav);flex-shrink:0}
.scr-contacts .acc-ic svg{width:17px;height:17px}
.scr-contacts .main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px 4px;overflow:hidden}
.scr-contacts .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 12px}
.scr-contacts .back{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;text-decoration:none;font-family:var(--font-arabic);margin-bottom:6px}
.scr-contacts .back svg{width:14px;height:14px}
.scr-contacts .ptitle h1{margin:0;font-family:var(--font-arabic);font-size:23px;font-weight:600}
.scr-contacts .sub{margin-top:5px;font-family:var(--font-arabic);font-size:12.5px;color:var(--text-muted)}
.scr-contacts .sub b{color:var(--c-pearl-lav);font-weight:600}
.scr-contacts .acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.scr-contacts .search{position:relative;display:flex;align-items:center}
.scr-contacts .search svg{position:absolute;inset-inline-start:11px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.scr-contacts .search input{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 14px;padding-inline-start:34px;outline:none;width:200px;transition:var(--dur)}
.scr-contacts .search input:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-contacts .search input::placeholder{color:var(--text-label)}
.scr-contacts .selin{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 14px;outline:none;cursor:pointer}
.scr-contacts .selin option{background:var(--c-space);color:var(--text-primary)}
.scr-contacts .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent;background:var(--grad-button);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(142,107,174,.7),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-contacts .btn svg{width:15px;height:15px}
.scr-contacts .btn.ghost{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);color:var(--text-body);box-shadow:none}
.scr-contacts .btn.ghost:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.1)}
.scr-contacts .tabs{display:flex;gap:4px;padding:5px;margin:0 6px 12px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill);width:max-content}
.scr-contacts .tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:transparent;transition:var(--dur)}
.scr-contacts .tab svg{width:15px;height:15px}
.scr-contacts .tab:hover{color:var(--text-primary)}
.scr-contacts .tab.on{color:var(--text-primary);background:var(--grad-button);box-shadow:0 8px 20px -10px rgba(142,107,174,.7)}
.scr-contacts .tab .cnt{font-family:var(--font-mono);font-size:10px;background:rgba(var(--rgb-fill),.16);padding:1px 6px;border-radius:var(--r-pill)}
.scr-contacts .view{flex:1;min-height:0;overflow-y:auto;padding:4px 6px 20px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent}
.scr-contacts .view::-webkit-scrollbar{width:10px}
.scr-contacts .view::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:10px}
.scr-contacts .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:14px}
.scr-contacts .kpi{padding:14px 16px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass)}
.scr-contacts .kpi .kl{font-size:11px;color:var(--text-muted);font-family:var(--font-arabic);display:flex;align-items:center;gap:6px}
.scr-contacts .kpi .kl svg{width:14px;height:14px}
.scr-contacts .kpi .kv{font-size:20px;font-weight:700;font-family:var(--font-mono);margin-top:7px;color:var(--text-primary)}
.scr-contacts .kpi .kv small{font-size:10.5px;font-family:var(--font-arabic);color:var(--text-muted);font-weight:400;margin-inline-start:4px}
.scr-contacts .kpi.pipe{background:linear-gradient(135deg,rgba(143,230,176,.13),rgba(142,107,174,.08));border-color:rgba(143,230,176,.26)}
.scr-contacts .kpi.pipe .kv{color:var(--success)}
.scr-contacts .tblwrap{padding:6px 12px;overflow-x:auto}
.scr-contacts .tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.scr-contacts .tbl th{font-family:var(--font-arabic);font-size:10.5px;font-weight:600;color:var(--text-label);text-align:start;padding:10px 12px;border-bottom:1px solid var(--border-glass);white-space:nowrap}
.scr-contacts .tbl td{font-family:var(--font-arabic);font-size:12px;color:var(--text-body);padding:11px 12px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;vertical-align:middle}
.scr-contacts .tbl tr:hover td{background:rgba(var(--rgb-fill),.03)}
.scr-contacts .who{display:flex;align-items:center;gap:10px}
.scr-contacts .who .av{width:32px;height:32px;font-size:11px}
.scr-contacts .who .acc-ic{width:34px;height:34px}
.scr-contacts .who .nm{color:var(--text-primary);font-weight:600}
.scr-contacts .who .sub2{font-size:10.5px;color:var(--text-muted)}
.scr-contacts .num{font-family:var(--font-mono);color:var(--text-primary)}
.scr-contacts .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:10px;font-weight:600;white-space:nowrap}
.scr-contacts .pill .pd{width:7px;height:7px;border-radius:50%}
.scr-contacts .tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-arabic);font-size:10.5px;color:var(--text-body);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);padding:3px 9px;border-radius:var(--r-pill)}
.scr-contacts .rowbtn{display:inline-flex;align-items:center;gap:5px;padding:6px;border-radius:var(--r-pill);cursor:pointer;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);transition:var(--dur)}
.scr-contacts .rowbtn:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.1)}
.scr-contacts .rowbtn svg{width:13px;height:13px}
.scr-contacts .rowbtn.pad{padding:6px 11px;font-family:var(--font-arabic);font-size:11px;font-weight:600}
.scr-contacts .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 20px;color:var(--text-muted);font-family:var(--font-arabic);font-size:13px;text-align:center}
.scr-contacts .empty svg{width:32px;height:32px;color:var(--c-moon);opacity:.7}
.scr-contacts .mback{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);opacity:0;visibility:hidden;transition:var(--dur);z-index:80}
.scr-contacts .mback.open{opacity:1;visibility:visible}
.scr-contacts .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;width:min(560px,94vw);max-height:92vh;overflow:hidden;z-index:81;transition:transform var(--dur) var(--ease-spring),opacity var(--dur),visibility var(--dur);display:flex;flex-direction:column;border-radius:var(--r-2xl)}
.scr-contacts .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scr-contacts .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-subtle)}
.scr-contacts .m-head h2{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.scr-contacts .m-head h2 svg{width:18px;height:18px;color:var(--c-nebula)}
.scr-contacts .m-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:grid;place-items:center}
.scr-contacts .m-x:hover{color:var(--text-primary)}
.scr-contacts .m-x svg{width:16px;height:16px}
.scr-contacts .m-body{padding:16px 22px;overflow-y:auto}
.scr-contacts .fl{font-family:var(--font-arabic);font-size:11.5px;font-weight:600;color:var(--text-muted);margin:12px 0 6px}
.scr-contacts .fin, .scr-contacts .ftext{width:100%;box-sizing:border-box;background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-arabic);font-size:13px;padding:10px 12px;outline:none;transition:var(--dur)}
.scr-contacts .fin:focus, .scr-contacts .ftext:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-contacts select.fin option{background:var(--c-space);color:var(--text-primary)}
.scr-contacts .ftext{resize:vertical;min-height:56px;font-size:12.5px;line-height:1.7}
.scr-contacts .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scr-contacts .m-foot{padding:14px 22px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;justify-content:flex-end}
.scr-contacts .d-hero{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.scr-contacts .d-hero .acc-ic{width:46px;height:46px}
.scr-contacts .d-hero .acc-ic svg{width:22px;height:22px}
.scr-contacts .d-hero h3{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;color:var(--text-primary)}
.scr-contacts .d-hero .dm{font-family:var(--font-arabic);font-size:11.5px;color:var(--text-muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.scr-contacts .d-hero .dm span{display:inline-flex;align-items:center;gap:5px}
.scr-contacts .d-hero .dm svg{width:12px;height:12px}
.scr-contacts .d-sec{margin-top:16px}
.scr-contacts .d-sec-t{font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--text-body);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.scr-contacts .d-sec-t svg{width:15px;height:15px;color:var(--c-nebula)}
.scr-contacts .d-sec-t .c{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);background:rgba(var(--rgb-fill),.06);padding:1px 7px;border-radius:var(--r-pill);margin-inline-start:auto}
.scr-contacts .mini{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-md);background:rgba(var(--rgb-fill),.04);border:1px solid var(--border-subtle);margin-bottom:7px}
.scr-contacts .mini .nm{font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--text-primary)}
.scr-contacts .mini .s2{font-family:var(--font-arabic);font-size:10.5px;color:var(--text-muted)}
.scr-contacts .mini .r{margin-inline-start:auto;text-align:end}
.scr-contacts .mini .amt{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-primary)}
.scr-contacts .muted{color:var(--text-muted)}
.scr-contacts .composer .fl{margin-top:0}
.scr-contacts .cmp-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.scr-contacts .cmp-f{flex:1;min-width:150px}
.scr-contacts .cmp-f .fin, .scr-contacts .cmp-f .ftext{margin:0}
.scr-contacts .cmp-f .ftext{min-height:44px}
.scr-contacts .cmp-warn{font-family:var(--font-arabic);font-size:10px;color:var(--warn);margin-top:4px;display:flex;align-items:center;gap:4px}
.scr-contacts .act-row{display:flex;align-items:flex-start;gap:11px;padding:11px 4px;border-bottom:1px solid var(--border-subtle)}
.scr-contacts .act-row:last-child{border-bottom:none}
.scr-contacts .act-ic{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.scr-contacts .act-ic svg{width:16px;height:16px}
.scr-contacts .act-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--font-arabic)}
.scr-contacts .act-meta b{font-size:12.5px;color:var(--text-primary)}
.scr-contacts .act-meta .mono{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.scr-contacts .act-meta .rel{font-size:10px;color:var(--c-nebula)}
.scr-contacts .act-meta .by{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted);margin-inline-start:auto}
.scr-contacts .act-note{font-size:12.5px;line-height:1.65;color:var(--text-body);white-space:pre-wrap;margin:4px 0 7px;font-family:var(--font-arabic)}
.scr-contacts .act-chips{display:flex;gap:6px;flex-wrap:wrap}
.scr-contacts .achip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-arabic);font-size:10.5px;color:var(--c-pearl-lav);background:rgba(142,107,174,.12);border:1px solid var(--border-subtle);padding:3px 9px;border-radius:var(--r-pill);cursor:pointer;transition:var(--dur)}
.scr-contacts .achip:hover{background:rgba(142,107,174,.24);color:var(--text-primary)}
.scr-contacts .achip svg{width:11px;height:11px}
.scr-contacts .achip.proj{color:var(--warn);background:rgba(230,184,92,.12)}
.scr-contacts .achip.proj:hover{background:rgba(230,184,92,.24)}
.scr-contacts .tl-h{font-family:var(--font-arabic);font-size:11px;font-weight:700;color:var(--c-pearl-lav);margin:14px 2px 2px;padding-top:9px;border-top:1px dashed var(--border-subtle)}
.scr-contacts .tl-h:first-child{border-top:none;padding-top:0;margin-top:0}
.scr-contacts .tfilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.scr-contacts .tf{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-arabic);font-size:11.5px;color:var(--text-muted);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;transition:var(--dur)}
.scr-contacts .tf.on{color:var(--text-primary);background:rgba(142,107,174,.25);border-color:transparent}
.scr-contacts .tf:hover{color:var(--text-primary)}
.scr-contacts .tf svg{width:12px;height:12px}
@media(max-width:900px){.scr-contacts .app{grid-template-columns:1fr}
.scr-contacts .side{display:none}}
/* ── .scr-finance ── */
.scr-finance *{box-sizing:border-box}
html, body{margin:0;height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);overflow:hidden;-webkit-font-smoothing:antialiased}
.scr-finance .lic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
.scr-finance #stars{position:fixed;inset:0;z-index:-3}
.scr-finance .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.scr-finance .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.7;pointer-events:none}
.scr-finance .orb.a{width:460px;height:460px;background:radial-gradient(circle,#7d57a3,transparent 70%);top:-130px;inset-inline-end:-110px}
.scr-finance .orb.b{width:420px;height:420px;background:radial-gradient(circle,#2d1f5e,transparent 70%);bottom:-150px;inset-inline-start:-90px}
.scr-finance .glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.scr-finance .app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:100%;height:100vh;overflow:hidden}
.scr-finance .side{margin:14px;border-radius:var(--r-2xl);display:flex;flex-direction:column;padding:20px 15px;min-height:0}
.scr-finance .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;color:inherit}
.scr-finance .brand .mk{width:34px;height:34px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.scr-finance .brand .mk svg{width:18px;height:18px}
.scr-finance .brand .wd{font-weight:600;font-size:15px}
.scr-finance .brand .wd small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-label);margin-top:3px}
.scr-finance .snav{display:flex;flex-direction:column;gap:3px}
.scr-finance .snav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);color:var(--text-muted);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;transition:var(--dur);font-family:var(--font-arabic)}
.scr-finance .snav a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.05)}
.scr-finance .snav a.active{color:var(--text-primary);background:rgba(142,107,174,.2)}
.scr-finance .snav a svg{width:16px;height:16px}
.scr-finance .grp{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-label);padding:16px 12px 7px}
.scr-finance .legend{display:flex;flex-direction:column;gap:3px;padding:0 6px;overflow-y:auto;min-height:0}
.scr-finance .leg{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:11.5px;color:var(--text-body)}
.scr-finance .leg .sw{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.scr-finance .leg-n{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);direction:ltr}
.scr-finance .side-foot{margin-top:auto;padding:14px 8px 2px;border-top:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);line-height:1.7}
.scr-finance .main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px 4px;overflow:hidden}
.scr-finance .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 12px}
.scr-finance .back{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;text-decoration:none;font-family:var(--font-arabic);margin-bottom:6px}
.scr-finance .back svg{width:14px;height:14px}
.scr-finance .ptitle h1{margin:0;font-family:var(--font-arabic);font-size:23px;font-weight:600}
.scr-finance .sub{font-family:var(--font-arabic);font-size:12px;color:var(--text-muted);margin-top:5px}
.scr-finance .sub b{color:var(--c-pearl-lav);font-family:var(--font-mono);font-weight:600}
.scr-finance .acts{display:flex;gap:9px;align-items:center}
.scr-finance .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);border:none;cursor:pointer;font-family:var(--font-arabic);font-size:12.5px;font-weight:600;transition:var(--dur) var(--ease-spring)}
.scr-finance .btn svg{width:15px;height:15px}
.scr-finance .btn.primary{background:var(--grad-button);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(142,107,174,.75),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-finance .btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(142,107,174,.9),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-finance .btn.ghost{background:rgba(var(--rgb-fill),.07);color:var(--text-body);border:1px solid var(--border-glass)}
.scr-finance .btn.ghost:hover{color:var(--text-primary);transform:translateY(-2px)}
.scr-finance .btn.sm{padding:7px 13px;font-size:11.5px}
.scr-finance .tabs{display:flex;gap:4px;padding:5px;margin:0 6px 12px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill);width:max-content}
.scr-finance .tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:transparent;transition:var(--dur)}
.scr-finance .tab svg{width:15px;height:15px}
.scr-finance .tab:hover{color:var(--text-primary)}
.scr-finance .tab.on{color:var(--text-primary);background:var(--grad-button);box-shadow:0 8px 20px -10px rgba(142,107,174,.7)}
.scr-finance .tab .cnt{font-family:var(--font-mono);font-size:10px;background:rgba(var(--rgb-fill),.16);padding:1px 6px;border-radius:var(--r-pill)}
.scr-finance .view{flex:1;overflow-y:auto;min-height:0;padding:0 6px 8px}
.scr-finance .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:14px}
.scr-finance .kpi{padding:14px 16px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass)}
.scr-finance .kpi .kl{font-size:11px;color:var(--text-muted);font-family:var(--font-arabic);display:flex;align-items:center;gap:6px}
.scr-finance .kpi .kl svg{width:14px;height:14px}
.scr-finance .kpi .kv{font-size:19px;font-weight:700;font-family:var(--font-mono);margin-top:7px;color:var(--text-primary);font-variant-numeric:tabular-nums;direction:ltr;text-align:end}
.scr-finance .kpi .kv small{font-size:10.5px;font-family:var(--font-arabic);color:var(--text-muted);font-weight:400;margin-inline-start:4px}
.scr-finance .kpi .kd{font-family:var(--font-arabic);font-size:10px;margin-top:5px;display:flex;align-items:center;gap:4px}
.scr-finance .kpi .kd svg{width:12px;height:12px}
.scr-finance .kpi.good .kv{color:var(--success)}
.scr-finance .kpi.bad .kv{color:var(--danger)}
.scr-finance .kpi.warn .kv{color:var(--warn)}
.scr-finance .up{color:var(--success)}
.scr-finance .down{color:var(--danger)}
.scr-finance .panel{margin-bottom:14px}
.scr-finance .p-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px 11px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.scr-finance .p-head h3{margin:0;font-family:var(--font-arabic);font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px}
.scr-finance .p-head h3 svg{width:16px;height:16px;color:var(--c-nebula)}
.scr-finance .p-head .hint{font-family:var(--font-arabic);font-size:11px;color:var(--text-muted)}
.scr-finance .two{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:1100px){.scr-finance .two{grid-template-columns:1fr}}
.scr-finance .toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.scr-finance .srch{position:relative;flex:1;min-width:190px;max-width:320px}
.scr-finance .srch svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted)}
.scr-finance .srch input{width:100%;padding:9px 12px;padding-inline-start:34px;border-radius:var(--r-pill);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.06);color:var(--text-primary);font-family:var(--font-arabic);font-size:12px;outline:none;transition:var(--dur)}
.scr-finance .srch input:focus{border-color:var(--c-nebula);box-shadow:0 0 0 4px rgba(142,107,174,.18)}
.scr-finance .fpills{display:flex;gap:4px;padding:4px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill)}
.scr-finance .fpill{padding:6px 13px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--text-muted);font-family:var(--font-arabic);font-size:11px;font-weight:600;cursor:pointer;transition:var(--dur)}
.scr-finance .fpill:hover{color:var(--text-primary)}
.scr-finance .fpill.on{color:var(--text-primary);background:rgba(142,107,174,.32)}
.scr-finance .tblwrap{padding:6px 12px;overflow:auto;max-height:62vh}
.scr-finance .tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.scr-finance .tbl th{font-family:var(--font-arabic);font-size:10.5px;font-weight:600;color:var(--text-label);text-align:start;padding:10px 12px;border-bottom:1px solid var(--border-glass);white-space:nowrap;position:sticky;top:0;background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.scr-finance .tbl td{font-family:var(--font-arabic);font-size:12px;color:var(--text-body);padding:11px 12px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;vertical-align:middle}
.scr-finance .tbl tbody tr:hover td{background:rgba(var(--rgb-fill),.03)}
.scr-finance .tbl tr.total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border-glass);background:rgba(142,107,174,.08)}
.scr-finance .tbl tr.subt td{font-weight:600;color:var(--c-pearl-lav);background:rgba(var(--rgb-fill),.02);font-size:11px}
.scr-finance .tbl tr.click{cursor:pointer}
.scr-finance .mono{font-family:var(--font-mono);font-size:11.5px}
.scr-finance .num{font-family:var(--font-mono);font-size:11.5px;text-align:end;direction:ltr;font-variant-numeric:tabular-nums}
.scr-finance .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:10.5px;font-weight:600}
.scr-finance .chip .sw{width:7px;height:7px;border-radius:50%}
.scr-finance .chip svg{width:12px;height:12px}
.scr-finance .acode{display:inline-block;font-family:var(--font-mono);font-size:10.5px;color:var(--c-pearl-lav);background:rgba(142,107,174,.14);border:1px solid rgba(142,107,174,.25);padding:2px 8px;border-radius:var(--r-sm)}
.scr-finance .grp-row td{color:var(--text-primary)!important;font-weight:600;background:rgba(var(--rgb-fill),.025)}
.scr-finance .dim{color:var(--text-muted)!important;font-style:italic}
.scr-finance .ico-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:inline-grid;place-items:center;transition:var(--dur)}
.scr-finance .ico-btn:hover{color:var(--text-primary);transform:translateY(-2px)}
.scr-finance .ico-btn svg{width:14px;height:14px}
.scr-finance .chart{padding:16px 18px 12px}
.scr-finance .chart svg{width:100%;display:block;direction:ltr}
/* نصوص الرسم وخطوطه تأخذ لونها من هنا لا من السمات — فتتبع السمتين */
.scr-finance .chart text{fill:rgba(var(--rgb-text),.45);font-family:var(--font-arabic)}
.scr-finance .chart line.grid{stroke:rgba(var(--rgb-fill),.06)}
.scr-finance .ch-leg{display:flex;gap:16px;padding:0 18px 14px;font-family:var(--font-arabic);font-size:10.5px;color:var(--text-muted)}
.scr-finance .ch-leg span{display:inline-flex;align-items:center;gap:6px}
.scr-finance .ch-leg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.scr-finance .periods{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;padding:14px 16px}
.scr-finance .period{padding:14px 16px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass);cursor:pointer;transition:var(--dur) var(--ease-spring)}
.scr-finance .period:hover{transform:translateY(-2px)}
.scr-finance .period .pn{font-family:var(--font-arabic);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.scr-finance .period .pr{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:6px;direction:ltr;text-align:end}
.scr-finance .period .pm{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-family:var(--font-arabic);font-size:10.5px;color:var(--text-muted)}
.scr-finance .period .pm b{font-family:var(--font-mono);color:var(--text-body);direction:ltr}
.scr-finance .period.closed{opacity:.55;border-style:dashed}
.scr-finance .mback{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:var(--dur);z-index:80}
.scr-finance .mback.open{opacity:1;visibility:visible}
.scr-finance .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;width:min(760px,94vw);max-height:92vh;overflow:hidden;z-index:81;transition:transform var(--dur) var(--ease-spring),opacity var(--dur),visibility var(--dur);display:flex;flex-direction:column;border-radius:var(--r-2xl)}
.scr-finance .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scr-finance .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-subtle)}
.scr-finance .m-head h2{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.scr-finance .m-head h2 svg{width:18px;height:18px;color:var(--c-nebula)}
.scr-finance .m-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:grid;place-items:center}
.scr-finance .m-x:hover{color:var(--text-primary)}
.scr-finance .m-x svg{width:16px;height:16px}
.scr-finance .m-body{padding:16px 22px;overflow-y:auto}
.scr-finance .m-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px;border-top:1px solid var(--border-subtle)}
.scr-finance .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.scr-finance .meta .mi{padding:9px 12px;border-radius:var(--r-md);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle)}
.scr-finance .meta .ml{font-family:var(--font-arabic);font-size:9.5px;color:var(--text-label)}
.scr-finance .meta .mv{font-family:var(--font-arabic);font-size:12px;color:var(--text-primary);margin-top:3px}
.scr-finance .meta .mv.mono{direction:ltr;text-align:end}
.scr-finance .fl{font-family:var(--font-arabic);font-size:11.5px;font-weight:600;color:var(--text-muted);margin:12px 0 6px}
.scr-finance .fi{width:100%;padding:10px 13px;border-radius:var(--r-md);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.06);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;outline:none;transition:var(--dur)}
.scr-finance .fi:focus{border-color:var(--c-nebula);box-shadow:0 0 0 4px rgba(142,107,174,.18)}
.scr-finance select.fi option{background:var(--c-space);color:var(--text-primary)}
.scr-finance .jl-head, .scr-finance .jl-row{display:grid;grid-template-columns:1.15fr 1fr 92px 92px 28px;gap:8px;align-items:center}
.scr-finance .jl-head{font-family:var(--font-arabic);font-size:10px;color:var(--text-label);padding:0 2px 5px}
.scr-finance .jl-row{margin-bottom:8px}
.scr-finance .jl-row .fi{padding:8px 10px;font-size:11.5px}
.scr-finance .jl-row .num-in{font-family:var(--font-mono);direction:ltr;text-align:end}
.scr-finance .jtot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:12px}
.scr-finance .jtot .tt{font-family:var(--font-mono);direction:ltr}
.scr-finance .balanced{color:var(--success)}
.scr-finance .unbalanced{color:var(--danger)}
.scr-finance .errbox{margin-top:10px;padding:10px 13px;border-radius:var(--r-md);background:rgba(224,102,126,.12);border:1px solid rgba(224,102,126,.35);color:var(--danger);font-family:var(--font-arabic);font-size:11.5px;display:none}
.scr-finance .errbox.show{display:flex;align-items:center;gap:8px}
.scr-finance .toasts{position:fixed;bottom:22px;inset-inline-start:22px;z-index:99;display:flex;flex-direction:column;gap:8px}
.scr-finance .toast{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r-lg);background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-glass);box-shadow:var(--shadow-deep);font-family:var(--font-arabic);font-size:12px;color:var(--text-primary);animation:tin .32s var(--ease-spring)}
.scr-finance .toast svg{width:15px;height:15px}
.scr-finance .toast.ok svg{color:var(--success)}
.scr-finance .toast.err svg{color:var(--danger)}
@keyframes tin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.scr-finance .empty{padding:44px 20px;text-align:center;font-family:var(--font-arabic);color:var(--text-muted);font-size:12.5px}
.scr-finance .empty svg{width:26px;height:26px;display:block;margin:0 auto 10px;color:var(--c-nebula)}
@media (prefers-reduced-motion:reduce){.scr-finance *{transition:none!important;animation:none!important}}
/* ── .scr-invoices ── */
.scr-invoices .qgrid{display:grid;grid-template-columns:1.3fr 2fr 64px 96px 110px 96px 28px;gap:7px;align-items:center;margin-bottom:7px}
.scr-invoices .qgrid .fi{padding:8px 10px;font-size:11.5px}
.scr-invoices .qhead{font-family:var(--font-arabic);font-size:10px;color:var(--text-label);padding:0 2px 5px}
.scr-invoices .inv-doc{background:#fff;color:#1a1630;border-radius:12px;width:794px;max-width:100%;margin:0 auto;font-family:'Noto Kufi Arabic',sans-serif;overflow:hidden;box-shadow:0 0 0 1px #e8e5f2}
.scr-invoices .inv-doc .band{background:linear-gradient(120deg,#2d1f5e,#4a3585);color:var(--text-primary);padding:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.scr-invoices .inv-doc .band h2{margin:0;font-size:17px;font-weight:700}
.scr-invoices .inv-doc .band .en{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.14em;opacity:.75;margin-top:3px;text-transform:uppercase}
.scr-invoices .inv-doc .band .itype{text-align:left}
.scr-invoices .inv-doc .band .itype b{display:block;font-size:15px}
.scr-invoices .inv-doc .band .itype span{font-family:Inter,sans-serif;font-size:9px;letter-spacing:.18em;opacity:.75}
.scr-invoices .inv-doc .inner{padding:18px 26px 22px}
.scr-invoices .inv-doc .muted{color:#75718c;font-size:10px}
.scr-invoices .inv-doc .hrow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;padding-bottom:14px;border-bottom:1px solid #ece9f5}
.scr-invoices .inv-doc .hrow .col3{text-align:left}
.scr-invoices .inv-doc .kv{font-size:11px;margin:3px 0}
.scr-invoices .inv-doc .kv b{font-family:ui-monospace,monospace;color:#1a1630}
.scr-invoices .inv-doc .qrwrap{text-align:center}
.scr-invoices .inv-doc .qrwrap .cap{font-size:8.5px;color:#75718c;margin-top:4px}
.scr-invoices .inv-doc .parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.scr-invoices .inv-doc .pbox{border:1px solid #ece9f5;border-radius:10px;padding:10px 14px;background:#faf9fd}
.scr-invoices .inv-doc .pbox .lbl{font-size:9px;color:var(--c-nebula);font-weight:700;letter-spacing:.05em;margin-bottom:4px}
.scr-invoices .inv-doc .pbox .nm{font-size:13px;font-weight:700}
.scr-invoices .inv-doc table{width:100%;border-collapse:collapse;font-size:11px;margin:4px 0 10px}
.scr-invoices .inv-doc thead th{background:#2d1f5e;color:var(--text-primary);padding:9px 10px;text-align:start;font-size:10px;font-weight:600}
.scr-invoices .inv-doc thead th:first-child{border-radius:0 8px 8px 0}
.scr-invoices .inv-doc thead th:last-child{border-radius:8px 0 0 8px}
.scr-invoices .inv-doc tbody td{padding:9px 10px;border-bottom:1px solid #f0edf8}
.scr-invoices .inv-doc tbody tr:nth-child(even) td{background:#faf9fd}
.scr-invoices .inv-doc .num, .scr-invoices .inv-doc .mono{font-family:ui-monospace,monospace;color:#1a1630;font-variant-numeric:tabular-nums}
.scr-invoices .inv-doc .tot{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.scr-invoices .inv-doc .totbox{min-width:250px;font-size:11.5px;border:1px solid #ece9f5;border-radius:10px;overflow:hidden}
.scr-invoices .inv-doc .totbox div{display:flex;justify-content:space-between;padding:7px 14px}
.scr-invoices .inv-doc .totbox div:nth-child(even){background:#faf9fd}
.scr-invoices .inv-doc .totbox .grand{background:#2d1f5e!important;color:var(--text-primary);font-weight:700;font-size:13px}
.scr-invoices .inv-doc .words{font-size:10px;color:#4a3585;background:#f4f1fb;border:1px dashed #cdb1d4;border-radius:8px;padding:8px 12px;margin-top:10px}
.scr-invoices .inv-doc .foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #ece9f5;font-size:9.5px;color:#75718c}
.scr-invoices .inv-doc .foot b{color:#1a1630;font-family:ui-monospace,monospace}
.scr-invoices .inv-doc .gen{margin-top:12px;text-align:center;font-size:8.5px;color:#a9a5be;letter-spacing:.08em}
.scr-invoices #qrbox{width:96px;height:96px;background:#fff;padding:4px;border:1px solid #ddd;border-radius:8px}
.scr-invoices #qrbox img, .scr-invoices #qrbox canvas{width:88px!important;height:88px!important}
@media print{.scr-invoices body.pinv #stars, .scr-invoices body.pinv .bg, .scr-invoices body.pinv .orb, .scr-invoices body.pinv .app, .scr-invoices body.pinv .pp-fab, .scr-invoices body.pinv .toasts, .scr-invoices body.pinv .mback, .scr-invoices body.pinv .jprev, .scr-invoices body.pinv .fl, .scr-invoices body.pinv .tbl{display:none!important}
html body.pinv .modal{display:flex!important;position:static!important;transform:none!important;width:100%!important;max-width:100%!important;max-height:none!important;height:auto!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:none!important;background:#fff!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible!important}
.scr-invoices body.pinv .m-head, .scr-invoices body.pinv .m-foot{display:none!important}
.scr-invoices body.pinv .m-body{padding:0!important;overflow:visible!important;background:transparent!important}
.scr-invoices body.pinv .inv-doc{border-radius:0;box-shadow:none!important;width:100%!important}
.scr-invoices body.pinv .inv-doc table, .scr-invoices body.pinv .inv-doc .band{display:revert!important}
.scr-invoices body.pinv .inv-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@page{margin:10mm}}
/* ── .scr-settings ── */
.scr-settings .sw{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.scr-settings .sw input{opacity:0;width:0;height:0}
.scr-settings .sw i{position:absolute;inset:0;border-radius:999px;background:rgba(var(--rgb-fill),.1);border:1px solid rgba(var(--rgb-fill),.14);transition:.22s;cursor:pointer}
.scr-settings .sw i:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:rgba(var(--rgb-text),.8);top:2px;inset-inline-start:3px;transition:.22s cubic-bezier(.34,1.56,.64,1)}
.scr-settings .sw input:checked+i{background:linear-gradient(135deg,#8e6bae,#5c3f86);border-color:rgba(142,107,174,.6)}
.scr-settings .sw input:checked+i:before{transform:translateX(-17px);background:#fff}
.scr-settings .setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(var(--rgb-fill),.06);font-family:var(--font-arabic)}
.scr-settings .setrow:last-child{border-bottom:none}
.scr-settings .setrow .t{font-size:12.5px;color:var(--text-body)}
.scr-settings .setrow .d{font-size:10.5px;color:var(--text-muted);margin-top:3px}
.scr-settings .avbig{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;font-family:var(--font-arabic);font-weight:700;font-size:26px;color:var(--text-primary);box-shadow:0 16px 40px -12px rgba(142,107,174,.7)}
.scr-settings .colorpick{display:flex;gap:8px;margin-top:10px}
.scr-settings .colorpick button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.15s}
.scr-settings .colorpick button.on{border-color:var(--text-primary);transform:scale(1.15)}
/* ── .scr-employees ── */
.scr-employees *{box-sizing:border-box}
html, body{margin:0;height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);overflow:hidden;-webkit-font-smoothing:antialiased}
.scr-employees .lic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
.scr-employees #stars{position:fixed;inset:0;z-index:-3}
.scr-employees .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.scr-employees .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.7;pointer-events:none}
.scr-employees .orb.a{width:460px;height:460px;background:radial-gradient(circle,#7d57a3,transparent 70%);top:-130px;inset-inline-end:-110px}
.scr-employees .orb.b{width:420px;height:420px;background:radial-gradient(circle,#2d1f5e,transparent 70%);bottom:-150px;inset-inline-start:-90px}
.scr-employees .glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.scr-employees .app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:100%;height:100vh;overflow:hidden}
.scr-employees .side{margin:14px;border-radius:var(--r-2xl);display:flex;flex-direction:column;padding:20px 15px;min-height:0}
.scr-employees .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;color:inherit}
.scr-employees .brand .mk{width:34px;height:34px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.scr-employees .brand .mk svg{width:18px;height:18px}
.scr-employees .brand .wd{font-weight:600;font-size:15px}
.scr-employees .brand .wd small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-label);margin-top:3px}
.scr-employees .snav{display:flex;flex-direction:column;gap:3px}
.scr-employees .snav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);color:var(--text-muted);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:var(--dur)}
.scr-employees .snav a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.05)}
.scr-employees .snav a.active{color:var(--text-primary);background:rgba(142,107,174,.2)}
.scr-employees .snav a svg{width:17px;height:17px}
.scr-employees .grp{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-label);padding:16px 12px 7px}
.scr-employees .legend{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.scr-employees .leg{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:12px;color:var(--text-body);cursor:pointer;transition:var(--dur)}
.scr-employees .leg:hover{background:rgba(var(--rgb-fill),.05);color:var(--text-primary)}
.scr-employees .leg.on{background:rgba(142,107,174,.18);color:var(--text-primary)}
.scr-employees .leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.scr-employees .leg-n{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.scr-employees .side-foot{margin-top:auto;display:flex;align-items:center;gap:11px;padding:14px 8px 2px;border-top:1px solid var(--border-subtle)}
.scr-employees .side-foot .av{width:36px;height:36px;font-size:12px}
.scr-employees .sf-n{font-family:var(--font-arabic);font-size:13px;font-weight:600;color:var(--text-primary)}
.scr-employees .sf-r{font-family:var(--font-arabic);font-size:11px;color:var(--text-muted)}
.scr-employees .av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--grad-primary);color:var(--text-primary);font-weight:600;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25);flex-shrink:0;font-family:var(--font-arabic)}
.scr-employees .main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 16px 4px;overflow:hidden}
.scr-employees .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 12px}
.scr-employees .back{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;text-decoration:none;font-family:var(--font-arabic);cursor:pointer;background:none;border:none;padding:0;margin-bottom:6px}
.scr-employees .back:hover{color:var(--text-primary)}
.scr-employees .back svg{width:14px;height:14px}
.scr-employees .ptitle h1{margin:0;font-family:var(--font-arabic);font-size:23px;font-weight:600}
.scr-employees .sub{margin-top:5px;font-family:var(--font-arabic);font-size:12.5px;color:var(--text-muted)}
.scr-employees .sub b{color:var(--c-pearl-lav);font-weight:600}
.scr-employees .acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.scr-employees .search{position:relative;display:flex;align-items:center}
.scr-employees .search svg{position:absolute;inset-inline-start:11px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.scr-employees .search input{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 14px;padding-inline-start:34px;outline:none;width:200px;transition:var(--dur)}
.scr-employees .search input:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-employees .search input::placeholder{color:var(--text-label)}
.scr-employees .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent;background:var(--grad-button);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(142,107,174,.7),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-employees .btn svg{width:15px;height:15px}
.scr-employees .seg{display:inline-flex;background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);padding:3px}
.scr-employees .seg button{width:32px;height:30px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--r-pill);display:grid;place-items:center;transition:var(--dur)}
.scr-employees .seg button.on{background:rgba(142,107,174,.3);color:var(--text-primary)}
.scr-employees .seg button svg{width:15px;height:15px}
.scr-employees .filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 6px 12px}
.scr-employees .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.04);color:var(--text-body);font-family:var(--font-arabic);font-size:12px;cursor:pointer;transition:var(--dur)}
.scr-employees .chip:hover{color:var(--text-primary)}
.scr-employees .chip.on{color:var(--text-primary);border-color:rgba(142,107,174,.6);background:rgba(142,107,174,.18)}
.scr-employees .chip .dot{width:8px;height:8px;border-radius:3px}
.scr-employees .scroll{flex:1;min-height:0;overflow-y:auto;padding:2px 6px 20px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent}
.scr-employees .scroll::-webkit-scrollbar{width:9px}
.scr-employees .scroll::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:9px}
.scr-employees .scroll::-webkit-scrollbar-thumb:hover{background:rgba(var(--rgb-fill),.16)}
.scr-employees .scroll::-webkit-scrollbar-track{background:transparent}
.scr-employees .emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:15px}
.scr-employees .emp-card{position:relative;padding:18px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass);box-shadow:var(--shadow-deep);cursor:pointer;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur),border-color var(--dur)}
.scr-employees .emp-card:hover{transform:translateY(-3px);border-color:rgba(142,107,174,.55);box-shadow:var(--shadow-deep),var(--glow-violet)}
.scr-employees .ec-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.scr-employees .ec-av{width:54px;height:54px;font-size:18px}
.scr-employees .st-pill{font-family:var(--font-arabic);font-size:9.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap}
.scr-employees .ec-name{font-family:var(--font-arabic);font-size:15px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-employees .ec-title{font-family:var(--font-arabic);font-size:12px;color:var(--text-body);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-employees .ec-dept{margin-top:10px}
.scr-employees .ec-dept span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-arabic);font-size:11px;color:var(--text-muted)}
.scr-employees .ec-dept .d{width:8px;height:8px;border-radius:3px}
.scr-employees .ec-contact{margin-top:13px;padding-top:12px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:6px}
.scr-employees .ec-contact span{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;justify-content:flex-end}
.scr-employees .ec-contact svg{width:13px;height:13px;flex-shrink:0;color:var(--text-label)}
.scr-employees .emp-tbl{width:100%;border-collapse:collapse;font-family:var(--font-arabic)}
.scr-employees .emp-tbl thead th{position:sticky;top:0;background:rgba(var(--rgb-panel),.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:start;font-size:11px;font-weight:600;color:var(--text-label);padding:11px 14px;border-bottom:1px solid var(--border-glass);white-space:nowrap}
.scr-employees .emp-tbl tbody tr{cursor:pointer;transition:var(--dur)}
.scr-employees .emp-tbl tbody tr:hover{background:rgba(142,107,174,.1)}
.scr-employees .emp-tbl td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);font-size:12.5px;color:var(--text-body);white-space:nowrap}
.scr-employees .tc-name{display:flex;align-items:center;gap:10px;color:var(--text-primary);font-weight:500}
.scr-employees .tc-name .av{width:32px;height:32px;font-size:11px}
.scr-employees .tc-mail{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);direction:ltr}
.scr-employees .empty-v{display:flex;align-items:center;justify-content:center;height:60%;color:var(--text-muted);font-family:var(--font-arabic);font-size:14px}
.scr-employees .prof-head{padding:18px 22px;margin:0 6px 14px;border-radius:var(--r-xl)}
.scr-employees .ph-main{display:flex;align-items:center;gap:16px;margin-top:10px}
.scr-employees .ph-av{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:600;color:var(--text-primary);flex-shrink:0;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25);font-family:var(--font-arabic)}
.scr-employees .ph-info{flex:1;min-width:0}
.scr-employees .ph-name{background:transparent;border:1px solid transparent;border-radius:var(--r-sm);color:var(--text-primary);font-family:var(--font-arabic);font-size:22px;font-weight:600;padding:3px 8px;margin-inline-start:-8px;outline:none;width:100%;max-width:420px;transition:var(--dur)}
.scr-employees .ph-name:hover{background:rgba(var(--rgb-fill),.04)}
.scr-employees .ph-name:focus{background:rgba(var(--rgb-fill),.07);border-color:rgba(142,107,174,.5)}
.scr-employees .ph-sub{font-family:var(--font-arabic);font-size:13px;color:var(--text-body);margin:3px 0 0 8px;padding-inline-start:8px}
.scr-employees .ph-badges{display:flex;gap:8px;margin-top:9px;padding-inline-start:8px}
.scr-employees .lvl-badge{font-family:var(--font-arabic);font-size:9.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);background:rgba(142,107,174,.2);color:var(--c-pearl-lav)}
.scr-employees .ph-acts{align-self:flex-start}
.scr-employees .ph-del{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-pill);border:1px solid rgba(224,102,126,.3);background:rgba(224,102,126,.12);color:var(--danger);font-family:var(--font-arabic);font-weight:600;font-size:12px;cursor:pointer;transition:var(--dur)}
.scr-employees .ph-del:hover{background:rgba(224,102,126,.2)}
.scr-employees .ph-del svg{width:14px;height:14px}
.scr-employees .tabs{display:flex;gap:4px;padding:0 6px;margin-bottom:12px;flex-wrap:wrap}
.scr-employees .tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-arabic);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--r-md);border:1px solid transparent;transition:var(--dur)}
.scr-employees .tab:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.04)}
.scr-employees .tab.on{color:var(--text-primary);background:rgba(142,107,174,.16);border-color:rgba(142,107,174,.3)}
.scr-employees .tab svg{width:15px;height:15px}
.scr-employees .tab-body{flex:1;min-height:0;overflow-y:auto;padding:4px 6px 24px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent}
.scr-employees .tab-body::-webkit-scrollbar{width:9px}
.scr-employees .tab-body::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:9px}
.scr-employees .card-sec{padding:20px 22px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass);margin-bottom:14px}
.scr-employees .sec-h{display:flex;align-items:center;gap:9px;font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:16px}
.scr-employees .sec-h svg{width:17px;height:17px;color:var(--c-nebula)}
.scr-employees .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.scr-employees .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.scr-employees .field.wide{grid-column:1/-1}
.scr-employees .f-l{font-family:var(--font-arabic);font-size:11px;font-weight:600;color:var(--text-muted)}
.scr-employees .f-in{width:100%;box-sizing:border-box;background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 12px;outline:none;transition:var(--dur)}
.scr-employees .f-in:disabled{background:rgba(var(--rgb-fill),.02);color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);border-color:var(--border-subtle);cursor:not-allowed;box-shadow:none}
.scr-employees .f-in:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-employees .f-in::placeholder{color:var(--text-label)}
.scr-employees .f-in[type=date]{direction:ltr;text-align:start}
.scr-employees .dp-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 12px;cursor:pointer;text-align:start;transition:var(--dur)}
.scr-employees .dp-trigger:hover{border-color:rgba(142,107,174,.5)}
.scr-employees .dp-trigger:focus{outline:none;border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-employees .dp-v.ph{color:var(--text-label)}
.scr-employees .dp-trigger>svg{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}
.scr-employees .dp-back{position:fixed;inset:0;z-index:80;display:none}
.scr-employees .dp-back.open{display:block}
.scr-employees .dp-pop{position:fixed;z-index:81;width:286px;padding:14px;border-radius:var(--r-lg);display:none}
.scr-employees .dp-pop.open{display:block;animation:dpIn .18s var(--ease-spring)}
@keyframes dpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.scr-employees .dp-head{display:flex;align-items:center;gap:4px;margin-bottom:10px}
.scr-employees .dp-title{flex:1;text-align:center;font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--text-primary)}
.scr-employees .dp-title-btn{flex:1;text-align:center;font-family:var(--font-arabic);font-size:13.5px;font-weight:600;color:var(--text-primary);background:transparent;border:none;border-radius:8px;padding:7px 8px;cursor:pointer;transition:var(--dur)}
.scr-employees .dp-title-btn:hover{background:rgba(142,107,174,.18)}
.scr-employees .dp-mygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 0 4px}
.scr-employees .dp-my{padding:13px 6px;border:none;background:rgba(var(--rgb-fill),.04);color:var(--text-body);font-family:var(--font-arabic);font-size:12.5px;border-radius:10px;cursor:pointer;transition:var(--dur)}
.scr-employees .dp-my:hover{background:rgba(142,107,174,.2);color:var(--text-primary)}
.scr-employees .dp-my.cur{box-shadow:inset 0 0 0 1px rgba(var(--rgb-label),.5);color:var(--text-primary)}
.scr-employees .dp-my.sel{background:var(--grad-button);color:var(--text-primary);font-weight:700;box-shadow:0 6px 16px -6px rgba(142,107,174,.7)}
.scr-employees .id-card{padding:14px 16px;border:1px solid var(--border-glass);border-radius:var(--r-md);background:rgba(var(--rgb-fill),.03);margin-bottom:12px;transition:var(--dur)}
.scr-employees .id-card.off{opacity:.7}
.scr-employees .id-card.off .fields{opacity:.5}
.scr-employees .id-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.scr-employees .id-title{font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.scr-employees .id-title::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.scr-employees .id-card:not(.off) .id-title::before{background:var(--success);box-shadow:0 0 7px var(--success)}
.scr-employees .id-head-r{display:flex;align-items:center;gap:9px}
.scr-employees .id-state{font-family:var(--font-arabic);font-size:10.5px;color:var(--text-muted)}
.scr-employees .id-sw{position:relative;width:38px;height:21px;border-radius:999px;border:none;background:rgba(var(--rgb-fill),.14);cursor:pointer;padding:0;direction:ltr;flex-shrink:0;transition:background var(--dur)}
.scr-employees .id-sw.on{background:var(--success)}
.scr-employees .id-knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left var(--dur) var(--ease-spring);box-shadow:0 2px 4px rgba(var(--rgb-shade),.4)}
.scr-employees .id-sw.on .id-knob{left:19px}
.scr-employees .id-rm{width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);border-radius:7px;cursor:pointer;display:grid;place-items:center;transition:var(--dur)}
.scr-employees .id-rm:hover{background:rgba(224,102,126,.16);color:var(--danger)}
.scr-employees .id-rm svg{width:14px;height:14px}
.scr-employees .id-add{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);border:1px dashed var(--border-glass);background:rgba(var(--rgb-fill),.04);color:var(--text-body);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--dur);margin-top:2px}
.scr-employees .id-add:hover:not(:disabled){color:var(--text-primary);border-color:var(--c-nebula);background:rgba(142,107,174,.14)}
.scr-employees .id-add:disabled{opacity:.4;cursor:not-allowed}
.scr-employees .id-add svg{width:15px;height:15px}
.scr-employees .id-title.plain::before{display:none}
.scr-employees .wd-row{display:flex;flex-wrap:wrap;gap:7px}
.scr-employees .wd-chip{padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.04);color:var(--text-muted);font-family:var(--font-arabic);font-size:12px;cursor:pointer;transition:var(--dur)}
.scr-employees .wd-chip:hover{color:var(--text-primary);border-color:rgba(142,107,174,.5)}
.scr-employees .wd-chip.on{color:var(--text-primary);border-color:transparent;background:var(--grad-button);box-shadow:0 6px 16px -8px rgba(142,107,174,.7)}
.scr-employees .calc-box{display:flex;align-items:baseline;gap:8px;padding:11px 14px;border-radius:var(--r-md);background:rgba(142,107,174,.14);border:1px solid rgba(142,107,174,.3)}
.scr-employees .calc-v{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--text-primary)}
.scr-employees .calc-u{font-family:var(--font-arabic);font-size:11.5px;color:var(--text-muted)}
.scr-employees .allow .allow-h{display:flex;align-items:center;justify-content:space-between}
.scr-employees .allow.off .f-in{opacity:.5}
.scr-employees .allow.off .f-l{color:var(--text-muted)}
.scr-employees .adj-save{margin-top:12px;display:flex;justify-content:flex-start}
.scr-employees .adj-savebtn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--grad-button);color:var(--text-primary);font-family:var(--font-arabic);font-weight:600;font-size:12px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(142,107,174,.7)}
.scr-employees .adj-savebtn:hover:not(:disabled){filter:brightness(1.08)}
.scr-employees .adj-savebtn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.scr-employees .adj-savebtn svg{width:14px;height:14px}
.scr-employees .adj-applied{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);background:rgba(143,230,176,.16);border:1px solid rgba(143,230,176,.35);color:var(--success);font-family:var(--font-arabic);font-weight:600;font-size:11.5px}
.scr-employees .adj-applied svg{width:14px;height:14px}
.scr-employees .dp-cell.dis{opacity:.25;cursor:not-allowed;pointer-events:none}
.scr-employees .adj-item{padding:0}
.scr-employees .adj-head2{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;transition:background var(--dur)}
.scr-employees .adj-head2:hover{background:rgba(var(--rgb-fill),.03)}
.scr-employees .adj-chev{width:16px;height:16px;color:var(--text-muted);transition:transform var(--dur);flex-shrink:0}
.scr-employees .adj-item.open .adj-chev{transform:rotate(180deg)}
.scr-employees .adj-no{font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-primary);flex-shrink:0}
.scr-employees .adj-sum{font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.scr-employees .adj-badge{font-family:var(--font-arabic);font-size:9px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:rgba(var(--rgb-fill),.08);color:var(--text-muted);flex-shrink:0;display:inline-flex;align-items:center;gap:4px}
.scr-employees .adj-badge.on{background:rgba(143,230,176,.16);color:var(--success)}
.scr-employees .adj-badge svg{width:11px;height:11px}
.scr-employees .adj-body{max-height:0;overflow:hidden;opacity:0;padding:0 16px;transition:max-height .32s var(--ease-spring),opacity var(--dur),padding var(--dur)}
.scr-employees .adj-item.open .adj-body{max-height:1600px;overflow-y:auto;opacity:1;padding:2px 16px 16px}
.scr-employees .dp-nav{width:30px;height:30px;border:none;background:rgba(var(--rgb-fill),.05);color:var(--text-body);border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:var(--dur)}
.scr-employees .dp-nav:hover{background:rgba(142,107,174,.2);color:var(--text-primary)}
.scr-employees .dp-nav svg{width:15px;height:15px}
.scr-employees .dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}
.scr-employees .dp-wd span{text-align:center;font-family:var(--font-arabic);font-size:10.5px;color:var(--text-label);padding:3px 0}
.scr-employees .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.scr-employees .dp-cell{height:32px;border:none;background:transparent;color:var(--text-body);font-family:var(--font-mono);font-size:12.5px;border-radius:8px;cursor:pointer;transition:background var(--dur),color var(--dur)}
.scr-employees .dp-cell.empty{cursor:default}
.scr-employees .dp-cell:not(.empty):hover{background:rgba(142,107,174,.18);color:var(--text-primary)}
.scr-employees .dp-cell.today{box-shadow:inset 0 0 0 1px rgba(var(--rgb-label),.55)}
.scr-employees .dp-cell.sel{background:var(--grad-button);color:var(--text-primary);font-weight:700;box-shadow:0 6px 16px -6px rgba(142,107,174,.7)}
.scr-employees .dp-foot{display:flex;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.scr-employees .dp-foot-btn{flex:1;padding:8px;border-radius:var(--r-pill);border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);font-family:var(--font-arabic);font-size:12px;cursor:pointer;transition:var(--dur)}
.scr-employees .dp-foot-btn:hover{color:var(--text-primary);background:rgba(142,107,174,.18)}
.scr-employees .dp-foot-btn.clr:hover{background:rgba(224,102,126,.16);color:var(--danger);border-color:rgba(224,102,126,.3)}
.scr-employees input.f-in.mono{font-family:var(--font-mono);direction:ltr;text-align:start}
.scr-employees select.f-in{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(0% + 14px) 17px,calc(0% + 19px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.scr-employees select.f-in option{background:var(--c-space);color:var(--text-primary)}
.scr-employees .combo{position:relative}
.scr-employees .combo-list{position:absolute;top:calc(100% + 5px);inset-inline:0;z-index:30;max-height:236px;overflow-y:auto;background:rgba(var(--rgb-panel),.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:var(--r-md);padding:5px;display:none;box-shadow:var(--shadow-deep);scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.16) transparent}
.scr-employees .combo-list.open{display:block}
.scr-employees .combo-list::-webkit-scrollbar{width:8px}
.scr-employees .combo-list::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.1);border-radius:8px}
.scr-employees .combo-list::-webkit-scrollbar-track{background:transparent}
.scr-employees .combo-opt{padding:8px 11px;border-radius:7px;font-family:var(--font-arabic);font-size:12.5px;color:var(--text-body);cursor:pointer;transition:background var(--dur)}
.scr-employees .combo-opt:hover, .scr-employees .combo-opt.hot{background:rgba(142,107,174,.2);color:var(--text-primary)}
.scr-employees .combo-empty{padding:9px 11px;font-family:var(--font-arabic);font-size:12px;color:var(--text-muted);text-align:center}
.scr-employees .pay-total{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:var(--r-md);background:rgba(142,107,174,.14);border:1px solid rgba(142,107,174,.3);margin-top:4px}
.scr-employees .pay-total .l{font-family:var(--font-arabic);font-size:12.5px;color:var(--text-body)}
.scr-employees .pay-total .v{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--text-primary)}
.scr-employees .mini{display:flex;align-items:center;gap:8px;font-family:var(--font-arabic);font-size:12px;color:var(--text-muted);padding:2px 0}
.scr-employees .mini svg{width:14px;height:14px;color:var(--text-label)}
.scr-employees .m-back{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);opacity:0;visibility:hidden;transition:var(--dur);z-index:70}
.scr-employees .m-back.open{opacity:1;visibility:visible}
.scr-employees .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);width:min(400px,92vw);border-radius:var(--r-2xl);padding:26px 24px 20px;z-index:71;opacity:0;visibility:hidden;transition:transform .42s var(--ease-spring),opacity var(--dur),visibility var(--dur);text-align:center}
.scr-employees .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scr-employees .m-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 15px;background:rgba(224,102,126,.14);border:1px solid rgba(224,102,126,.32);color:var(--danger)}
.scr-employees .m-ic svg{width:25px;height:25px}
.scr-employees .m-ttl{font-family:var(--font-arabic);font-size:17px;font-weight:600;margin-bottom:8px}
.scr-employees .m-msg{font-family:var(--font-arabic);font-size:12.5px;color:var(--text-body);line-height:1.6;margin-bottom:20px}
.scr-employees .m-acts{display:flex;gap:10px}
.scr-employees .m-acts button{flex:1;font-family:var(--font-arabic);font-size:13px;font-weight:600;padding:11px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.scr-employees .m-cancel{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);color:var(--text-body)}
.scr-employees .m-cancel:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.1)}
.scr-employees .m-del{background:linear-gradient(135deg,#e0667e,#a83b56);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(224,102,126,.7)}
.scr-employees .m-del:hover{filter:brightness(1.07)}
.scr-employees .m-del svg{width:15px;height:15px}
@media(max-width:880px){.scr-employees .app{grid-template-columns:1fr}
.scr-employees .side{display:none}
.scr-employees .fields{grid-template-columns:1fr}
.scr-employees .search input{width:140px}}
/* ── .scr-employees ── */
.scr-employees .save-fab{position:fixed;bottom:22px;left:24px;z-index:55;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--grad-button);color:var(--text-primary);font-family:var(--font-arabic);font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:0 14px 34px -10px rgba(142,107,174,.75),inset 0 1px 0 rgba(var(--rgb-fill),.25);transition:var(--dur)}
.scr-employees .save-fab svg{width:17px;height:17px}
.scr-employees .save-fab:hover{filter:brightness(1.07)}
.scr-employees .save-fab.clean{display:none}
.scr-employees .save-fab.dirty{animation:savepulse 2.4s ease-in-out infinite}
@keyframes savepulse{0%,100%{box-shadow:0 14px 34px -10px rgba(142,107,174,.7)}50%{box-shadow:0 8px 30px -4px rgba(230,184,92,.55)}}
.scr-employees .save-toast{position:fixed;bottom:74px;left:24px;z-index:56;background:rgba(143,230,176,.16);border:1px solid rgba(143,230,176,.4);color:var(--success);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:var(--r-pill);opacity:0;transform:translateY(6px);transition:var(--dur);pointer-events:none;display:flex;align-items:center;gap:7px}
.scr-employees .save-toast svg{width:14px;height:14px}
.scr-employees .save-toast.show{opacity:1;transform:translateY(0)}
/* ── .scr-crm ── */
.scr-crm *{box-sizing:border-box}
html, body{margin:0;height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);overflow:hidden;-webkit-font-smoothing:antialiased}
.scr-crm .lic{width:16px;height:16px;display:inline-block;vertical-align:middle;flex-shrink:0}
.scr-crm #stars{position:fixed;inset:0;z-index:-3}
.scr-crm .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.scr-crm .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.7;pointer-events:none}
.scr-crm .orb.a{width:460px;height:460px;background:radial-gradient(circle,#7d57a3,transparent 70%);top:-130px;inset-inline-end:-110px}
.scr-crm .orb.b{width:420px;height:420px;background:radial-gradient(circle,#2d1f5e,transparent 70%);bottom:-150px;inset-inline-start:-90px}
.scr-crm .glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.scr-crm .app{display:grid;grid-template-columns:230px 1fr;grid-template-rows:100%;height:100vh;overflow:hidden}
.scr-crm .side{margin:14px;border-radius:var(--r-2xl);display:flex;flex-direction:column;padding:20px 15px;min-height:0}
.scr-crm .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;color:inherit}
.scr-crm .brand .mk{width:34px;height:34px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.scr-crm .brand .mk svg{width:18px;height:18px}
.scr-crm .brand .wd{font-weight:600;font-size:15px}
.scr-crm .brand .wd small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-label);margin-top:3px}
.scr-crm .snav{display:flex;flex-direction:column;gap:3px}
.scr-crm .snav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);color:var(--text-muted);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:var(--dur);font-family:var(--font-arabic)}
.scr-crm .snav a:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.05)}
.scr-crm .snav a.active{color:var(--text-primary);background:rgba(142,107,174,.2)}
.scr-crm .snav a svg{width:17px;height:17px}
.scr-crm .grp{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-label);padding:16px 12px 7px}
.scr-crm .legend{display:flex;flex-direction:column;gap:3px;padding:0 6px;overflow-y:auto;min-height:0}
.scr-crm .leg{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:var(--r-sm);font-family:var(--font-arabic);font-size:11.5px;color:var(--text-body)}
.scr-crm .leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.scr-crm .leg-n{margin-inline-start:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.scr-crm .side-foot{margin-top:auto;padding:14px 8px 2px;border-top:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:11px;color:var(--text-muted);line-height:1.7}
.scr-crm .av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--grad-primary);color:var(--text-primary);font-weight:600;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25);flex-shrink:0;font-family:var(--font-arabic)}
.scr-crm .main{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px 4px;overflow:hidden}
.scr-crm .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 6px 12px}
.scr-crm .back{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;text-decoration:none;font-family:var(--font-arabic);margin-bottom:6px}
.scr-crm .back svg{width:14px;height:14px}
.scr-crm .ptitle{display:flex;align-items:center;gap:11px}
.scr-crm .ptitle h1{margin:0;font-family:var(--font-arabic);font-size:23px;font-weight:600}
.scr-crm .sub{margin-top:5px;font-family:var(--font-arabic);font-size:12.5px;color:var(--text-muted)}
.scr-crm .sub b{color:var(--c-pearl-lav);font-weight:600}
.scr-crm .acts{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.scr-crm .search{position:relative;display:flex;align-items:center}
.scr-crm .search svg{position:absolute;inset-inline-start:11px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.scr-crm .search input{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 14px;padding-inline-start:34px;outline:none;width:190px;transition:var(--dur)}
.scr-crm .search input:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-crm .search input::placeholder{color:var(--text-label)}
.scr-crm .selin{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-pill);color:var(--text-primary);font-family:var(--font-arabic);font-size:12.5px;padding:9px 14px;outline:none;cursor:pointer}
.scr-crm .selin option{background:var(--c-space);color:var(--text-primary)}
.scr-crm .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent;background:var(--grad-button);color:var(--text-primary);box-shadow:0 10px 26px -10px rgba(142,107,174,.7),inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-crm .btn svg{width:15px;height:15px}
.scr-crm .btn.ghost{background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);color:var(--text-body);box-shadow:none}
.scr-crm .btn.ghost:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.1)}
.scr-crm .tabs{display:flex;gap:4px;padding:5px;margin:0 6px 12px;background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);border-radius:var(--r-pill);width:max-content}
.scr-crm .tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:transparent;transition:var(--dur)}
.scr-crm .tab svg{width:15px;height:15px}
.scr-crm .tab:hover{color:var(--text-primary)}
.scr-crm .tab.on{color:var(--text-primary);background:var(--grad-button);box-shadow:0 8px 20px -10px rgba(142,107,174,.7)}
.scr-crm .tab .cnt{font-family:var(--font-mono);font-size:10px;background:rgba(var(--rgb-fill),.16);padding:1px 6px;border-radius:var(--r-pill)}
.scr-crm .view{flex:1;min-height:0;overflow-y:auto;padding:4px 6px 12px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent;display:flex;flex-direction:column}
.scr-crm .view::-webkit-scrollbar{width:10px}
.scr-crm .view::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:10px}
.scr-crm .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.scr-crm .kpi{padding:14px 16px;border-radius:var(--r-lg);background:var(--glass-surface);border:1px solid var(--border-glass)}
.scr-crm .kpi .kl{font-size:11px;color:var(--text-muted);font-family:var(--font-arabic);display:flex;align-items:center;gap:6px}
.scr-crm .kpi .kl svg{width:14px;height:14px}
.scr-crm .kpi .kv{font-size:20px;font-weight:700;font-family:var(--font-mono);margin-top:7px;color:var(--text-primary)}
.scr-crm .kpi .kv small{font-size:10.5px;font-family:var(--font-arabic);color:var(--text-muted);font-weight:400;margin-inline-start:4px}
.scr-crm .kpi.forecast{background:linear-gradient(135deg,rgba(143,230,176,.13),rgba(142,107,174,.08));border-color:rgba(143,230,176,.26)}
.scr-crm .kpi.forecast .kv{color:var(--success)}
.scr-crm .board{display:flex;gap:13px;overflow-x:auto;padding:2px 2px 12px;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent}
.scr-crm .board::-webkit-scrollbar{height:10px}
.scr-crm .board::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:10px}
.scr-crm .col{flex:0 0 286px;display:flex;flex-direction:column;min-height:0;background:rgba(var(--rgb-fill),.025);border:1px solid var(--border-subtle);border-radius:var(--r-lg);transition:var(--dur)}
.scr-crm .col.drag-over{border-color:rgba(142,107,174,.7);background:rgba(142,107,174,.1);box-shadow:0 0 0 1px rgba(142,107,174,.4)}
.scr-crm .col-head{padding:12px 13px 10px;border-bottom:1px solid var(--border-subtle)}
.scr-crm .col-head .ch-t{display:flex;align-items:center;gap:8px;font-family:var(--font-arabic);font-size:13px;font-weight:600;color:var(--text-primary)}
.scr-crm .col-head .ch-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.scr-crm .col-head .ch-cnt{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:rgba(var(--rgb-fill),.06);padding:1px 8px;border-radius:var(--r-pill)}
.scr-crm .col-head .ch-sum{font-family:var(--font-mono);font-size:11.5px;color:var(--c-pearl-lav);margin-top:6px}
.scr-crm .col-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-fill),.14) transparent}
.scr-crm .col-body::-webkit-scrollbar{width:7px}
.scr-crm .col-body::-webkit-scrollbar-thumb{background:rgba(var(--rgb-fill),.08);border-radius:8px}
.scr-crm .deal{position:relative;padding:12px 13px;border-radius:var(--r-md);background:var(--glass-surface);border:1px solid var(--border-glass);cursor:grab;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur),border-color var(--dur),opacity var(--dur)}
.scr-crm .deal:hover{border-color:rgba(142,107,174,.55);box-shadow:var(--glow-violet)}
.scr-crm .deal.dragging{opacity:.4;cursor:grabbing}
.scr-crm .deal::before{content:'';position:absolute;inset-inline-start:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--dc,#8e6bae)}
.scr-crm .deal .dn{font-family:var(--font-arabic);font-size:12.5px;font-weight:600;color:var(--text-primary);line-height:1.4;padding-inline-start:6px}
.scr-crm .deal .da{font-family:var(--font-arabic);font-size:10.5px;color:var(--text-muted);margin-top:3px;padding-inline-start:6px;display:flex;align-items:center;gap:5px}
.scr-crm .deal .da svg{width:11px;height:11px}
.scr-crm .deal .damt{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text-primary);margin-top:9px;padding-inline-start:6px}
.scr-crm .deal .dfoot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-inline-start:6px}
.scr-crm .deal .dmeta{display:flex;align-items:center;gap:7px;font-family:var(--font-arabic);font-size:10px;color:var(--text-muted)}
.scr-crm .deal .dmeta svg{width:11px;height:11px}
.scr-crm .deal .prob{font-family:var(--font-mono);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:var(--r-pill);background:rgba(var(--rgb-fill),.08);color:var(--c-pearl-lav)}
.scr-crm .deal .oav{width:22px;height:22px;font-size:8px}
.scr-crm .col-add{margin:0 10px 10px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--r-md);border:1px dashed var(--border-glass);background:transparent;color:var(--text-muted);font-family:var(--font-arabic);font-size:11.5px;cursor:pointer;transition:var(--dur)}
.scr-crm .col-add:hover{color:var(--text-primary);border-color:var(--c-nebula);background:rgba(142,107,174,.1)}
.scr-crm .col-add svg{width:13px;height:13px}
.scr-crm .tblwrap{padding:6px 12px;overflow-x:auto}
.scr-crm .tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.scr-crm .tbl th{font-family:var(--font-arabic);font-size:10.5px;font-weight:600;color:var(--text-label);text-align:start;padding:10px 12px;border-bottom:1px solid var(--border-glass);white-space:nowrap}
.scr-crm .tbl td{font-family:var(--font-arabic);font-size:12px;color:var(--text-body);padding:11px 12px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;vertical-align:middle}
.scr-crm .tbl tr:hover td{background:rgba(var(--rgb-fill),.03)}
.scr-crm .who{display:flex;align-items:center;gap:9px}
.scr-crm .who .av{width:30px;height:30px;font-size:10px}
.scr-crm .who .nm{color:var(--text-primary);font-weight:600}
.scr-crm .who .sub2{font-size:10px;color:var(--text-muted)}
.scr-crm .pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:10.5px;font-weight:600;white-space:nowrap}
.scr-crm .pill .pd{width:7px;height:7px;border-radius:50%}
.scr-crm .num{font-family:var(--font-mono);color:var(--text-primary)}
.scr-crm .rowbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);transition:var(--dur)}
.scr-crm .rowbtn:hover{color:var(--text-primary);background:rgba(var(--rgb-fill),.1)}
.scr-crm .rowbtn svg{width:13px;height:13px}
.scr-crm .rowbtn.go{border-color:rgba(143,230,176,.35);background:rgba(143,230,176,.12);color:var(--success)}
.scr-crm .rowbtn.icon{padding:6px}
.scr-crm .chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 4px 12px}
.scr-crm .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--text-muted);background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);cursor:pointer;transition:var(--dur)}
.scr-crm .chip:hover{color:var(--text-primary)}
.scr-crm .chip.on{color:var(--text-primary);background:rgba(142,107,174,.2);border-color:rgba(142,107,174,.4)}
.scr-crm .chip .cd{width:8px;height:8px;border-radius:50%}
.scr-crm .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 20px;color:var(--text-muted);font-family:var(--font-arabic);font-size:13px;text-align:center}
.scr-crm .empty svg{width:32px;height:32px;color:var(--c-moon);opacity:.7}
.scr-crm .mback{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);opacity:0;visibility:hidden;transition:var(--dur);z-index:80}
.scr-crm .mback.open{opacity:1;visibility:visible}
.scr-crm .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;width:min(520px,94vw);max-height:92vh;overflow:hidden;z-index:81;transition:transform var(--dur) var(--ease-spring),opacity var(--dur),visibility var(--dur);display:flex;flex-direction:column;border-radius:var(--r-2xl)}
.scr-crm .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scr-crm .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-subtle)}
.scr-crm .m-head h2{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.scr-crm .m-head h2 svg{width:18px;height:18px;color:var(--c-nebula)}
.scr-crm .m-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);color:var(--text-body);cursor:pointer;display:grid;place-items:center}
.scr-crm .m-x:hover{color:var(--text-primary)}
.scr-crm .m-x svg{width:16px;height:16px}
.scr-crm .m-body{padding:16px 22px;overflow-y:auto}
.scr-crm .fl{font-family:var(--font-arabic);font-size:11.5px;font-weight:600;color:var(--text-muted);margin:12px 0 6px}
.scr-crm .fin, .scr-crm .ftext{width:100%;box-sizing:border-box;background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--font-arabic);font-size:13px;padding:10px 12px;outline:none;transition:var(--dur)}
.scr-crm .fin:focus, .scr-crm .ftext:focus{border-color:rgba(142,107,174,.6);box-shadow:0 0 0 3px rgba(142,107,174,.18)}
.scr-crm select.fin option{background:var(--c-space);color:var(--text-primary)}
.scr-crm .ftext{resize:vertical;min-height:58px;font-size:12.5px;line-height:1.7}
.scr-crm input.fin[type=date]{cursor:pointer}
.scr-crm input.fin[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
.scr-crm .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scr-crm .m-foot{padding:14px 22px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;justify-content:flex-end}
.scr-crm .muted{color:var(--text-muted)}
.scr-crm .oplog{margin-top:18px;border-top:1px solid var(--border-subtle);padding-top:14px}
.scr-crm .oplog-h{font-family:var(--font-arabic);font-size:12px;font-weight:600;color:var(--text-body);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.scr-crm .oplog-h svg{width:15px;height:15px;color:var(--c-nebula)}
.scr-crm .oplog-h .c{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);background:rgba(var(--rgb-fill),.06);padding:1px 7px;border-radius:var(--r-pill);margin-inline-start:auto}
.scr-crm .lg-box{background:rgba(var(--rgb-fill),.03);border:1px solid var(--border-subtle);border-radius:12px;padding:12px;margin-bottom:12px}
.scr-crm .lg-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.scr-crm .lg-f{flex:1;min-width:150px}
.scr-crm .lg-f .fl{margin-top:0}
.scr-crm .lg-f .fin, .scr-crm .lg-f .ftext{margin:0}
.scr-crm .lg-empty{font-family:var(--font-arabic);font-size:11.5px;color:var(--text-muted);text-align:center;padding:14px}
.scr-crm .cmp-warn{font-family:var(--font-arabic);font-size:10px;color:var(--warn);margin-top:4px;display:flex;align-items:center;gap:4px}
.scr-crm .cmp-warn svg{width:11px;height:11px}
.scr-crm .act-row{display:flex;align-items:flex-start;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border-subtle)}
.scr-crm .act-row:last-child{border-bottom:none}
.scr-crm .act-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.scr-crm .act-ic svg{width:15px;height:15px}
.scr-crm .act-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--font-arabic)}
.scr-crm .act-meta b{font-size:12px;color:var(--text-primary)}
.scr-crm .act-meta .mono{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.scr-crm .act-meta .rel{font-size:10px;color:var(--c-nebula)}
.scr-crm .act-meta .by{font-size:10.5px;color:var(--text-muted);margin-inline-start:auto}
.scr-crm .act-note{font-size:12.5px;line-height:1.6;color:var(--text-body);white-space:pre-wrap;margin:3px 0 6px;font-family:var(--font-arabic)}
.scr-crm .act-chips{display:flex;gap:6px;flex-wrap:wrap}
.scr-crm .achip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-arabic);font-size:10.5px;color:var(--c-pearl-lav);background:rgba(142,107,174,.12);border:1px solid var(--border-subtle);padding:3px 9px;border-radius:var(--r-pill)}
.scr-crm .achip svg{width:11px;height:11px}
.scr-crm .tl-h{font-family:var(--font-arabic);font-size:11px;font-weight:700;color:var(--c-pearl-lav);margin:12px 2px 2px;padding-top:8px;border-top:1px dashed var(--border-subtle)}
.scr-crm .tl-h:first-child{border-top:none;padding-top:0;margin-top:0}
.scr-crm .lg-del{background:rgba(var(--rgb-fill),.05);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:8px;padding:6px;cursor:pointer;display:inline-flex;align-items:center;flex-shrink:0}
.scr-crm .lg-del:hover{color:var(--text-primary)}
.scr-crm .lg-del svg{width:13px;height:13px}
.scr-crm .dlast{display:flex;align-items:center;gap:5px;font-family:var(--font-arabic);font-size:10px;color:var(--text-muted);margin-top:7px}
.scr-crm .dlast svg{width:11px;height:11px}
.scr-crm .dlast.stale{color:var(--warn)}
.scr-crm .dlast.none{color:#8b90ad}
.scr-crm .con-hint{font-family:var(--font-arabic);font-size:10px;margin-top:5px;display:flex;align-items:center;gap:5px}
.scr-crm .con-hint:empty{display:none}
.scr-crm .con-hint.ok{color:var(--success)}
.scr-crm .con-hint.warn{color:var(--warn)}
.scr-crm .con-hint svg{width:11px;height:11px;flex-shrink:0}
@media(max-width:900px){.scr-crm .app{grid-template-columns:1fr}
.scr-crm .side{display:none}}

/* ── .scr-home ── */
.scr-home *{box-sizing:border-box}
html, body{margin:0;min-height:100%}
body{font-family:'Inter','Noto Kufi Arabic',sans-serif;color:var(--text-primary);background:var(--c-void);min-height:100vh;-webkit-font-smoothing:antialiased;padding-bottom:60px}
.scr-home #stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.scr-home .bg{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 50% -10%,#2d1f5e 0,rgba(45,31,94,0) 55%),
  radial-gradient(90% 70% at 86% 10%,rgba(142,107,174,.30) 0,rgba(142,107,174,0) 50%),
  radial-gradient(80% 70% at 10% 92%,rgba(108,75,157,.26) 0,rgba(108,75,157,0) 55%),var(--c-void)}
.scr-home .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(72px);opacity:.8;pointer-events:none}
.scr-home .orb.a{width:440px;height:440px;top:-130px;left:-90px;background:radial-gradient(circle,rgba(142,107,174,.36),transparent 68%)}
.scr-home .orb.b{width:480px;height:480px;bottom:-180px;right:-130px;background:radial-gradient(circle,rgba(108,75,157,.3),transparent 66%)}
.scr-home .glass{position:relative;background:var(--glass-standard);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);border-radius:var(--r-xl);box-shadow:var(--shadow-deep),inset 0 1px 0 rgba(var(--rgb-fill),.06)}
.scr-home .glass::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--specular)}
.scr-home .wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.scr-home .top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px auto;padding:12px 18px;position:relative;z-index:200;overflow:visible}
.scr-home .brand{display:flex;align-items:center;gap:12px}
.scr-home .brand .mk{width:36px;height:36px;border-radius:11px;background:var(--grad-primary);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 8px 18px rgba(var(--rgb-shade),.4)}
.scr-home .brand .mk svg{width:19px;height:19px;color:var(--text-primary)}
.scr-home .brand .wd{font-weight:600;font-size:17px}
.scr-home .brand .wd .en{color:var(--text-muted);font-weight:400}
.scr-home .top .right{display:flex;align-items:center;gap:10px}
.scr-home .chip{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);padding:8px 12px;border-radius:var(--r-pill);border:1px solid var(--border-subtle)}
.scr-home .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}
.scr-home .av{width:34px;height:34px;border-radius:50%;background:var(--grad-primary);display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.25)}
.scr-home .head{margin:34px auto 4px}
.scr-home .head h1{margin:0;font-family:var(--font-arabic);font-weight:300;font-size:32px;background:var(--grad-heading);-webkit-background-clip:text;background-clip:text;color:transparent}
.scr-home .head h1 b{font-weight:700}
.scr-home .head .s{margin:8px 2px 0;color:var(--text-muted);font-size:14px}
.scr-home .eyebrow{display:flex;align-items:center;gap:10px;margin:30px 2px 14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-label)}
.scr-home .eyebrow .ar{font-family:var(--font-arabic);font-size:12.5px;letter-spacing:normal;color:var(--text-body);text-transform:none}
.scr-home .eyebrow .ln{flex:1;height:1px;background:var(--border-subtle)}
.scr-home .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.scr-home .tile{position:relative;display:flex;flex-direction:column;gap:16px;padding:22px;min-height:170px;border-radius:var(--r-lg);text-decoration:none;color:inherit;cursor:pointer;overflow:hidden;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur),background var(--dur)}
.scr-home .tile:hover{transform:translateY(-3px);background:var(--glass-surface);box-shadow:var(--shadow-deep),var(--glow-violet)}
.scr-home .tile .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;background:var(--grad-button);color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.3),0 12px 26px -8px rgba(142,107,174,.55);transition:var(--dur)}
.scr-home .tile .ic svg{width:25px;height:25px}
.scr-home .tile .sp{flex:1}
.scr-home .tile .nm{font-family:var(--font-arabic);font-size:18px;font-weight:600}
.scr-home .tile .en{font-size:11.5px;color:var(--text-muted);letter-spacing:.04em;margin-top:3px}
.scr-home .tile .desc{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.5}
.scr-home .tile .chev{position:absolute;inset-block-start:20px;inset-inline-start:20px;color:var(--text-label);opacity:0;transform:translateX(6px);transition:var(--dur)}
.scr-home .tile:hover .chev{opacity:1;transform:none}
.scr-home .tile .chev svg{width:18px;height:18px}
.scr-home .tile.soon{opacity:.45;cursor:default}
.scr-home .tile.soon:hover{transform:none;background:var(--glass-standard);box-shadow:var(--shadow-deep)}
.scr-home .tile.soon .ic{background:rgba(162,124,183,.16);color:var(--c-pearl-lav);box-shadow:none}
.scr-home .badge{position:absolute;inset-block-start:18px;inset-inline-start:18px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-pearl-lav);background:rgba(162,124,183,.18);border:1px solid rgba(162,124,183,.3);padding:3px 8px;border-radius:var(--r-pill)}
.scr-home .foot{max-width:1040px;margin:30px auto 0;padding:0 24px;color:var(--text-label);font-size:11.5px;text-align:center}
/* ── .scr-home ── */
.scr-home .adm-tile{border-color:rgba(92,200,214,.34)!important}
.scr-home .adm-tile:hover{box-shadow:0 0 44px rgba(92,200,214,.18)}
.scr-home .adm-tile .ic{background:rgba(92,200,214,.15)!important;color:var(--accent-teal)!important}
.scr-home .adm-badge{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.1em;padding:2px 7px;border-radius:999px;
 background:rgba(92,200,214,.18);color:var(--accent-teal);margin-inline-start:7px;vertical-align:middle}
.scr-home .depts .grid{margin:0}
.scr-home .dept{display:flex;align-items:center;gap:11px;margin:30px 0 13px;font-family:var(--font-arabic)}
.scr-home .dept:first-child{margin-top:6px}
.scr-home .dept .di{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(162,124,183,.16);color:var(--c-pearl-lav)}
.scr-home .dept .di svg{width:14px;height:14px}
.scr-home .dept .dnm{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.scr-home .dept .den{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.scr-home .dept .dcn{font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted)}
.scr-home .dept .dline{flex:1;height:1px;background:linear-gradient(to left,rgba(var(--rgb-fill),.16),transparent)}
.scr-home .dept[hidden]{display:none!important}
.scr-home .more-tile .ic{background:rgba(162,124,183,.2);color:var(--c-pearl-lav);box-shadow:none}
.scr-home .more-tile:hover .ic{background:var(--grad-button);color:var(--text-primary)}
.scr-home .tile[hidden]{display:none!important}
.scr-home .mback{position:fixed;inset:0;background:rgba(var(--rgb-panel),.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:var(--dur);z-index:80}
.scr-home .mback.open{opacity:1;visibility:visible}
.scr-home .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;
  width:min(720px,94vw);max-height:92vh;overflow:hidden;z-index:81;display:flex;flex-direction:column;border-radius:var(--r-2xl);
  transition:transform var(--dur) var(--ease-spring),opacity var(--dur),visibility var(--dur)}
.scr-home .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.scr-home .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border-subtle)}
.scr-home .m-head h2{margin:0;font-family:var(--font-arabic);font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.scr-home .m-head h2 svg{width:18px;height:18px;color:var(--c-nebula)}
.scr-home .m-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);
  color:var(--text-body);cursor:pointer;display:grid;place-items:center}
.scr-home .m-x svg{width:16px;height:16px}
.scr-home .m-body{padding:14px 22px 18px;overflow-y:auto}
.scr-home .m-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 22px;border-top:1px solid var(--border-subtle);font-family:var(--font-arabic);font-size:11px;color:var(--text-muted)}
.scr-home .msec{font-family:var(--font-arabic);font-size:11.5px;color:var(--text-primary);display:flex;align-items:center;gap:7px;margin:17px 0 9px;
  padding-bottom:7px;border-bottom:1px solid rgba(var(--rgb-fill),.08)}
.scr-home .msec:first-child{margin-top:2px}
.scr-home .msec svg{width:14px;height:14px;flex-shrink:0;color:var(--accent-teal)}
.scr-home .msec .cnt{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
.scr-home .mrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;border:1px solid rgba(var(--rgb-fill),.07);
  background:rgba(var(--rgb-fill),.03);font-family:var(--font-arabic);margin-bottom:7px}
.scr-home .mrow .mi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(92,200,214,.14);color:var(--accent-teal)}
.scr-home .mrow .mi svg{width:16px;height:16px}
.scr-home .mrow.lock{opacity:.72}
.scr-home .mrow.lock .mi{background:rgba(var(--rgb-fill),.07);color:var(--text-muted)}
.scr-home .mrow .mn{font-size:12px;color:var(--text-primary)}
.scr-home .mrow .md{font-size:9.5px;color:var(--text-muted);margin-top:3px;line-height:1.65}
.scr-home .msw{position:relative;width:38px;height:21px;flex-shrink:0;cursor:pointer}
.scr-home .msw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.scr-home .msw i{position:absolute;inset:0;border-radius:999px;background:rgba(var(--rgb-fill),.14);transition:var(--dur)}
.scr-home .msw i:after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:15px;height:15px;border-radius:50%;
  background:var(--text-primary);transition:var(--dur)}
.scr-home .msw input:checked + i{background:linear-gradient(135deg,#8e6bae,#5c3f86)}
.scr-home .msw input:checked + i:after{transform:translateX(-17px)}
.scr-home .msw input:disabled + i{opacity:.4}
.scr-home .mnote{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:11px;font-family:var(--font-arabic);
  font-size:10.5px;line-height:1.75;background:rgba(230,184,92,.1);border:1px solid rgba(230,184,92,.28);color:#e6b85c;margin-bottom:12px}
.scr-home .mnote svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.scr-home .mbtn{padding:6px 12px;border-radius:999px;border:1px solid var(--border-glass);background:rgba(var(--rgb-fill),.05);
  color:var(--text-body);font-family:var(--font-arabic);font-size:10.5px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.scr-home .mbtn:hover{color:var(--text-primary);border-color:rgba(142,107,174,.5)}
.scr-home .mbtn svg{width:12px;height:12px;vertical-align:-2px;margin-inline-end:4px}
.scr-home .m-foot svg, .scr-home .mrow svg{flex-shrink:0}
.scr-home .mbtn.done{color:#e6b85c;border-color:rgba(230,184,92,.4);cursor:default}
.scr-home .mtoast{position:fixed;bottom:22px;inset-inline-start:22px;z-index:130;display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:13px;background:rgba(var(--rgb-panel),.95);border:1px solid var(--border-glass);
  font-family:var(--font-arabic);font-size:11.5px;color:var(--text-primary);box-shadow:var(--shadow-deep)}
.scr-home .mtoast svg{width:15px;height:15px;color:var(--success)}

/* Live home launcher: the prototype layout, now connected to real application routes. */
.home-shell{height:100vh;overflow-y:auto;overflow-x:hidden;padding-bottom:48px}
.home-shell>.view{min-height:100vh;overflow:visible;padding:0}
.scr-home .home-page{min-height:100vh;padding:1px 0 40px}
.scr-home .home-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.scr-home .home-brand .mk{width:36px;height:36px;display:grid;place-items:center}
.scr-home .home-brand .mk svg{width:36px;height:36px}
.scr-home .home-brand .wd{font-family:var(--font-arabic);font-size:17px;font-weight:600}
.scr-home .home-brand .en{color:var(--text-muted);font-weight:400;margin-inline-start:4px}
.scr-home .home-account-area{position:relative;z-index:20}
.scr-home .home-account{display:flex;align-items:center;gap:9px;border:1px solid var(--border-subtle);border-radius:var(--r-pill);padding:4px 5px 4px 10px;background:rgba(var(--rgb-fill),.04);color:var(--text-primary);cursor:pointer;font-family:var(--font-arabic);transition:background var(--dur),border-color var(--dur),box-shadow var(--dur)}
.scr-home .home-account:hover,.scr-home .home-account.open{background:rgba(142,107,174,.18);border-color:rgba(162,124,183,.4);box-shadow:0 10px 28px -14px rgba(142,107,174,.7)}
.scr-home .account-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.scr-home .account-copy b{font-size:10.5px;font-weight:600}
.scr-home .account-copy small{font-size:8.5px;color:var(--text-muted)}
.scr-home .account-chevron{display:grid;place-items:center;color:var(--text-muted);transition:transform .22s var(--ease-spring)}
.scr-home .home-account.open .account-chevron{transform:rotate(180deg)}
.scr-home.home-menu-portal{position:fixed;inset:0;z-index:5000;pointer-events:none}
.scr-home .home-account-menu{position:fixed;width:min(286px,calc(100vw - 28px));padding:8px;border:1px solid rgba(216,186,216,.2);border-radius:20px;background:linear-gradient(150deg,rgba(39,29,73,.985),rgba(13,10,28,.985));-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:0 28px 72px -18px rgba(var(--rgb-shade),.92),0 0 46px rgba(142,107,174,.2),inset 0 1px 0 rgba(var(--rgb-fill),.1);overflow:hidden;animation:homeMenuIn .24s var(--ease-spring);isolation:isolate;pointer-events:auto}
.scr-home .home-account-menu::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 70% at 85% 0,rgba(162,124,183,.18),transparent 62%),linear-gradient(90deg,transparent,rgba(216,186,216,.14),transparent) top/76% 1px no-repeat}
.scr-home .home-account-menu[hidden]{display:none}
.scr-home .account-menu-head{display:flex;align-items:center;gap:11px;padding:11px 11px 10px}
.scr-home .account-menu-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:var(--grad-primary);box-shadow:inset 0 1px 0 rgba(var(--rgb-fill),.28),0 9px 22px -10px rgba(142,107,174,.8);font-family:var(--font-arabic);font-size:12px;font-weight:700}
.scr-home .account-menu-person{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.scr-home .account-menu-person b{font-family:var(--font-arabic);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-home .account-menu-person small{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-home .account-menu-context{display:flex;align-items:center;gap:7px;margin:0 8px 7px;padding:7px 10px;border:1px solid rgba(var(--rgb-fill),.07);border-radius:10px;background:rgba(var(--rgb-fill),.035);font-family:var(--font-arabic);font-size:9.5px;color:var(--text-muted)}
.scr-home .context-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}
.scr-home .account-menu-divider{height:1px;margin:6px;background:rgba(var(--rgb-fill),.085)}
.scr-home .account-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:12px;background:transparent;color:var(--text-body);text-decoration:none;text-align:start;cursor:pointer;font-family:var(--font-arabic);transition:background var(--dur),color var(--dur),transform var(--dur)}
.scr-home .account-menu-item:hover,.scr-home .account-menu-item:focus-visible{background:linear-gradient(90deg,rgba(142,107,174,.24),rgba(142,107,174,.1));color:var(--text-primary);transform:translateX(-2px)}
.scr-home .account-menu-item>.menu-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:rgba(162,124,183,.13);color:var(--c-pearl-lav)}
.scr-home .account-menu-item>.menu-copy{display:flex;flex:1;flex-direction:column;line-height:1.3}
.scr-home .account-menu-item>.menu-copy b{font-size:11px;font-weight:600}
.scr-home .account-menu-item>.menu-copy small{font-family:var(--font-sans);font-size:8.5px;color:var(--text-muted);letter-spacing:.04em}
.scr-home .account-menu-item>svg{color:var(--text-label)}
.scr-home .account-menu-item.danger{color:#ef9bad}
.scr-home .account-menu-item.danger>.menu-icon{background:rgba(224,102,126,.11);color:#ef9bad}
@keyframes homeMenuIn{from{opacity:0;transform:translateY(-7px) scale(.975)}to{opacity:1;transform:none}}
.scr-home .head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.scr-home .head-copy{min-width:0}
.scr-home .head .s{font-family:var(--font-arabic)}
.scr-home .search-wrap{width:min(310px,100%);height:44px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--border-subtle);border-radius:14px;background:rgba(var(--rgb-fill),.05);color:var(--text-muted)}
.scr-home .search-wrap:focus-within{border-color:rgba(142,107,174,.65);box-shadow:0 0 0 3px rgba(142,107,174,.12)}
.scr-home .search-wrap svg{flex:0 0 auto}
.scr-home .home-search{width:100%;border:0;outline:0;background:transparent;color:var(--text-primary);font-family:var(--font-arabic);font-size:12px}
.scr-home .home-search::placeholder{color:var(--text-label)}
.scr-home .tile{border:1px solid var(--border-glass);font-family:inherit;text-align:start}
.scr-home .tile .sp,.scr-home .tile .nm,.scr-home .tile .en,.scr-home .tile .desc{display:block}
.scr-home .tile.featured{background:linear-gradient(145deg,rgba(142,107,174,.19),rgba(var(--rgb-fill),.055));border-color:rgba(162,124,183,.4)}
.scr-home .tile.featured::after{content:'ابدأ هنا · START HERE';position:absolute;inset-block-end:18px;inset-inline-start:18px;font-family:var(--font-mono);font-size:8px;letter-spacing:.07em;color:var(--c-pearl-lav)}
.scr-home .roadmap-grid .tile{min-height:152px}
.scr-home .home-empty{margin:28px 0;padding:22px;text-align:center;border:1px dashed var(--border-subtle);border-radius:16px;color:var(--text-muted);font-family:var(--font-arabic)}
.scr-home .home-empty[hidden]{display:none}
@media(max-width:720px){
  .scr-home .wrap{padding:0 14px}
  .scr-home .top{margin-top:10px;padding:10px 12px}
  .scr-home .top .chip,.scr-home .account-copy{display:none}
  .scr-home .home-account{padding:3px 7px 3px 3px}
  .scr-home .account-chevron{display:none}
  .scr-home .head{align-items:stretch;flex-direction:column;margin-top:26px}
  .scr-home .head h1{font-size:27px}
  .scr-home .search-wrap{width:100%}
  .scr-home .grid{grid-template-columns:1fr 1fr;gap:11px}
  .scr-home .tile{min-height:160px;padding:18px}
}
@media(max-width:460px){.scr-home .grid{grid-template-columns:1fr}.scr-home .tile{min-height:148px}}

/* Browser-native selects still need an opaque menu surface on Windows/Chromium. */
select.fi,select.inp,.scr-contacts select.selin,.scr-contacts select.fin,.scr-employees select.f-in{color-scheme:dark;background-color:rgba(20,15,42,.96)}
select.fi option,select.inp option,.scr-contacts select.selin option,.scr-contacts select.fin option,.scr-employees select.f-in option{background-color:#140f2a;color:#f4eff8;padding:8px}
[data-theme="light"] select.fi,[data-theme="light"] select.inp,[data-theme="light"] .scr-contacts select.selin,[data-theme="light"] .scr-contacts select.fin,[data-theme="light"] .scr-employees select.f-in{color-scheme:light;background-color:rgba(252,249,255,.96)}
[data-theme="light"] select.fi option,[data-theme="light"] select.inp option,[data-theme="light"] .scr-contacts select.selin option,[data-theme="light"] .scr-contacts select.fin option,[data-theme="light"] .scr-employees select.f-in option{background-color:#f7f1fb;color:#241c47}

/* ═══════════════════════════════════════════════════════════════
   طبقة العلامة والصقل — من النموذج (أخيرًا لأنها تُبطل ما قبلها عمدًا)
   ═══════════════════════════════════════════════════════════════ */

/* ════════ Orbit Pro Pack — shared professional polish (auto-injected) ════════ */
.tbl th{position:sticky;top:0;background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.num,.mono,td.num,.leg-n{font-variant-numeric:tabular-nums}
::selection{background:rgba(142,107,174,.45)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(142,107,174,.35);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(142,107,174,.6);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid rgba(142,107,174,.7);outline-offset:2px;border-radius:4px}
.pp-back{position:fixed;inset:0;background:rgba(var(--rgb-panel),.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:120;opacity:0;visibility:hidden;transition:.2s}
.pp-back.open{opacity:1;visibility:visible}
.pp-pal{position:fixed;top:14vh;left:50%;transform:translateX(-50%) translateY(-8px);width:min(530px,92vw);z-index:121;border-radius:20px;background:rgba(var(--rgb-panel),.93);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--rgb-fill),.16);box-shadow:0 30px 80px -20px rgba(var(--rgb-shade),.8),0 0 60px rgba(142,107,174,.2);opacity:0;visibility:hidden;transition:.22s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.pp-pal.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pp-in{width:100%;padding:15px 18px;background:transparent;border:none;border-bottom:1px solid rgba(var(--rgb-fill),.09);color:var(--text-primary);font-family:'Noto Kufi Arabic',sans-serif;font-size:13.5px;outline:none;box-sizing:border-box}
.pp-list{max-height:44vh;overflow-y:auto;padding:7px}
.pp-it{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;cursor:pointer;color:rgba(var(--rgb-text),.8);font-family:'Noto Kufi Arabic',sans-serif;font-size:12.5px;text-decoration:none}
.pp-it svg{width:15px;height:15px;color:var(--c-lavender);flex-shrink:0}
.pp-it small{margin-inline-start:auto;font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(var(--rgb-label),.55);letter-spacing:.06em}
.pp-it.sel,.pp-it:hover{background:rgba(142,107,174,.22);color:var(--text-primary)}
.pp-hint{padding:9px 16px;border-top:1px solid rgba(var(--rgb-fill),.08);font-family:ui-monospace,monospace;font-size:9px;color:rgba(var(--rgb-label),.5);letter-spacing:.08em;display:flex;gap:14px}
.pp-fab{position:fixed;bottom:20px;inset-inline-end:20px;z-index:60;width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--rgb-fill),.18);background:linear-gradient(135deg,#8e6bae,#5c3f86);color:var(--text-primary);cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(142,107,174,.8);transition:.2s cubic-bezier(.34,1.56,.64,1)}
.pp-fab:hover{transform:translateY(-3px)}
.pp-fab svg{width:17px;height:17px}
.pp-csv{position:absolute;top:8px;inset-inline-start:10px;z-index:6;width:28px;height:28px;border-radius:50%;border:1px solid rgba(var(--rgb-fill),.16);background:rgba(var(--rgb-panel),.85);color:rgba(var(--rgb-text),.75);cursor:pointer;display:grid;place-items:center;opacity:0;transition:.18s}
.pp-csv:hover{color:var(--text-primary);background:rgba(142,107,174,.5)}
.pp-csv svg{width:13px;height:13px}
*:hover>.pp-csv,.pp-csv:focus{opacity:1}
.pp-toasts{position:fixed;bottom:22px;inset-inline-start:22px;z-index:130;display:flex;flex-direction:column;gap:8px}
.pp-toast{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;background:rgba(var(--rgb-panel),.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(var(--rgb-fill),.14);box-shadow:0 20px 50px -16px rgba(var(--rgb-shade),.7);font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;color:var(--text-primary);animation:ppin .3s cubic-bezier(.34,1.56,.64,1)}
.pp-toast svg{width:15px;height:15px;color:var(--success)}
.pp-toast.err svg{color:var(--danger)}
@keyframes ppin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media print{
 #stars,.bg,.orb,.side,.acts,.tabs,.pp-fab,.pp-csv,.pp-back,.pp-pal,.mback,.modal,.toolbar,.pp-toasts{display:none!important}
 body{background:#fff!important;color:#111!important;overflow:visible!important}
 .app{display:block!important;height:auto!important}
 .main,.view{overflow:visible!important;height:auto!important;padding:0!important;max-height:none!important}
 .tblwrap{max-height:none!important;overflow:visible!important}
 .glass,.panel,.kpi{background:#fff!important;border:1px solid #ddd!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 .tbl th{position:static!important;background:#f3f3f3!important;color:#333!important}
 .tbl td{color:#222!important;border-color:#e5e5e5!important}
 h1,h2,h3,.ptitle h1,.p-head h3{color:#111!important}
}
/* ── Liquid Glass datepicker (auto-upgrades input[type=date]) ── */
.ppdp-in{cursor:pointer}
.ppdp-pop{position:fixed;z-index:140;width:288px;padding:14px;border-radius:16px;background:rgba(var(--rgb-panel),.96);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--rgb-fill),.16);box-shadow:0 26px 64px -18px rgba(var(--rgb-shade),.75),0 0 40px rgba(142,107,174,.18);display:none;direction:rtl}
.ppdp-pop.open{display:block;animation:ppdpIn .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes ppdpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ppdp-head{display:flex;align-items:center;gap:4px;margin-bottom:10px}
.ppdp-nav{width:30px;height:30px;border-radius:9px;border:none;background:rgba(var(--rgb-fill),.05);color:rgba(var(--rgb-text),.75);cursor:pointer;display:grid;place-items:center;transition:.18s}
.ppdp-nav:hover{background:rgba(142,107,174,.22);color:var(--text-primary)}
.ppdp-nav svg{width:15px;height:15px}
.ppdp-title{flex:1;text-align:center;font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:600;color:var(--text-primary);background:transparent;border:none;border-radius:8px;padding:7px 8px;cursor:pointer;transition:.18s}
.ppdp-title:hover{background:rgba(142,107,174,.18)}
.ppdp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.ppdp-wd span{text-align:center;font-family:'Noto Kufi Arabic',sans-serif;font-size:9.5px;color:rgba(var(--rgb-label),.6);padding:3px 0}
.ppdp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ppdp-d{aspect-ratio:1;border:none;background:rgba(var(--rgb-fill),.03);color:rgba(var(--rgb-text),.78);font-family:ui-monospace,monospace;font-size:11.5px;border-radius:9px;cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums}
.ppdp-d:hover{background:rgba(142,107,174,.22);color:var(--text-primary)}
.ppdp-d.blank{background:transparent;pointer-events:none}
.ppdp-d.today{box-shadow:inset 0 0 0 1px rgba(var(--rgb-label),.55);color:var(--text-primary)}
.ppdp-d.sel{background:linear-gradient(135deg,#8e6bae,#5c3f86);color:var(--text-primary);font-weight:700;box-shadow:0 6px 16px -6px rgba(142,107,174,.7)}
.ppdp-my{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 0 4px}
.ppdp-m{padding:13px 6px;border:none;background:rgba(var(--rgb-fill),.04);color:rgba(var(--rgb-text),.78);font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;border-radius:10px;cursor:pointer;transition:.18s}
.ppdp-m:hover{background:rgba(142,107,174,.2);color:var(--text-primary)}
.ppdp-m.cur{box-shadow:inset 0 0 0 1px rgba(var(--rgb-label),.5);color:var(--text-primary)}
.ppdp-m.sel{background:linear-gradient(135deg,#8e6bae,#5c3f86);color:var(--text-primary);font-weight:700}
.ppdp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--rgb-fill),.08)}
.ppdp-foot button{border:none;background:rgba(var(--rgb-fill),.06);color:rgba(var(--rgb-text),.8);font-family:'Noto Kufi Arabic',sans-serif;font-size:11px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.18s}
.ppdp-foot button:hover{background:rgba(142,107,174,.25);color:var(--text-primary)}
.ppdp-back{position:fixed;inset:0;z-index:139;display:none}
.ppdp-back.open{display:block}
/* ── a11y contrast lift ── */
:root{--text-muted:rgba(var(--rgb-text),.7)}
/* ── chart hover + small-screen scroll ── */
.chart{overflow-x:auto}
.chart svg{min-width:540px}
.chart svg rect{transition:filter .15s}
.chart svg rect:hover{filter:brightness(1.4)}
/* ── empty state with CTA ── */
.pp-empty{display:flex;flex-direction:column;align-items:center;gap:11px;padding:32px 20px;text-align:center;font-family:'Noto Kufi Arabic',sans-serif;color:rgba(var(--rgb-text),.62);font-size:12px}
.pp-empty svg{width:30px;height:30px;color:rgba(162,124,183,.75)}
.pp-empty a.cta{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:999px;background:linear-gradient(135deg,#8e6bae,#5c3f86);color:var(--text-primary);font-size:11.5px;font-weight:600;text-decoration:none;box-shadow:0 10px 26px -10px rgba(142,107,174,.7);transition:.2s cubic-bezier(.34,1.56,.64,1)}
.pp-empty a.cta:hover{transform:translateY(-2px)}
/* ── responsive: nav drawer + stacking ≤1023px ── */
.pp-nav{display:none;position:fixed;top:14px;inset-inline-start:14px;z-index:126;width:40px;height:40px;border-radius:12px;border:1px solid rgba(var(--rgb-fill),.16);background:rgba(var(--rgb-panel),.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text-primary);cursor:pointer;place-items:center}
.pp-nav svg{width:18px;height:18px}
.pp-navback{position:fixed;inset:0;z-index:124;background:rgba(var(--rgb-panel),.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none}
@media(max-width:1023px){
 .app{grid-template-columns:1fr!important}
 .side{display:flex!important;position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(300px,84vw);z-index:125;transform:translateX(105%);transition:transform .28s cubic-bezier(.34,1.56,.64,1);box-shadow:-30px 0 80px rgba(var(--rgb-shade),.65);overflow-y:auto;border-radius:0;margin:0!important}
 body.pp-nav-open .side{transform:none}
 body.pp-nav-open .pp-navback{display:block}
 .pp-nav{display:grid}
 .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
 .two,.grid2,.cols2{grid-template-columns:1fr!important}
 .toolbar{flex-wrap:wrap;gap:8px}
 .main{padding:14px!important}
 .ptitle h1,.p-title h1{font-size:24px!important}
 .fields{grid-template-columns:1fr!important}
 .tblwrap{overflow-x:auto}
}

/* ── account chip + menu ── */
.pp-amenu{position:fixed;bottom:124px;inset-inline-end:20px;z-index:122;width:238px;border-radius:18px;background:rgba(var(--rgb-panel),.95);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--rgb-fill),.16);box-shadow:0 26px 64px -18px rgba(var(--rgb-shade),.8),0 0 40px rgba(142,107,174,.18);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s cubic-bezier(.34,1.56,.64,1)}
.pp-amenu.open{opacity:1;visibility:visible;transform:none}
.pp-amhead{padding:10px 12px 12px;border-bottom:1px solid rgba(var(--rgb-fill),.08);margin-bottom:6px;font-family:'Noto Kufi Arabic',sans-serif}
.pp-amhead b{display:block;color:var(--text-primary);font-size:12.5px}
.pp-amhead small{display:block;color:rgba(var(--rgb-label),.6);font-size:9.5px;font-family:ui-monospace,monospace;direction:ltr;text-align:end;margin-top:3px}
.pp-amenu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;color:rgba(var(--rgb-text),.82);font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;text-decoration:none;transition:.15s}
.pp-amenu a:hover{background:rgba(142,107,174,.2);color:var(--text-primary)}
.pp-amenu a svg{width:15px;height:15px;color:var(--c-lavender);flex-shrink:0}
.pp-amdiv{height:1px;background:rgba(var(--rgb-fill),.08);margin:6px 4px}
body.pp-auth .pp-fab,body.pp-auth .pp-user,body.pp-auth .pp-amenu,body.pp-auth .pp-nav,body.pp-auth .pp-navback{display:none!important}
@media print{.pp-user,.pp-amenu{display:none!important}}

/* ── sidebar user card ── */
.pp-user{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 10px;border-radius:14px;border:1px solid rgba(var(--rgb-fill),.09);background:rgba(var(--rgb-fill),.04);cursor:pointer;transition:.18s;width:100%;text-align:start;flex-shrink:0}
.pp-user:hover{background:rgba(142,107,174,.16);border-color:rgba(142,107,174,.35)}
.pp-uav{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--text-primary);font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;font-weight:700;flex-shrink:0}
.pp-uinfo{flex:1;min-width:0;font-family:'Noto Kufi Arabic',sans-serif}
.pp-uinfo b{display:block;color:var(--text-primary);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-uinfo small{display:block;color:rgba(var(--rgb-label),.62);font-size:9.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-user>svg{width:14px;height:14px;color:rgba(var(--rgb-label),.6);flex-shrink:0}
.pp-amenu.at-side{bottom:78px;inset-inline-start:22px;inset-inline-end:auto;z-index:127}
.pp-amenu.at-top{top:64px;bottom:auto;inset-inline-end:24px;transform:translateY(-8px)}
.pp-amenu.at-top.open{transform:none}

/* ── attachments widget (OrbitDrive) ── */
.pp-att{margin-top:12px;border:1px solid rgba(var(--rgb-fill),.1);border-radius:14px;background:rgba(var(--rgb-fill),.03);overflow:hidden;font-family:'Noto Kufi Arabic',sans-serif}
.pp-att-h{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid rgba(var(--rgb-fill),.07);font-size:11.5px;color:rgba(var(--rgb-text),.85)}
.pp-att-up{border:1px solid rgba(142,107,174,.4);background:rgba(142,107,174,.16);color:var(--c-pearl-lav);font-family:'Noto Kufi Arabic',sans-serif;font-size:10.5px;font-weight:600;padding:5px 13px;border-radius:999px;cursor:pointer;transition:.18s}
.pp-att-up:hover{background:rgba(142,107,174,.32);color:var(--text-primary)}
.pp-att-l{padding:4px 8px}
.pp-att-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-bottom:1px solid rgba(var(--rgb-fill),.05);font-size:11.5px}
.pp-att-row:last-child{border-bottom:none}
.pp-att-ic{display:inline-flex;flex-direction:column;align-items:center;flex-shrink:0;width:30px}
.pp-att-ic svg{width:17px;height:17px}
.pp-att-ic b{font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.pp-att-n{flex:1;min-width:0;color:rgba(var(--rgb-text),.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-att-m{font-family:ui-monospace,monospace;font-size:9px;color:rgba(var(--rgb-label),.55);flex-shrink:0}
.pp-att-b{width:24px;height:24px;border-radius:8px;border:none;background:transparent;color:rgba(var(--rgb-label),.65);display:grid;place-items:center;cursor:pointer;text-decoration:none;font-size:13px;transition:.15s;flex-shrink:0}
.pp-att-b:hover{background:rgba(142,107,174,.25);color:var(--text-primary)}
.pp-att-e{padding:14px;text-align:center;font-size:10.5px;color:rgba(var(--rgb-label),.5)}
@media print{.pp-att{display:none!important}}

/* ── shared confirm (QA-7) ── */
.pp-conf{position:fixed;inset:0;z-index:150;display:none}
.pp-conf.open{display:block}
.pp-conf-b{position:absolute;inset:0;background:rgba(var(--rgb-panel),.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pp-conf-c{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:min(360px,92vw);border-radius:18px;background:rgba(var(--rgb-panel),.97);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--rgb-fill),.16);box-shadow:0 30px 80px -20px rgba(var(--rgb-shade),.85);padding:20px 22px;direction:rtl;animation:ppin .25s cubic-bezier(.34,1.56,.64,1)}
.pp-conf-t{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:7px}
.pp-conf-m{font-family:'Noto Kufi Arabic',sans-serif;font-size:11.5px;color:rgba(var(--rgb-text),.75);line-height:1.9;margin-bottom:16px}
.pp-conf-a{display:flex;gap:9px;justify-content:flex-start}
.pp-conf-a button{font-family:'Noto Kufi Arabic',sans-serif;font-size:11.5px;font-weight:600;padding:8px 20px;border-radius:999px;cursor:pointer;transition:.18s;border:1px solid rgba(var(--rgb-fill),.14)}
.pp-cno{background:rgba(var(--rgb-fill),.06);color:rgba(var(--rgb-text),.85)}
.pp-cno:hover{background:rgba(var(--rgb-fill),.12)}
.pp-cyes{background:linear-gradient(135deg,#8e6bae,#5c3f86);color:var(--text-primary);border-color:transparent}
.pp-cyes.danger{background:linear-gradient(135deg,#e0667e,#a03050)}
.pp-cyes:hover{transform:translateY(-1px)}

/* icons never stretch — beats any container min-width rule */
svg.lic{min-width:0;min-height:0;max-width:none}
.node-col svg.lic{width:13px;height:13px}
/* ════════ Orbit tooltips — glass, RTL, keyboard-accessible ════════ */
.pp-tip{position:fixed;z-index:4000;max-width:290px;padding:8px 12px;border-radius:11px;
 background:linear-gradient(160deg,rgba(30,22,52,.97),rgba(18,13,34,.97));
 border:1px solid rgba(142,107,174,.42);box-shadow:0 14px 40px -12px rgba(var(--rgb-shade),.85),0 0 0 1px rgba(var(--rgb-fill),.04) inset;
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 font-family:var(--font-arabic,'Noto Kufi Arabic',sans-serif);font-size:11px;line-height:1.75;color:var(--c-pearl-light);
 text-align:start;pointer-events:none;opacity:0;transform:translateY(4px) scale(.97);
 transition:opacity .14s ease,transform .18s cubic-bezier(.34,1.56,.64,1);white-space:normal;word-break:break-word}
.pp-tip.on{opacity:1;transform:translateY(0) scale(1)}
.pp-tip b{color:var(--text-primary);font-weight:600}
.pp-tip .pp-tip-k{display:block;font-family:ui-monospace,SFMono-Regular,monospace;font-size:8.5px;letter-spacing:.12em;
 color:var(--c-lavender);text-transform:uppercase;margin-bottom:3px;direction:ltr;text-align:start}
.pp-tip:after{content:'';position:absolute;width:9px;height:9px;background:inherit;
 border-inline-start:1px solid rgba(142,107,174,.42);border-block-start:1px solid rgba(142,107,174,.42);
 inset-inline-start:var(--tipx,50%);margin-inline-start:-5px}
.pp-tip.top:after{bottom:-5px;transform:rotate(225deg)}
.pp-tip.bottom:after{top:-5px;transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.pp-tip{transition:opacity .01s}}
@media print{.pp-tip{display:none!important}}

/* ════════ Madar ORBIT — brand layer (Brand Guidelines v1.0) ════════ */
:root{
  /* channels — the whole UI tints through these */
  --rgb-fill:255,255,255;      /* surface tints          */
  --rgb-shade:0,0,0;           /* depth shadows          */
  --rgb-text:236,224,239;      /* body text              */
  --rgb-label:205,177,212;     /* labels / mono          */
  --rgb-panel:22,16,44;        /* opaque panels, headers */
  /* palette completion — sampled from the mark */
  --c-ink:#231f20;--c-cosmic:#2e2a6e;--c-deep:#0d0a1c;
  --c-periwinkle:#806db0;--c-deep-violet:#69478a;--c-shadow-violet:#5c3f86;--c-chrome:#dddcdc;
  --c-pearl-light:#ece0ef;
  /* brand gradients */
  --grad-pearl:linear-gradient(180deg,#d8bad8 0%,#69478a 100%);
  --grad-heading:linear-gradient(118deg,#f3e9f6 0%,#cdb1d4 42%,#a27cb7 100%);
  --grad-chrome:linear-gradient(180deg,#fff,#dddcdc 25%,#7d7b7b 67%,#231f20);
  --specular:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  --shadow-sphere:inset -9px -9px 22px rgba(0,0,0,.5),inset 7px 7px 16px rgba(255,255,255,.16),0 14px 30px rgba(0,0,0,.42);
  /* motion — brand timings */
  --dur-micro:120ms;--dur-standard:240ms;--dur-entrance:480ms;--dur-exit:200ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  /* 8-point grid */
  --sp-1:4px;--sp-2:8px;--sp-3:16px;--sp-4:24px;--sp-5:32px;--sp-6:48px;--sp-7:64px;--sp-8:96px;
  --r-xs:4px;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --ls-eyebrow:.28em;
  --accent-teal:#5cc8d6;--c-orchid:#cf8bd6;
  color-scheme:dark;
}
/* the mandatory specular edge — every glass surface refracts light along its top */
.glass:not(.modal):not(.side){position:relative}
.glass::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;pointer-events:none;
  background:var(--specular);border-radius:inherit;z-index:1}
.glass.panel::before{opacity:.75}
.modal::before,.side::before{opacity:.9}
/* eyebrow tracking per the type spec */
.grp,.p-head .hint.eyebrow,.eyebrow{letter-spacing:var(--ls-eyebrow)}

/* ─── the mark ─── */
.orbmark{width:100%;height:100%;display:block;overflow:visible;place-self:stretch}
/* brand minimum: the icon mark never renders below 32px */
.mk,.mk2{min-width:36px;min-height:36px}
.brand .mk{width:38px;height:38px}
.mk svg.orbmark,.mk2 svg.orbmark,.side .mk svg,.auth-brand .mk2 svg{
  width:100%!important;height:100%!important;color:inherit}
.mk,.mk2{background:none!important;box-shadow:none!important;border:none!important;
  display:grid;place-items:center;overflow:visible}
.brand .wd small{letter-spacing:.26em}
.brand .wd{position:relative}

/* ════════ LIGHT THEME — brand semantic aliases ════════ */
:root[data-theme="light"]{
  color-scheme:light;
  --rgb-fill:45,31,94;
  --rgb-shade:45,31,94;
  --rgb-text:48,40,82;
  --rgb-label:104,76,148;
  --rgb-panel:255,255,255;
  --c-void:#e7e0f3;--c-space:#f4f0fb;--c-deep:#ede6f7;
  --text-primary:#241c47;
  --text-body:rgba(48,40,82,.82);
  --text-muted:rgba(48,40,82,.60);
  --text-label:rgba(104,76,148,.90);
  --border-glass:rgba(45,31,94,.12);
  --border-subtle:rgba(45,31,94,.10);
  --glass-standard:rgba(255,255,255,.55);
  --glass-surface:rgba(255,255,255,.74);
  --shadow-deep:0 22px 52px -20px rgba(45,31,94,.28);
  --glow-violet:0 0 48px rgba(142,107,174,.18);
  --glass-blur:blur(24px) saturate(180%) brightness(1.02);
}
[data-theme="light"] body{background:#e7e0f3;color:var(--text-body)}
[data-theme="light"] .bg{background:
  radial-gradient(120% 90% at 50% -10%,#dcd2f0 0%,rgba(220,210,240,0) 55%),
  radial-gradient(90% 70% at 85% 18%,rgba(142,107,174,.16) 0%,rgba(142,107,174,0) 50%),#e7e0f3}
[data-theme="light"] #stars{display:none}
[data-theme="light"] .orb{opacity:.30;filter:blur(70px)}
[data-theme="light"] .orb.a{background:radial-gradient(circle,#b79fd8,transparent 65%)}
[data-theme="light"] .orb.b{background:radial-gradient(circle,#d8bad8,transparent 65%)}
[data-theme="light"] .glass{background:rgba(255,255,255,.62);border-color:rgba(45,31,94,.12);
  box-shadow:0 18px 44px -22px rgba(45,31,94,.30)}
[data-theme="light"] .glass::before{background:linear-gradient(90deg,transparent,rgba(45,31,94,.16),transparent)}
[data-theme="light"] .side{background:rgba(255,255,255,.70)}
[data-theme="light"] .modal{background:rgba(255,255,255,.88)}
[data-theme="light"] .mback{background:rgba(45,31,94,.28)}
[data-theme="light"] .tbl th{background:rgba(244,240,251,.94);color:var(--text-label)}
[data-theme="light"] .tbl tr:hover td{background:rgba(142,107,174,.09)}
[data-theme="light"] .fi,[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{
  background:rgba(255,255,255,.85);border-color:rgba(45,31,94,.16);color:var(--text-primary)}
[data-theme="light"] .fi::placeholder,[data-theme="light"] input::placeholder{color:rgba(48,40,82,.42)}
[data-theme="light"] .btn.ghost{background:rgba(255,255,255,.72);border-color:rgba(45,31,94,.16);color:var(--text-primary)}
[data-theme="light"] .btn.ghost:hover{background:rgba(142,107,174,.14)}
[data-theme="light"] .ico-btn{background:rgba(255,255,255,.7);border-color:rgba(45,31,94,.14);color:rgba(48,40,82,.75)}
[data-theme="light"] .ico-btn:hover{background:rgba(142,107,174,.16);color:#241c47}
[data-theme="light"] .tab{color:rgba(48,40,82,.72)}
[data-theme="light"] .tab.on{background:rgba(142,107,174,.20);color:#241c47}
[data-theme="light"] .snav a{color:rgba(48,40,82,.78)}
[data-theme="light"] .snav a:hover{background:rgba(142,107,174,.14);color:#241c47}
[data-theme="light"] .snav a.active{background:rgba(142,107,174,.22);color:#241c47}
[data-theme="light"] .pp-tip{background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,240,251,.98));
  border-color:rgba(142,107,174,.34);color:#2b2350;box-shadow:0 14px 34px -12px rgba(45,31,94,.36)}
[data-theme="light"] .pp-tip b{color:#1d1738}
[data-theme="light"] .toast{background:rgba(255,255,255,.94);color:#241c47;border-color:rgba(45,31,94,.14)}
/* ── elements that carry a brand gradient keep WHITE ink in both themes ──
   the violet gradient (#8e6bae→#5c3f86) does not lighten in the light theme,
   so anything sitting on it must keep the dark-theme glyph colour.          */
[data-theme="light"] .btn.primary,
[data-theme="light"] .hirebtn,[data-theme="light"] .adminbtn,
[data-theme="light"] .av,[data-theme="light"] .tav,[data-theme="light"] .cav,
[data-theme="light"] .mk,[data-theme="light"] .mk2,
[data-theme="light"] [style*="linear-gradient(135deg"],
[data-theme="light"] .kdot,[data-theme="light"] .adot,[data-theme="light"] .hdot,
/* module launcher tiles — icon glyphs stay white on the violet chip */
[data-theme="light"] .tile:not(.soon):not(.adm-tile) .ic,
/* gradient buttons, FABs, confirm/CTA actions */
[data-theme="light"] .btn,[data-theme="light"] .pp-fab,[data-theme="light"] .pp-cyes,
[data-theme="light"] .pp-empty a.cta,[data-theme="light"] .save-fab,
[data-theme="light"] .adj-savebtn,[data-theme="light"] .sbtn,[data-theme="light"] .iadd,
[data-theme="light"] .m-create,[data-theme="light"] .ga-btn,[data-theme="light"] .set-addbtn,
[data-theme="light"] .fclear button:last-child,
/* selected day / month cells + on-state chips */
[data-theme="light"] .ppdp-d.sel,[data-theme="light"] .ppdp-m.sel,
[data-theme="light"] .dp-cell.sel,[data-theme="light"] .dp-my.sel,[data-theme="light"] .dp-sb.on,
[data-theme="light"] .wd-chip.on,[data-theme="light"] .gb-medium{color:#fff}
/* hover-activated gradient affordances */
[data-theme="light"] .cal-add:hover,[data-theme="light"] .g-addbk:hover,
[data-theme="light"] .g-ladd:hover,[data-theme="light"] .g-laddgo:hover,
[data-theme="light"] .g-laddrow:focus-within .g-laddgo{color:#fff}
/* the launcher chip keeps its dark-theme depth so white glyphs read cleanly */
[data-theme="light"] .tile:not(.soon):not(.adm-tile) .ic{
  background:var(--grad-button);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -10px rgba(92,63,134,.48)}
[data-theme="light"] .tile:not(.soon):not(.adm-tile):hover .ic{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 32px -10px rgba(92,63,134,.6)}
/* ghost buttons are NOT gradient-backed — keep their ink after the .btn rule */
[data-theme="light"] .btn.ghost{color:var(--text-primary)}
/* destructive actions sit on a red gradient in both themes */
[data-theme="light"] .m-del{color:#fff}
/* the printable invoice is a white-paper artefact: its dark bands never lighten */
[data-theme="light"] .inv-doc .band,[data-theme="light"] .inv-doc .band *,
[data-theme="light"] .inv-doc thead th,
[data-theme="light"] .inv-doc .totbox .grand,[data-theme="light"] .inv-doc .totbox .grand *{color:#fff}
/* muted stylesheet literals the token pass missed (they only read on a dark page) */
[data-theme="light"] .dlast.none{color:#4d5270}
[data-theme="light"] .acode{color:rgba(104,76,148,.95)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(45,31,94,.22)}
[data-theme="light"]{
  /* semantic colours re-tuned for light surfaces (AA on #e7e0f3 / white glass) */
  --success:#1c7d52;--danger:#b8294a;--warn:#8a5a09;--info:#2b5f9e;--accent-teal:#0f6c7d;
  --c-lavender:#6b4a8c;--c-pearl-lav:#54387c;--c-orchid:#8f3aa8;--c-nebula:#6c4b9d;
  --c-pearl-light:#2f2360;
}
[data-theme="light"]{--grad-heading:linear-gradient(118deg,#2f2360 0%,#5c3f86 45%,#7d57a3 100%)}
[data-theme="light"] .hello,[data-theme="light"] .ptitle h1{filter:none}

/* colours injected inline from JS palettes — re-ink for light surfaces */
/* inline text colours re-mapped for light surfaces.
   ANCHORED to an actual `color:` declaration — an unanchored [style*="#hex"]
   also matched backgrounds/borders/fills and repainted the text of coloured
   chips in their own background hue (dark-on-dark, violet-on-violet).      */
[data-theme="light"] [style^="color:#8fe6b0"],
[data-theme="light"] [style*=";color:#8fe6b0"],
[data-theme="light"] [style*="; color:#8fe6b0"],
[data-theme="light"] [style^="color:#8FE6B0"],
[data-theme="light"] [style*=";color:#8FE6B0"],
[data-theme="light"] [style*="; color:#8FE6B0"]{color:#1c7d52!important}
[data-theme="light"] [style^="color:#e6b85c"],
[data-theme="light"] [style*=";color:#e6b85c"],
[data-theme="light"] [style*="; color:#e6b85c"],
[data-theme="light"] [style^="color:#E6B85C"],
[data-theme="light"] [style*=";color:#E6B85C"],
[data-theme="light"] [style*="; color:#E6B85C"]{color:#8a5a09!important}
[data-theme="light"] [style^="color:#e6a95c"],
[data-theme="light"] [style*=";color:#e6a95c"],
[data-theme="light"] [style*="; color:#e6a95c"],
[data-theme="light"] [style^="color:#E6A95C"],
[data-theme="light"] [style*=";color:#E6A95C"],
[data-theme="light"] [style*="; color:#E6A95C"]{color:#8a5410!important}
[data-theme="light"] [style^="color:#cdb1d4"],
[data-theme="light"] [style*=";color:#cdb1d4"],
[data-theme="light"] [style*="; color:#cdb1d4"],
[data-theme="light"] [style^="color:#CDB1D4"],
[data-theme="light"] [style*=";color:#CDB1D4"],
[data-theme="light"] [style*="; color:#CDB1D4"]{color:#54387c!important}
[data-theme="light"] [style^="color:#5cc8d6"],
[data-theme="light"] [style*=";color:#5cc8d6"],
[data-theme="light"] [style*="; color:#5cc8d6"],
[data-theme="light"] [style^="color:#5CC8D6"],
[data-theme="light"] [style*=";color:#5CC8D6"],
[data-theme="light"] [style*="; color:#5CC8D6"]{color:#0f6c7d!important}
[data-theme="light"] [style^="color:#5ec7d8"],
[data-theme="light"] [style*=";color:#5ec7d8"],
[data-theme="light"] [style*="; color:#5ec7d8"],
[data-theme="light"] [style^="color:#5EC7D8"],
[data-theme="light"] [style*=";color:#5EC7D8"],
[data-theme="light"] [style*="; color:#5EC7D8"]{color:#0f6c7d!important}
[data-theme="light"] [style^="color:#9db8de"],
[data-theme="light"] [style*=";color:#9db8de"],
[data-theme="light"] [style*="; color:#9db8de"],
[data-theme="light"] [style^="color:#9DB8DE"],
[data-theme="light"] [style*=";color:#9DB8DE"],
[data-theme="light"] [style*="; color:#9DB8DE"]{color:#2b5f9e!important}
[data-theme="light"] [style^="color:#cf8bd6"],
[data-theme="light"] [style*=";color:#cf8bd6"],
[data-theme="light"] [style*="; color:#cf8bd6"],
[data-theme="light"] [style^="color:#CF8BD6"],
[data-theme="light"] [style*=";color:#CF8BD6"],
[data-theme="light"] [style*="; color:#CF8BD6"]{color:#8f3aa8!important}
[data-theme="light"] [style^="color:#6f9ad6"],
[data-theme="light"] [style*=";color:#6f9ad6"],
[data-theme="light"] [style*="; color:#6f9ad6"],
[data-theme="light"] [style^="color:#6F9AD6"],
[data-theme="light"] [style*=";color:#6F9AD6"],
[data-theme="light"] [style*="; color:#6F9AD6"]{color:#2b5f9e!important}
[data-theme="light"] [style^="color:#a27cb7"],
[data-theme="light"] [style*=";color:#a27cb7"],
[data-theme="light"] [style*="; color:#a27cb7"],
[data-theme="light"] [style^="color:#A27CB7"],
[data-theme="light"] [style*=";color:#A27CB7"],
[data-theme="light"] [style*="; color:#A27CB7"]{color:#6b4a8c!important}
[data-theme="light"] [style^="color:#8e6bae"],
[data-theme="light"] [style*=";color:#8e6bae"],
[data-theme="light"] [style*="; color:#8e6bae"],
[data-theme="light"] [style^="color:#8E6BAE"],
[data-theme="light"] [style*=";color:#8E6BAE"],
[data-theme="light"] [style*="; color:#8E6BAE"]{color:#6c4b9d!important}
[data-theme="light"] [style^="color:#e0667e"],
[data-theme="light"] [style*=";color:#e0667e"],
[data-theme="light"] [style*="; color:#e0667e"],
[data-theme="light"] [style^="color:#E0667E"],
[data-theme="light"] [style*=";color:#E0667E"],
[data-theme="light"] [style*="; color:#E0667E"]{color:#b8294a!important}
[data-theme="light"] [style^="color:#8b90ad"],
[data-theme="light"] [style*=";color:#8b90ad"],
[data-theme="light"] [style*="; color:#8b90ad"],
[data-theme="light"] [style^="color:#8B90AD"],
[data-theme="light"] [style*=";color:#8B90AD"],
[data-theme="light"] [style*="; color:#8B90AD"]{color:#4d5270!important}
[data-theme="light"] [style^="color:#6ad1b6"],
[data-theme="light"] [style*=";color:#6ad1b6"],
[data-theme="light"] [style*="; color:#6ad1b6"],
[data-theme="light"] [style^="color:#6AD1B6"],
[data-theme="light"] [style*=";color:#6AD1B6"],
[data-theme="light"] [style*="; color:#6AD1B6"]{color:#0d7a63!important}
[data-theme="light"] [style^="color:#b487e0"],
[data-theme="light"] [style*=";color:#b487e0"],
[data-theme="light"] [style*="; color:#b487e0"],
[data-theme="light"] [style^="color:#B487E0"],
[data-theme="light"] [style*=";color:#B487E0"],
[data-theme="light"] [style*="; color:#B487E0"]{color:#7a3fb8!important}
[data-theme="light"] [style^="color:#7c8cf0"],
[data-theme="light"] [style*=";color:#7c8cf0"],
[data-theme="light"] [style*="; color:#7c8cf0"],
[data-theme="light"] [style^="color:#7C8CF0"],
[data-theme="light"] [style*=";color:#7C8CF0"],
[data-theme="light"] [style*="; color:#7C8CF0"]{color:#414fc4!important}
[data-theme="light"] [style^="color:#d67ab0"],
[data-theme="light"] [style*=";color:#d67ab0"],
[data-theme="light"] [style*="; color:#d67ab0"],
[data-theme="light"] [style^="color:#D67AB0"],
[data-theme="light"] [style*=";color:#D67AB0"],
[data-theme="light"] [style*="; color:#D67AB0"]{color:#a32a72!important}
[data-theme="light"] [style^="color:#6c4b9d"],
[data-theme="light"] [style*=";color:#6c4b9d"],
[data-theme="light"] [style*="; color:#6c4b9d"],
[data-theme="light"] [style^="color:#6C4B9D"],
[data-theme="light"] [style*=";color:#6C4B9D"],
[data-theme="light"] [style*="; color:#6C4B9D"]{color:#553380!important}
/* fixed dark-violet chips (avatar overflow / link-share badges) keep white ink */
[data-theme="light"] [style*="background:#3a2a55"],
[data-theme="light"] [style*="background:#2e2a6e"],
[data-theme="light"] [style*="background:#5c3f86"]{color:#fff!important}
[data-theme="light"] [style*="linear-gradient(135deg"]{color:#fff!important}
[data-theme="light"] .demo-hint{color:#2b5f9e}
/* theme toggle — reproduced from the Brand Guidelines (.theme-toggle > .dot) */
.theme-toggle{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--rgb-fill),.06);border:1px solid var(--border-glass);cursor:pointer;flex-shrink:0;padding:0;
  transition:transform .25s var(--ease-spring),background .25s;margin-inline-start:6px;position:relative}
.theme-toggle:hover{transform:translateY(-1px);background:rgba(var(--rgb-fill),.12)}
.theme-toggle:focus-visible{outline:2px solid var(--c-lavender);outline-offset:2px}
.theme-toggle .dot{width:17px;height:17px;border-radius:50%;border:1.7px solid var(--c-pearl-lav);
  background:linear-gradient(90deg,var(--c-pearl-lav) 0 50%,transparent 50%);
  transition:transform .5s var(--ease-spring),border-color .3s}
[data-theme="light"] .theme-toggle .dot{transform:rotate(180deg)}
[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.6);border-color:rgba(45,31,94,.14)}
[data-theme="light"] .theme-toggle:hover{background:rgba(255,255,255,.85)}
.theme-toggle:before{content:'';position:absolute;inset-inline-end:-8px;top:20%;height:60%;width:1px;
  background:rgba(var(--rgb-fill),.14)}
.top .right .theme-toggle:before,.pp-theme-float:before{display:none}
.pp-theme-float{position:fixed;top:18px;inset-inline-start:18px;z-index:50}
.pp-theme-slot{position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center}
.view .hero{position:relative}
@media print{.theme-toggle{display:none!important}}
@media print{.orbmark{filter:none}}



/* ═══════════════════════════════════════════════════════════════
   ما يخصّ التطبيق وحده

   النموذج صفحاتٌ ساكنة: لا حوار يُفتح على خادم، ولا نموذج يُرسل،
   ولا محرّر قيود. وهذه أصنافٌ لا يعرفها، فلا تصادم — وقد فُحص ذلك
   آليًّا عند التجميع لا بالنظر.
   ═══════════════════════════════════════════════════════════════ */

.side-user { display: flex; align-items: center; gap: 9px; padding: 4px 4px 10px; }
.side-user > div { min-width: 0; }
.card {
  background: var(--glass-standard);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glass); border-radius: var(--r-xl);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(var(--rgb-fill), .06);
  padding: 18px; margin-bottom: 16px;
}
.card > h2 { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card .note { color: var(--text-muted); font-size: 12.5px; line-height: 1.8; margin-top: 10px; }
.card.attention { border-inline-start: 3px solid var(--bad); }
.card.attention ul { margin: 8px 0 0; padding-inline-start: 20px; line-height: 1.85; }
tr.clickable { cursor: pointer; }
.spread { display: flex; flex-wrap: wrap; gap: 4px; }
.inp {
  font-family: inherit; font-size: 13px; width: 100%;
  padding: 10px 13px; border-radius: var(--r-md);
  border: 1px solid var(--border-glass); background: rgba(var(--rgb-shade), .22);
  color: var(--text-primary); transition: var(--dur);
}
.inp::placeholder { color: rgba(var(--rgb-text), .34); }
.inp:focus { outline: none; border-color: var(--c-violet); background: rgba(var(--rgb-shade), .34); box-shadow: 0 0 0 3px rgba(125, 87, 163, .18); }
.inp[disabled] { opacity: .55; cursor: not-allowed; }
select.inp { cursor: pointer; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 0 6px; }
.pager .range { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.auth-box {
  position: relative; width: min(480px, 100%); padding: 34px;
  background: var(--glass-standard);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glass); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-deep), var(--glow-violet);
}
.auth-box::before {
  content: ''; position: absolute; top: 0; right: 12%; left: 12%; height: 1px;
  background: var(--specular); opacity: .9; pointer-events: none;
}
.auth-brand { display: grid; place-items: center; margin: -8px 0 12px; text-align: center; }
.auth-brand .mk2 { width: 88px; height: 88px; display: grid; place-items: center; filter: drop-shadow(0 12px 28px rgba(142,107,174,.32)); }
.auth-wordmark { margin-top: -7px; color: var(--text-primary); font-family: var(--font-arabic); font-size: 18px; font-weight: 600; }
.auth-wordmark small { margin-inline-start: 7px; color: var(--c-pearl-lav); font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.auth-box h1 { font-size: 22px; font-weight: 700; margin-bottom: 5px; text-align: center; }
.auth-box > .sub { margin-bottom: 18px; text-align: center; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--text-muted); }
.auth-switch button { background: none; border: none; color: var(--c-lavender); cursor: pointer; font: inherit; text-decoration: underline; }
.auth-box .note {
  font-size: 12px; color: var(--text-muted); line-height: 1.8;
  background: rgba(var(--rgb-fill), .04); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 14px;
}
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 6, 15, .72); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.dialog {
  background: rgba(23, 17, 50, .92);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-xl); width: min(780px, 100%);
  box-shadow: var(--shadow-deep);
}
.dialog-head { display: flex; align-items: center; gap: 10px; padding: 17px 22px; border-bottom: 1px solid var(--border-subtle); }
.dialog-head h2 { font-size: 15px; font-weight: 700; flex: 1; }
.dialog-body { padding: 22px; }
.dialog-foot { display: flex; gap: 8px; justify-content: flex-start; padding: 15px 22px; border-top: 1px solid var(--border-subtle); }
.lines { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.lines th { font-size: 10.5px; color: var(--text-label); text-align: start; padding: 5px 6px; font-weight: 600; }
.lines td { padding: 3px 6px; }
.lines .inp { padding: 8px 10px; font-size: 12.5px; }
.lines td.x { width: 34px; }
.totals-preview { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 4px 0; border-top: 1px solid var(--border-subtle); font-size: 13px; }
.totals-preview b { font-size: 17px; font-family: var(--font-mono); }
.recon { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 13px 15px; border-radius: var(--r-md); background: rgba(var(--rgb-fill), .04); border: 1px solid var(--border-subtle); }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 116px; gap: 12px; align-items: center; font-size: 12.5px; }
.bar { height: 9px; border-radius: var(--r-pill); background: rgba(var(--rgb-fill), .07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-lavender), var(--c-nebula)); }
.bar-row .n { text-align: end; font-variant-numeric: tabular-nums; }
.entry-head td { padding-top: 13px; font-weight: 600; }
.entry-line td { color: var(--text-muted); font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
.entry-line td:first-child { padding-inline-start: 26px; }
.raw-wrap { margin-top: 4px; }
.raw-wrap summary { cursor: pointer; color: var(--text-muted); font-size: 11px; }
.raw { margin-top: 6px; font-size: 11px; color: var(--text-muted); background: rgba(var(--rgb-shade), .26); border-radius: var(--r-sm); padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; }
.loading { color: var(--text-muted); padding: 48px; text-align: center; font-size: 12.5px; }
.mods { display: grid; gap: 12px; }
.card.mod { border-inline-start: 3px solid var(--border-glass); }
.card.mod.blocked { border-inline-start-color: var(--bad); }
.card.mod.disabled { border-inline-start-color: var(--warn); }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mod-head h3 { font-size: 14px; margin: 0 0 3px; }
.mod-head .spacer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 22px; margin-top: 14px; }
.mod-grid .k, .mod-foot .k { color: var(--text-label); font-size: 10.5px; margin-bottom: 3px; letter-spacing: .04em; }
.mod-ops { margin-top: 12px; }
.mod-ops summary { cursor: pointer; color: var(--text-muted); font-size: 12.5px; }
.mod-ops ul { margin: 10px 0; padding-inline-start: 20px; line-height: 2; font-size: 12.5px; }
.mod-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.order { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.order .step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); font-size: 12px; }
.order .step .n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(127, 182, 230, .16); color: var(--info); font-size: 10px; }
.chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.chain .link { display: inline-flex; align-items: center; gap: 8px; }
.chain .arrow { color: var(--text-muted); }
.chain .root { color: var(--warn); font-weight: 600; }
.zatca-msg { margin-bottom: 10px; }
.zatca-msg:last-child { margin-bottom: 0; }
.zatca-msg .code { margin-bottom: 3px; }
.zatca-msg .txt { direction: ltr; text-align: left; unicode-bidi: isolate; font-size: 12px; }
.deptc { display: inline-flex; align-items: center; gap: 7px; }
.card-head2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px 20px; margin-bottom: 20px;
}
.fact { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding-bottom: 7px; border-bottom: 1px solid var(--border-subtle); }
.fact .k { color: var(--text-muted); font-size: 11.5px; flex-shrink: 0; }
.org { margin-top: 12px; }
.org-row {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  padding: 7px 8px; border-radius: var(--r-sm);
}
.org-row:hover { background: rgba(var(--rgb-fill), .04); }
.org-row .ttl { color: var(--text-muted); font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════
   الهيكل — ما لم يكن في النموذج صنفًا قائمًا بذاته
   ═══════════════════════════════════════════════════════════════ */

/* رأس الشاشة: النموذج يسمّيه `.top` وشاشاتنا `.page-head`. تُعرَّف
   بالقيم نفسها لا بقاعدةٍ ثانية تتباعد عنها مع أول تعديل. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 2px 6px 12px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-family: var(--font-arabic); font-size: 23px; font-weight: 600; }
.page-head .sub { margin-top: 5px; font-family: var(--font-arabic); font-size: 12.5px; color: var(--text-muted); }
.page-head .sub b { color: var(--c-pearl-lav); font-weight: 600; }
.page-head .spacer { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* نقطة اللون في لوحة الشريط وفي شرائح الأقسام */
.leg .dot, .chip .dot, .deptc .dot, .org-row .dot {
  width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; display: inline-block;
}
.leg { cursor: default; }

/* بطاقة الحساب في أسفل الشريط — زرُّ خروجٍ بهيئة بطاقة.
   النموذج يعرضها بطاقةً تفتح قائمة؛ وهنا فعلٌ واحد لا قائمة، فتُبنى
   زرًّا: عنصرٌ يبدو قابلًا للنقر ولا يُنقَر أسوأ من عنصرٍ ساكن. */



/* ═══════════════════════════════════════════════════════════════
   مكوّناتٌ مشتركة رُفعت من نطاق شاشة واحدة

   النموذج صفحاتٌ مستقلّة، فعرّف «من» و«وسم» و«أيقونة كيان» داخل
   صفحة جهات الاتصال وحدها. وهي في التطبيق تُستعمل في الفواتير
   والموظفين والمشتريات — فتُرفع إلى العموم بقيمها كما هي، لا
   تُعاد كتابتها. والنسخة المنطَّقة تبقى: مطابقة، فلا تُغيّر شيئًا.
   ═══════════════════════════════════════════════════════════════ */

.acc-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(142,107,174,.18); color: var(--c-pearl-lav); flex-shrink: 0; }
.acc-ic svg { width: 17px; height: 17px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .av { width: 32px; height: 32px; font-size: 11px; }
.who .acc-ic { width: 34px; height: 34px; }
.who .nm { color: var(--text-primary); font-weight: 600; }
.who .sub2 { font-size: 10.5px; color: var(--text-muted); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-arabic); font-size: 10.5px; color: var(--text-body); background: rgba(var(--rgb-fill),.05); border: 1px solid var(--border-subtle); padding: 3px 9px; border-radius: var(--r-pill); }
.tag svg { width: 12px; height: 12px; opacity: .8; }


/* ── مكوّناتٌ يستعملها كل الشاشات، وكانت محبوسةً في نطاق واحدة ──
   البحثُ والقوائم وحالةُ الفراغ والحقول: النموذج عرّفها في صفحة
   وأخذها التطبيق إلى إحدى عشرة. تُرفع بقيمها كما هي. */
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; inset-inline-start: 11px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.search input {
  background: rgba(var(--rgb-fill), .06); border: 1px solid var(--border-glass);
  border-radius: var(--r-pill); color: var(--text-primary); font-family: var(--font-arabic);
  font-size: 12.5px; padding: 9px 14px; padding-inline-start: 34px; outline: none;
  width: 200px; transition: var(--dur);
}
.search input:focus { border-color: rgba(142,107,174,.6); box-shadow: 0 0 0 3px rgba(142,107,174,.18); }
.search input::placeholder { color: var(--text-label); }

.selin {
  background: rgba(var(--rgb-fill), .06); border: 1px solid var(--border-glass);
  border-radius: var(--r-pill); color: var(--text-primary); font-family: var(--font-arabic);
  font-size: 12.5px; padding: 9px 14px; outline: none; cursor: pointer;
}
.selin option { background: var(--c-space); color: var(--text-primary); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 44px 20px; color: var(--text-muted);
  font-family: var(--font-arabic); font-size: 13px; text-align: center;
}
.empty .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-lg); background: rgba(142,107,174,.14); }
.empty .ic svg, .empty > svg { width: 24px; height: 24px; color: var(--c-pearl-lav); opacity: .9; }
.empty h3 { margin: 0; font-size: 14px; color: var(--text-primary); font-weight: 600; }
.empty p { margin: 0; max-width: 46ch; line-height: 1.9; }
td.empty { padding: 0 !important; }

/* الحقل في الحوارات — الحوار يُركَّب على `body` خارج نطاق أي شاشة */
.field { display: block; margin-bottom: 13px; }
.field .lbl { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-arabic); }
.field .hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 5px; line-height: 1.7; }
.inp {
  width: 100%; box-sizing: border-box; background: rgba(var(--rgb-fill), .06);
  border: 1px solid var(--border-glass); border-radius: var(--r-md); color: var(--text-primary);
  font-family: var(--font-arabic); font-size: 13px; padding: 10px 12px; outline: none; transition: var(--dur);
}
.inp:focus { border-color: rgba(142,107,174,.6); box-shadow: 0 0 0 3px rgba(142,107,174,.18); }
.inp::placeholder { color: var(--text-label); }
select.inp option { background: var(--c-space); color: var(--text-primary); }

/* شريط المرشِّحات فوق الجداول */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.filters .f { display: flex; flex-direction: column; gap: 5px; }
.filters .f > span { font-size: 10.5px; color: var(--text-label); font-family: var(--font-arabic); }
.filters .f .inp, .filters .f .selin { width: auto; min-width: 150px; }
.filters .f.date .inp { min-width: 130px; }

/* ما يُمرَّر عليه الجدول أفقيًّا */
.scroll { overflow-x: auto; }

/* نغمة الملاحظة */
.note.ok  { color: var(--success); border-color: rgba(143,230,176,.3); }
.note.warn{ color: var(--warn);    border-color: rgba(230,184,92,.3); }
.note.bad { color: var(--danger);  border-color: rgba(224,102,126,.3); }

/* الرصيد الجاري في دفتر الأستاذ يُبرَز: هو العمود الذي يُتتبَّع */
.tbl td.run { font-weight: 700; color: var(--text-primary); }

/* صفّ الأفعال في آخر السطر — يظهر باهتًا ويشتدّ عند المرور */
.rowacts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.tbl tbody tr .rowacts { opacity: .55; transition: var(--dur); }
.tbl tbody tr:hover .rowacts { opacity: 1; }

/* الشريط العائم — بحثٌ سريع من أي شاشة، كما في النموذج */
.fab {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-button); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(142,107,174,.85), inset 0 1px 0 rgba(var(--rgb-fill),.25);
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 19px; height: 19px; }

/* التنبيهات في الجهة البعيدة عن الشريط الجانبيّ.
   النموذج يضعها في جهة البدء — وهي في RTL جهةُ الشريط نفسها. وهو
   في النموذج غير ضارّ: صفحاتٌ ساكنة لا تُصدر تنبيه خطأ. وفي التطبيق
   تنبيهُ الخطأ **لا يختفي وحده** (عمدًا: رسالةٌ تومض ثم تزول أسوأ
   من عدمها)، فيجلس فوق زرّ «خروج» ويمنع النقر عليه إلى الأبد.

   كُشف مرّتين: أُصلح، ثم عاد حين نُقل تنسيق النموذج فطُمس الإصلاح —
   لأن `.toasts` صنفٌ يعرفه النموذج، فأُسقطت قاعدتُنا عند التجميع.
   ولذلك يُعاد هنا صراحةً، بعد النموذج لا قبله. */
.toasts { inset-inline-start: auto; inset-inline-end: 22px; }

/* نغمات الشارة.
   النموذج يلوّن كل شارة بسمة `style` في الترميز، وسياسة المحتوى
   تمنع السمة (وهي ناقلٌ شائع للحقن). فالنغمات أصنافٌ معلومة بالقيم
   نفسها: اللون، وخلفيةٌ منه بشفافية ١٣٪، وحدٌّ بثلاثين. */
.chip.ok   { color: var(--success); background: rgba(143, 230, 176, .13); border: 1px solid rgba(143, 230, 176, .3); }
.chip.warn { color: var(--warn);    background: rgba(230, 184, 92, .13);  border: 1px solid rgba(230, 184, 92, .3); }
.chip.bad  { color: var(--danger);  background: rgba(224, 102, 126, .13); border: 1px solid rgba(224, 102, 126, .3); }
.chip.info { color: var(--info);    background: rgba(111, 154, 214, .13); border: 1px solid rgba(111, 154, 214, .3); }
/* الشارة بلا نغمة تبقى مقروءة: بلا حدٍّ تذوب في الخليّة */
.tbl .chip:not(.ok):not(.warn):not(.bad):not(.info):not(.on) {
  background: rgba(var(--rgb-fill), .07); border: 1px solid var(--border-subtle); color: var(--text-body);
}

/* ألوان شارة الحالة في شاشة الموظفين — النموذج يلوّنها بسمة `style`
   لكل صفّ، وسياسة المحتوى تمنع السمة. فالألوان أصنافٌ معلومة. */
.st-pill.ok   { color: var(--success); background: rgba(143, 230, 176, .14); }
.st-pill.warn { color: var(--warn);    background: rgba(230, 184, 92, .14); }
.st-pill.bad  { color: var(--danger);  background: rgba(224, 102, 126, .14); }
.st-pill.muted{ color: var(--text-muted); background: rgba(var(--rgb-fill), .08); }

.tnt { padding: 0 4px 10px; }
.tnt-n { font-size: 11.5px; color: var(--text-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnt-v { font-family: var(--font-mono); font-size: 10px; color: var(--text-label); direction: ltr; unicode-bidi: isolate; text-align: start; }

.acct {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border-radius: var(--r-lg); cursor: pointer;
  background: rgba(var(--rgb-fill), .05); border: 1px solid var(--border-glass);
  color: var(--text-body); font-family: var(--font-arabic); text-align: start;
  transition: var(--dur);
}
.acct:hover { background: rgba(var(--rgb-fill), .1); color: var(--text-primary); }
.acct .av { width: 28px; height: 28px; font-size: 10.5px; }
.acct-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acct .nm { font-size: 12px; font-weight: 600; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* الدور سطرٌ واحد لا يلتفّ: «مالك المنشأة» في عمودٍ ضيّق يصير سطرين
   ويدفع البطاقة فتبدو مكسورة. */
.acct .rl { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct svg { flex-shrink: 0; opacity: .7; width: 13px; height: 13px; }

/* «التطبيقات» — كل الشاشات في لوحة واحدة */
.launch-g { margin-bottom: 14px; }
.launch-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.launch-i {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: var(--r-lg); background: rgba(var(--rgb-fill), .05);
  border: 1px solid var(--border-glass); color: var(--text-body);
  font-family: var(--font-arabic); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: var(--dur);
}
.launch-i:hover { background: rgba(var(--rgb-fill), .1); color: var(--text-primary); transform: translateY(-2px); }
.launch-i .acc-ic { width: 32px; height: 32px; }


/* ═══════════════════════════════════════════════ مركز القيادة

   هذه البنية مأخوذة من command-center.html، لكن محتواها يأتي من
   المسارات الحيّة. الأسماء منفصلة عن مكوّنات الوحدات حتى لا تغيّر
   لوحة القيادة جدولًا أو نموذجًا في شاشة أخرى. */
.scr-command .cc-head h1 {
  font-size: clamp(25px, 2.4vw, 36px); font-weight: 300; letter-spacing: -.02em;
  background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scr-command .eyebrow {
  margin-bottom: 7px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .24em; color: var(--text-label); direction: ltr; text-align: right;
}

/* شارات الرأس — حال الدفاتر والضريبة والسنة قبل أي بطاقة، كما في النموذج */
.cc-acts { flex-wrap: wrap; justify-content: flex-end; }
.cc-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
  background: rgba(var(--rgb-fill), .05); color: var(--text-body);
  font-family: var(--font-arabic); font-size: 10.5px; white-space: nowrap;
}
.cc-pill svg { width: 12px; height: 12px; }
.cc-pill b { font-family: var(--font-mono); font-size: 10px; direction: ltr; }
.cc-pill.ok { border-color: rgba(143,230,176,.3); color: var(--success); }
.cc-pill.warn { border-color: rgba(230,184,92,.3); color: var(--warn); }
.cc-pill.bad { border-color: rgba(224,102,126,.3); color: var(--danger); }

/* بطاقة النموذج البطلة وسطر الفرق وخط المسار — command-center.html */
.scr-command .kpi.hero { border-color: rgba(142,107,174,.34); }
.scr-command .kpi.hero .kv { font-size: 23px; }
.scr-command .kpi .kd {
  display: flex; align-items: center; gap: 5px; margin-top: 5px;
  color: var(--text-muted); font-family: var(--font-arabic); font-size: 10px;
}
.scr-command .kpi .kd svg { width: 12px; height: 12px; }
.scr-command .kpi .kd b { font-family: var(--font-mono); font-size: 10.5px; direction: ltr; }
.scr-command .kpi .kd.up { color: var(--success); }
.scr-command .kpi .kd.down { color: var(--danger); }
.scr-command .kpi .kd.up span, .scr-command .kpi .kd.down span { color: var(--text-muted); }
.scr-command .kpi .ks { height: 26px; margin-top: 8px; }
.scr-command .kpi .ks svg { display: block; width: 100%; height: 26px; direction: ltr; }

/* شريط الإجراءات العريض أسفل الشبكة — أربع بطاقات جنبًا إلى جنب */
.cc-quicks.wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cc-lenses {
  display: flex; align-items: center; gap: 5px; width: max-content; max-width: 100%;
  margin: 0 6px 14px; padding: 5px; overflow-x: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
  background: rgba(var(--rgb-fill), .05);
}
.cc-lens {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--text-muted); font-family: var(--font-arabic); font-size: 11.5px;
  font-weight: 600; white-space: nowrap; cursor: pointer; transition: var(--dur);
}
.cc-lens:hover { color: var(--text-primary); background: rgba(var(--rgb-fill), .05); }
.cc-lens.on { color: #fff; background: var(--grad-button); box-shadow: 0 8px 22px -12px rgba(142,107,174,.9); }
.cc-lens svg { width: 14px; height: 14px; }
.cc-two { grid-template-columns: 1.15fr 1fr; }
.cc-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cc-grid > *, .cc-two > * { min-width: 0; }
.cc-panel { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; }
.cc-bars { display: flex; flex-direction: column; gap: 13px; padding: 18px; }
.cc-bar-row { display: grid; grid-template-columns: minmax(92px, 130px) 1fr minmax(70px, 105px); gap: 10px; align-items: center; }
.cc-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-body); font-family: var(--font-arabic); font-size: 10.5px; }
.cc-bar-label i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 3px; }
.cc-bar-track { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: rgba(var(--rgb-fill), .06); }
.cc-bar-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; transition: width .48s var(--ease-spring); }
.cc-bar-value { color: var(--text-body); font-family: var(--font-mono); font-size: 9.5px; text-align: end; direction: ltr; white-space: nowrap; }
.cc-list { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 11px; }
.cc-row { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: var(--r-md); color: var(--text-body); font-family: var(--font-arabic); font-size: 11px; text-decoration: none; transition: var(--dur); }
.cc-row:hover { color: var(--text-primary); background: rgba(var(--rgb-fill), .05); transform: translateX(-2px); }
.cc-row-ic { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; color: var(--info); background: rgba(111,154,214,.12); }
.cc-row-ic.warn { color: var(--warn); background: rgba(230,184,92,.12); }
.cc-row-ic.bad { color: var(--danger); background: rgba(224,102,126,.12); }
.cc-row-title { min-width: 0; flex: 1; }
.cc-row-amount { direction: ltr; color: var(--text-muted); font-family: var(--font-mono); font-size: 9.5px; white-space: nowrap; }
.cc-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 110px; padding: 22px; color: var(--success); font-family: var(--font-arabic); font-size: 11.5px; text-align: center; }
.cc-empty.muted { color: var(--text-muted); }
.cc-quicks { display: grid; gap: 7px; padding: 11px; }
.cc-quick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-body); text-align: start; font-family: var(--font-arabic); cursor: pointer; transition: var(--dur); }
.cc-quick:hover { color: var(--text-primary); border-color: var(--border-subtle); background: rgba(var(--rgb-fill), .05); transform: translateY(-1px); }
.cc-quick > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.cc-quick b { font-size: 11.5px; font-weight: 600; }
.cc-quick small { margin-top: 2px; color: var(--text-muted); font-size: 9.5px; }
.cc-team { min-height: 100px; }

@media (max-width: 1180px) { .cc-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════ الشاشات الضيّقة */

@media (max-width: 900px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .side { margin: 10px 10px 0; padding: 14px; }
  .snav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .snav a { white-space: nowrap; padding: 8px 12px; }
  .grp, .legend, .side-foot { display: none; }
  .main { padding: 10px; overflow: visible; }
  .view { overflow: visible; padding: 4px 0 24px; }
  .row-3 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 96px; font-size: 11.5px; }
  .acts { flex-wrap: wrap; }
  .search input { width: 150px; }
  .cc-two { grid-template-columns: 1fr; }
  .cc-bar-row { grid-template-columns: 90px 1fr 82px; }
}

/* ═══════════════════════════════════════════════ المهام · TASKS */
.scr-tasks {
  --task-glass: linear-gradient(145deg, rgba(58,43,82,.72), rgba(20,16,34,.82));
  --task-border: rgba(198,174,225,.16);
  position: relative; height: 100%; min-height: 0; color: var(--text-primary);
  font-family: var(--font-arabic);
}
.task-shell { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px; height: 100%; min-height: 0; }
.task-rail, .task-main {
  min-height: 0; border: 1px solid var(--task-border); border-radius: 23px;
  background: var(--task-glass); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 70px -42px rgba(5,2,14,.92);
  backdrop-filter: blur(22px) saturate(120%);
}
.task-rail { display: flex; flex-direction: column; padding: 12px; overflow: hidden; }
.task-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 4px 12px; border-bottom: 1px solid rgba(var(--rgb-fill),.07); }
.task-rail-head > span, .task-new-column span { display: flex; flex-direction: column; min-width: 0; }
.task-rail-head b, .task-new-column b { font-size: 12px; font-weight: 650; }
.task-rail-head small, .task-new-column small { color: var(--text-muted); font: 8px var(--font-mono); letter-spacing: .08em; }
.task-board-list { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 4px; padding: 10px 0; overflow-y: auto; }
.task-board-link {
  display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 8px; align-items: center;
  width: 100%; padding: 9px; border: 1px solid transparent; border-radius: 13px;
  background: transparent; color: var(--text-muted); text-align: start; cursor: pointer; transition: 180ms var(--ease-spring);
}
.task-board-link:hover { color: var(--text-primary); background: rgba(var(--rgb-fill),.05); transform: translateX(-2px); }
.task-board-link.on { color: #fff; border-color: rgba(188,153,224,.24); background: linear-gradient(135deg,rgba(142,107,174,.27),rgba(80,55,121,.18)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.task-board-link > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.task-board-link b { overflow: hidden; font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-board-link small { margin-top: 2px; color: var(--text-muted); font-size: 8px; }
.task-board-link > span:last-child { min-width: 21px; padding: 2px 6px; border-radius: 99px; background: rgba(var(--rgb-fill),.07); font: 8px var(--font-mono); text-align: center; }
.task-color-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 7px; border-radius: 3px; box-shadow: 0 0 9px currentColor; }
.task-rail-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding-top: 10px; border-top: 1px solid rgba(var(--rgb-fill),.07); }
.task-rail-summary span { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 11px; background: rgba(var(--rgb-fill),.035); }
.task-rail-summary b { font: 600 13px var(--font-mono); }
.task-rail-summary small { margin-top: 2px; color: var(--text-muted); font-size: 7.5px; white-space: nowrap; }

.task-main { display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.task-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px 12px; border-bottom: 1px solid rgba(var(--rgb-fill),.07); }
.task-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.task-title-mark { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 39px; border: 1px solid rgba(196,159,232,.2); border-radius: 13px; color: #eadcff; background: linear-gradient(145deg,#976fc0,#553687); box-shadow: 0 11px 24px -13px rgba(142,107,174,.9); }
.task-title > span:nth-child(2) { min-width: 0; }
.task-title h1 { margin: 0; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-title p { margin: 2px 0 0; overflow: hidden; color: var(--text-muted); font: 8px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.task-total { padding: 4px 8px; border: 1px solid var(--task-border); border-radius: 99px; color: var(--text-muted); background: rgba(var(--rgb-fill),.04); font-size: 8px; white-space: nowrap; }
.task-head-actions { display: flex; align-items: center; gap: 8px; }
.task-view-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--task-border); border-radius: 13px; background: rgba(var(--rgb-fill),.035); }
.task-view-switch button { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font: 9px var(--font-arabic); cursor: pointer; transition: 160ms; }
.task-view-switch button:hover { color: var(--text-primary); }
.task-view-switch button.on { color: #fff; background: linear-gradient(145deg,rgba(151,111,192,.72),rgba(85,54,135,.82)); box-shadow: 0 7px 16px -11px #b38dde; }

.task-toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(var(--rgb-fill),.06); }
.task-search { display: flex; min-width: 185px; flex: 1; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--task-border); border-radius: 12px; color: var(--text-muted); background: rgba(8,5,15,.22); }
.task-search-input { width: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 9.5px var(--font-arabic); }
.task-search-input::placeholder { color: var(--text-muted); }
.task-priority-filters, .task-assignee-filters { display: flex; align-items: center; gap: 4px; }
.task-filter { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--text-muted); font: 8.5px var(--font-arabic); cursor: pointer; }
.task-filter:hover, .task-filter.on { color: #fff; border-color: var(--task-border); background: rgba(var(--rgb-fill),.07); }
.task-avatar { width: 27px; height: 27px; display: inline-grid; place-items: center; flex: 0 0 27px; border: 1px solid rgba(223,208,239,.2); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#9168b8,#4c327c); font: 700 8px var(--font-arabic); box-shadow: 0 5px 13px -9px #a684ca; }
.task-avatar.sm { width: 22px; height: 22px; flex-basis: 22px; margin-inline-start: -5px; font-size: 7px; }
button.task-avatar { cursor: pointer; }
.task-avatar.filter { background: rgba(var(--rgb-fill),.06); color: var(--text-muted); box-shadow: none; }
.task-avatar.filter:hover, .task-avatar.filter.on { color: #fff; border-color: #a97bd0; background: linear-gradient(145deg,#9168b8,#4c327c); }

.task-view-body { min-height: 0; flex: 1; overflow: auto; }
.task-board-scroll { display: flex; min-width: min-content; height: 100%; align-items: flex-start; gap: 10px; padding: 12px; direction: rtl; }
.task-column { width: 268px; max-height: 100%; display: flex; flex: 0 0 268px; flex-direction: column; overflow: hidden; border: 1px solid rgba(201,180,224,.13); border-radius: 18px; background: linear-gradient(145deg,rgba(48,37,66,.5),rgba(18,14,28,.66)); transition: 170ms var(--ease-spring); }
.task-column.drop { border-color: rgba(178,132,221,.65); background: linear-gradient(145deg,rgba(92,64,128,.46),rgba(30,20,48,.76)); transform: translateY(-2px); }
.task-column-head { display: flex; align-items: center; gap: 7px; padding: 11px 11px 9px; }
.task-column-mark { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--rgb-fill),.05); }
.task-column-head > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.task-column-head b { font-size: 10.5px; font-weight: 650; }
.task-column-head small { color: var(--text-muted); font: 7.5px var(--font-mono); }
.task-column-count { min-width: 22px; padding: 3px 6px; border-radius: 99px; color: var(--text-muted); background: rgba(var(--rgb-fill),.06); font: 8px var(--font-mono); text-align: center; }
.task-column-cards { min-height: 70px; display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; overflow-y: auto; }
.task-card { --task-priority: #8e6bae; position: relative; padding: 11px 12px 10px; overflow: hidden; border: 1px solid rgba(208,188,229,.16); border-radius: 15px; outline: none; background: linear-gradient(145deg,rgba(59,44,79,.83),rgba(28,22,40,.94)); box-shadow: inset 0 1px rgba(255,255,255,.04),0 12px 24px -20px #05020b; cursor: pointer; transition: 170ms var(--ease-spring); }
.task-card:hover, .task-card:focus-visible { border-color: rgba(184,140,220,.42); transform: translateY(-2px); box-shadow: inset 0 1px rgba(255,255,255,.06),0 16px 28px -20px rgba(142,107,174,.8); }
.task-card.dragging { opacity: .46; transform: rotate(-1deg) scale(.98); }
.task-priority-edge { position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--task-priority); box-shadow: 0 0 14px var(--task-priority); }
.task-card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.task-label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 99px; color: var(--text-body); background: rgba(var(--rgb-fill),.05); font-size: 7.5px; }
.task-label .task-color-dot { width: 5px; height: 5px; flex-basis: 5px; }
.task-card h3 { margin: 0; font-size: 11px; font-weight: 650; line-height: 1.55; }
.task-card p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--text-muted); font-size: 8.5px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.task-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-muted); font: 7.5px var(--font-mono); direction: ltr; }
.task-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.task-card-meta .task-card-avatars { margin-inline-start: auto; padding-inline-start: 4px; }
.task-due.overdue { color: var(--danger); }
.task-priority-mini { color: var(--task-priority); }
.task-add-card { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 1px 8px 8px; padding: 8px; border: 1px dashed rgba(198,174,225,.16); border-radius: 11px; background: transparent; color: var(--text-muted); font: 9px var(--font-arabic); cursor: pointer; transition: 150ms; }
.task-add-card:hover { color: #fff; border-color: rgba(184,140,220,.4); background: rgba(var(--rgb-fill),.04); }
.task-column-empty { min-height: 67px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed rgba(var(--rgb-fill),.08); border-radius: 13px; color: var(--text-muted); font-size: 8px; }
.task-new-column { width: 210px; min-height: 62px; display: flex; flex: 0 0 210px; align-items: center; justify-content: center; gap: 9px; padding: 10px; border: 1px dashed rgba(198,174,225,.2); border-radius: 17px; background: rgba(var(--rgb-fill),.025); color: var(--text-muted); cursor: pointer; }
.task-new-column:hover { color: #fff; border-color: rgba(184,140,220,.45); background: rgba(86,57,122,.14); }

.task-list { min-width: 760px; padding: 12px; }
.task-list-head, .task-list-row { display: grid; grid-template-columns: minmax(260px,1.7fr) 1fr .8fr .65fr .7fr; gap: 10px; align-items: center; }
.task-list-head { padding: 0 13px 7px; color: var(--text-muted); font-size: 8px; }
.task-list-row { position: relative; width: 100%; margin-bottom: 5px; padding: 10px 13px; border: 1px solid rgba(198,174,225,.11); border-radius: 13px; background: rgba(var(--rgb-fill),.025); color: var(--text-body); text-align: start; cursor: pointer; }
.task-list-row:hover { border-color: rgba(184,140,220,.3); background: rgba(var(--rgb-fill),.05); transform: translateY(-1px); }
.task-list-priority { position: absolute; inset-block: 13px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; }
.task-list-title { min-width: 0; display: flex; flex-direction: column; }
.task-list-title b { overflow: hidden; color: var(--text-primary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.task-list-title small { overflow: hidden; margin-top: 2px; color: var(--text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.task-list-bucket { display: flex; align-items: center; gap: 6px; font-size: 8.5px; }
.task-list-person { display: flex; align-items: center; color: var(--text-muted); font-size: 8px; }
.task-list-date, .task-list-state { color: var(--text-muted); font: 8px var(--font-mono); }

.task-calendar { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; padding: 12px; }
.task-calendar-month, .task-analysis-panel { min-width: 0; overflow: hidden; border: 1px solid var(--task-border); border-radius: 17px; background: rgba(var(--rgb-fill),.025); }
.task-calendar-month > header { display: flex; align-items: center; gap: 7px; padding: 11px 13px; border-bottom: 1px solid rgba(var(--rgb-fill),.06); color: #d4b8ee; }
.task-calendar-month h3 { flex: 1; margin: 0; color: var(--text-primary); font-size: 11px; }
.task-calendar-month header span { min-width: 22px; padding: 3px 6px; border-radius: 99px; background: rgba(var(--rgb-fill),.06); font: 8px var(--font-mono); text-align: center; }
.task-calendar-days { display: flex; flex-direction: column; gap: 4px; padding: 7px; }
.task-calendar-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-body); text-align: start; cursor: pointer; }
.task-calendar-item:hover { border-color: var(--task-border); background: rgba(var(--rgb-fill),.04); }
.task-calendar-day { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #eadcff; background: rgba(142,107,174,.18); font: 600 11px var(--font-mono); }
.task-calendar-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.task-calendar-item b { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.task-calendar-item small { margin-top: 2px; color: var(--text-muted); font-size: 7.5px; }

/* Prototype monthly task calendar */
.task-month-calendar {
  min-width: 760px;
  margin: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--task-border);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(var(--rgb-fill),.04),rgba(var(--rgb-fill),.015));
  box-shadow: 0 24px 54px -28px rgba(var(--rgb-shade),.78),inset 0 1px rgba(var(--rgb-fill),.07);
  backdrop-filter: blur(24px) saturate(175%);
  animation: task-month-enter 260ms var(--ease-spring);
}
@keyframes task-month-enter {
  from { opacity: .3; transform: translateY(7px); }
}
.task-month-head {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}
.task-month-nav {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--task-border);
  border-radius: 50%;
  background: rgba(var(--rgb-fill),.05);
  color: var(--text-body);
  box-shadow: inset 0 1px rgba(var(--rgb-fill),.06);
  cursor: pointer;
  transition: 180ms var(--ease-spring);
}
.task-month-nav:hover {
  border-color: rgba(196,154,237,.36);
  background: rgba(var(--rgb-fill),.1);
  color: #fff;
  transform: scale(1.06);
}
.task-month-title {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.task-month-title:hover { background: rgba(var(--rgb-fill),.04); }
.task-month-title b { font: 650 16px var(--font-arabic); }
.task-month-title small { color: var(--text-muted); font: 8px var(--font-arabic); }
.task-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  margin-bottom: 6px;
}
.task-month-weekdays > div {
  padding: 5px 4px;
  color: var(--text-label);
  font: 600 10.5px var(--font-arabic);
  text-align: center;
}
.task-month-weeks {
  overflow: hidden;
  border-top: 1px solid var(--task-subtle);
  border-inline-start: 1px solid var(--task-subtle);
  border-radius: 14px;
  background: rgba(var(--rgb-shade),.06);
}
.task-month-week { position: relative; min-height: 74px; }
.task-month-row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
}
.task-month-cell {
  position: relative;
  min-width: 0;
  padding: 5px 7px;
  border-inline-end: 1px solid var(--task-subtle);
  border-bottom: 1px solid var(--task-subtle);
  background: rgba(var(--rgb-fill),.018);
  transition: background 160ms;
}
.task-month-cell:hover { background: rgba(var(--rgb-fill),.043); }
.task-month-cell.outside { background: rgba(var(--rgb-fill),.004); }
.task-month-cell.outside .task-month-date { opacity: .36; }
.task-month-cell.weekend { background: rgba(var(--rgb-fill),.035); }
.task-month-cell.today {
  z-index: 1;
  background: rgba(142,107,174,.14);
  box-shadow: inset 0 0 0 1px rgba(169,120,210,.55);
}
.task-month-date {
  color: var(--text-muted);
  font: 500 11.5px var(--font-mono);
}
.task-month-cell.today .task-month-date { color: #fff; font-weight: 750; }
.task-month-cell > small {
  margin-inline-start: 5px;
  color: #cda7ed;
  font-size: 7px;
}
.task-month-add {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  z-index: 4;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--task-border);
  border-radius: 6px;
  background: rgba(var(--rgb-fill),.08);
  color: var(--text-muted);
  opacity: 0;
  cursor: pointer;
  transform: scale(.78);
  transition: 170ms var(--ease-spring);
}
.task-month-cell:hover .task-month-add,
.task-month-add:focus-visible {
  opacity: 1;
  transform: scale(1);
}
.task-month-add:hover {
  border-color: transparent;
  background: linear-gradient(135deg,#8e6bae,#5c3f86);
  color: #fff;
  transform: scale(1.1);
}
.task-month-bars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.task-month-bar {
  --calendar-color: #8e6bae;
  position: absolute;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 7px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  outline: none;
  background-color: var(--calendar-color);
  background-image: linear-gradient(180deg,rgba(var(--rgb-fill),.18),rgba(var(--rgb-shade),.16));
  color: #fff;
  box-shadow: inset 0 1px rgba(var(--rgb-fill),.26),0 3px 7px -2px rgba(var(--rgb-shade),.58);
  font: 650 10.5px var(--font-arabic);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 160ms,transform 180ms var(--ease-spring),box-shadow 160ms;
}
.task-month-bar:hover,
.task-month-bar:focus-visible {
  z-index: 5;
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(var(--rgb-fill),.3),0 6px 12px -4px rgba(var(--rgb-shade),.75);
}
.task-month-bar.late { box-shadow: inset 0 0 0 1.5px var(--danger),0 3px 7px -2px rgba(var(--rgb-shade),.58); }
.task-month-bar.clipped-start { border-start-start-radius: 1px; border-end-start-radius: 1px; }
.task-month-bar.clipped-end { border-start-end-radius: 1px; border-end-end-radius: 1px; }
.task-month-progress {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(var(--rgb-fill),.48);
}
.task-month-bar > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.task-month-avatar {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  border: 1px solid rgba(var(--rgb-fill),.46);
  border-radius: 50%;
  background: rgba(32,21,54,.55);
  color: #fff;
  font: 600 6px var(--font-arabic);
}

@media (max-width: 900px) {
  .task-month-calendar { min-width: 700px; margin: 8px; padding: 10px; }
  .task-month-weekdays > div { font-size: 9px; }
}

.task-analytics { padding: 12px; }
.task-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.task-metric { display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid var(--task-border); border-radius: 16px; background: rgba(var(--rgb-fill),.03); }
.task-metric-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #d9c0f1; background: rgba(142,107,174,.16); }
.task-metric > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.task-metric b { font-size: 9.5px; }.task-metric small { color: var(--text-muted); font: 7px var(--font-mono); }
.task-metric strong { font: 650 18px var(--font-mono); }.task-metric.good strong { color: var(--success); }.task-metric.bad strong { color: var(--danger); }
.task-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.task-analysis-panel { padding: 14px; }
.task-analysis-panel h3 { display: flex; flex-direction: column; margin: 0 0 14px; }
.task-analysis-panel h3 b { font-size: 11px; }.task-analysis-panel h3 small { color: var(--text-muted); font: 7.5px var(--font-mono); }
.task-analytics-bars { display: flex; flex-direction: column; gap: 11px; }
.task-analytics-row { display: grid; grid-template-columns: minmax(70px,110px) 1fr 24px; gap: 9px; align-items: center; color: var(--text-body); font-size: 8.5px; }
.task-analytics-row > div { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(var(--rgb-fill),.06); direction: ltr; }
.task-analytics-row i { display: block; height: 100%; min-width: 2px; border-radius: inherit; }
.task-analytics-row b { font: 8px var(--font-mono); text-align: end; }

/* Prototype analytics dashboard */
.task-charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  animation: task-charts-enter 260ms var(--ease-spring);
}
@keyframes task-charts-enter {
  from { opacity: .3; transform: translateY(7px); }
}
.task-chart-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.task-chart-kpi {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid var(--task-border);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(var(--rgb-fill),.045),rgba(var(--rgb-fill),.018));
  box-shadow: 0 18px 38px -28px rgba(var(--rgb-shade),.85),inset 0 1px rgba(var(--rgb-fill),.07);
  backdrop-filter: blur(22px) saturate(170%);
}
.task-chart-kpi::after {
  content: '';
  position: absolute;
  inset-inline-start: 18px;
  bottom: 0;
  width: 38px;
  height: 2px;
  border-radius: 3px 3px 0 0;
  background: rgba(var(--rgb-fill),.18);
}
.task-chart-kpi.good::after { background: var(--success); }
.task-chart-kpi.active::after { background: var(--warn); }
.task-chart-kpi.bad::after { background: var(--danger); }
.task-chart-kpi > strong {
  display: block;
  color: var(--text-primary);
  font: 300 30px/1 var(--font-mono);
}
.task-chart-kpi.good > strong { color: var(--success); }
.task-chart-kpi.active > strong { color: var(--warn); }
.task-chart-kpi.bad > strong { color: var(--danger); }
.task-chart-kpi > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.task-chart-kpi b { color: var(--text-body); font: 600 12px var(--font-arabic); }
.task-chart-kpi small { color: var(--text-muted); font: 8px var(--font-mono); }
.task-chart-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.task-chart-card {
  min-width: 0;
  min-height: 210px;
  padding: 20px 22px;
  border: 1px solid var(--task-border);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(var(--rgb-fill),.04),rgba(var(--rgb-fill),.014));
  box-shadow: 0 20px 44px -30px rgba(var(--rgb-shade),.82),inset 0 1px rgba(var(--rgb-fill),.065);
  backdrop-filter: blur(22px) saturate(170%);
}
.task-chart-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px;
}
.task-chart-title b { color: var(--text-primary); font: 650 14px var(--font-arabic); }
.task-chart-title small { color: var(--text-muted); font: 8px var(--font-mono); text-align: end; }
.task-chart-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 142px;
}
.task-chart-donut {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  flex: 0 0 132px;
  border-radius: 50%;
  box-shadow: 0 12px 28px -15px rgba(var(--rgb-shade),.9),inset 0 0 0 1px rgba(var(--rgb-fill),.05);
  animation: task-donut-in 600ms var(--ease-spring);
}
@keyframes task-donut-in {
  from { opacity: .3; transform: rotate(-36deg) scale(.82); }
}
.task-chart-donut-center {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--rgb-fill),.055);
  border-radius: 50%;
  background: #140f2a;
  box-shadow: inset 0 8px 22px rgba(var(--rgb-shade),.22);
}
.task-chart-donut-center strong { color: var(--text-primary); font: 650 23px var(--font-mono); }
.task-chart-donut-center small { margin-top: 2px; color: var(--text-muted); font: 8px var(--font-arabic); }
.task-chart-legend {
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-chart-legend > span {
  display: grid;
  grid-template-columns: 11px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--text-body);
}
.task-chart-legend i { width: 11px; height: 11px; border-radius: 3px; }
.task-chart-legend i.good { background: var(--success); }
.task-chart-legend i.active { background: var(--warn); }
.task-chart-legend i.pending { background: rgba(var(--rgb-fill),.2); }
.task-chart-legend b { font: 500 11px var(--font-arabic); }
.task-chart-legend small { color: var(--text-muted); font: 10px var(--font-mono); }
.task-chart-bars { display: flex; flex-direction: column; gap: 13px; }
.task-chart-row {
  display: grid;
  grid-template-columns: minmax(95px,130px) minmax(70px,1fr) 24px;
  align-items: center;
  gap: 11px;
}
.task-chart-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-body);
  font: 11px var(--font-arabic);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chart-label > span { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; }
.task-chart-color { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 3px; }
.task-chart-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--rgb-fill),.07);
  box-shadow: inset 0 1px 2px rgba(var(--rgb-shade),.18);
}
.task-chart-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  transform-origin: right center;
  animation: task-chart-grow 560ms var(--ease-spring) both;
}
@keyframes task-chart-grow {
  from { transform: scaleX(0); }
}
.task-chart-value { color: var(--text-muted); font: 11px var(--font-mono); text-align: end; }
.task-chart-person { min-width: 0; display: flex; align-items: center; gap: 7px; }
.task-chart-person > span { overflow: hidden; text-overflow: ellipsis; }
.task-chart-avatar {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  border: 1px solid rgba(var(--rgb-fill),.28);
  border-radius: 50%;
  background: linear-gradient(135deg,var(--member-color),#2e2a6e);
  color: #fff;
  font: 650 7px var(--font-arabic);
  box-shadow: 0 3px 8px -3px rgba(var(--rgb-shade),.7);
}
.task-chart-empty {
  min-height: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-muted);
  font: 11px var(--font-arabic);
  text-align: center;
}

@media (max-width: 980px) {
  .task-chart-grid { grid-template-columns: 1fr; }
  .task-chart-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .task-charts { padding: 8px; }
  .task-chart-kpis { gap: 8px; }
  .task-chart-kpi { padding: 14px; }
  .task-chart-card { padding: 16px; }
  .task-chart-donut-wrap { align-items: flex-start; flex-direction: column; }
  .task-chart-row { grid-template-columns: minmax(88px,110px) minmax(60px,1fr) 20px; gap: 7px; }
}

.task-icon-button { width: 30px; height: 30px; display: inline-grid; place-items: center; flex: 0 0 30px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; transition: 150ms; }
.task-icon-button:hover { color: #fff; border-color: var(--task-border); background: rgba(var(--rgb-fill),.06); }
.task-icon-button.danger:hover { color: var(--danger); border-color: rgba(224,102,126,.25); background: rgba(224,102,126,.08); }
.task-drawer-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: flex-start; background: rgba(5,3,10,.58); backdrop-filter: blur(5px); animation: task-fade 160ms ease-out; }
.task-drawer { width: min(520px,94vw); height: 100%; display: flex; flex-direction: column; border-inline-end: 1px solid rgba(214,190,239,.22); background: linear-gradient(145deg,rgba(46,34,66,.97),rgba(14,11,24,.99)); box-shadow: 26px 0 70px rgba(0,0,0,.45); animation: task-drawer-in 280ms var(--ease-spring); }
@keyframes task-fade { from { opacity: 0; } } @keyframes task-drawer-in { from { transform: translateX(-36px); opacity: .45; } }
.task-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--task-border); background: linear-gradient(90deg,rgba(142,107,174,.13),transparent); }
.task-drawer-brand { display: flex; align-items: center; gap: 9px; }
.task-drawer-brand > span { display: flex; flex-direction: column; }.task-drawer-brand b { font-size: 11px; }.task-drawer-brand small { color: var(--text-muted); font: 7px var(--font-mono); }
.task-drawer-actions { display: flex; gap: 3px; }
.task-drawer-body { min-height: 0; padding: 16px 17px 28px; overflow-y: auto; }
.task-drawer-title { width: 100%; padding: 5px 0 13px; border: 0; border-bottom: 1px solid rgba(var(--rgb-fill),.08); outline: none; background: transparent; color: #fff; font: 700 18px/1.5 var(--font-arabic); }
.task-detail-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 14px 0; }
.task-detail-meta label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 8px; }
.task-detail-meta label:nth-child(3) { grid-column: 1/-1; }
.task-detail-control, .task-input, .task-detail-textarea, .task-inline-input, .task-comment-input { width: 100%; border: 1px solid var(--task-border); border-radius: 11px; outline: none; background: rgba(8,5,15,.3); color: var(--text-primary); font: 9.5px var(--font-arabic); }
.task-detail-control { padding: 8px; }.task-input { padding: 9px 10px; }.task-detail-textarea,.task-comment-input { padding: 10px; resize: vertical; line-height: 1.7; }.task-inline-input { padding: 8px 10px; }
.task-detail-control:focus, .task-input:focus, .task-detail-textarea:focus, .task-inline-input:focus, .task-comment-input:focus { border-color: rgba(181,135,222,.55); box-shadow: 0 0 0 3px rgba(142,107,174,.08); }
.task-detail-section { padding: 14px 0; border-top: 1px solid rgba(var(--rgb-fill),.07); }
.task-detail-section h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #d8c1ed; }
.task-detail-section h3 > span { display: flex; flex-direction: column; }.task-detail-section h3 b { color: var(--text-primary); font-size: 10.5px; }.task-detail-section h3 small { color: var(--text-muted); font: 7px var(--font-mono); }
.task-detail-section > .btn { margin-top: 7px; }
.task-detail-choices, .task-person-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.task-detail-choice, .task-person-choice { display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px; border: 1px solid var(--task-border); border-radius: 99px; background: rgba(var(--rgb-fill),.025); color: var(--text-muted); font: 8.5px var(--font-arabic); cursor: pointer; }
.task-detail-choice:hover, .task-detail-choice.on, .task-person-choice:hover, .task-person-choice.on { color: #fff; border-color: rgba(181,135,222,.45); background: rgba(142,107,174,.14); }
.task-detail-choice.add { border-style: dashed; }.task-detail-choice .task-color-dot { width: 6px; height: 6px; flex-basis: 6px; }
.task-checklist { display: flex; flex-direction: column; gap: 3px; }
.task-check-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 27px; gap: 7px; align-items: center; padding: 5px; border-radius: 9px; color: var(--text-body); font-size: 9px; }
.task-check-row:hover { background: rgba(var(--rgb-fill),.035); }
.task-check-toggle { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(181,135,222,.4); border-radius: 6px; background: rgba(142,107,174,.08); color: #fff; cursor: pointer; }
.task-check-row .done { color: var(--text-muted); text-decoration: line-through; }
.task-inline-add { display: grid; grid-template-columns: 1fr 30px; gap: 6px; margin-top: 7px; }
.task-comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 9px; }
.task-comment { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 8px; }
.task-comment > span:nth-child(2) { padding: 8px 10px; border: 1px solid rgba(var(--rgb-fill),.07); border-radius: 4px 12px 12px 12px; background: rgba(var(--rgb-fill),.03); }
.task-comment b { font-size: 8.5px; }.task-comment p { margin: 4px 0; color: var(--text-body); font-size: 9px; line-height: 1.65; white-space: pre-wrap; }.task-comment small { color: var(--text-muted); font: 7px var(--font-mono); }
.task-comments-empty, .task-view-empty { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: var(--text-muted); font-size: 9px; text-align: center; }
.task-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.task-form-grid .task-field:last-child { grid-column: 1/-1; }
.task-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; color: var(--text-body); font-size: 9px; }
.task-color-field { flex-direction: row; align-items: center; justify-content: space-between; }
.task-color-input { width: 47px; height: 31px; padding: 2px; border: 1px solid var(--task-border); border-radius: 9px; background: rgba(var(--rgb-fill),.04); cursor: pointer; }
.task-confirm { margin: 0; color: var(--text-body); line-height: 1.8; }

.task-onboard, .task-loading { display: flex; height: 100%; min-height: 360px; flex-direction: column; align-items: center; justify-content: center; padding: 40px; border: 1px solid var(--task-border); border-radius: 24px; background: radial-gradient(circle at 50% 35%,rgba(110,75,154,.2),transparent 35%),var(--task-glass); text-align: center; }
.task-onboard-orbit { margin-bottom: 12px; filter: drop-shadow(0 15px 30px rgba(142,107,174,.35)); }
.task-onboard h1 { display: flex; flex-direction: column; margin: 0; }.task-onboard h1 b { font-size: 23px; }.task-onboard h1 small { color: var(--text-muted); font: 9px var(--font-mono); letter-spacing: .12em; }
.task-onboard p { max-width: 460px; margin: 13px 0 18px; color: var(--text-muted); font-size: 10.5px; line-height: 1.8; }
.task-loading { gap: 10px; color: var(--text-muted); font-size: 9px; }

@media (max-width: 1180px) {
  .task-shell { grid-template-columns: 160px minmax(0,1fr); }
  .task-view-switch button span { display: none; }
  .task-priority-filters .task-filter:not(.on):not(:first-child) { display: none; }
  .task-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .scr-tasks { min-height: 650px; }
  .task-shell { display: flex; flex-direction: column; }
  .task-rail { min-height: auto; flex: 0 0 auto; padding: 8px; }
  .task-rail-head, .task-rail-summary { display: none; }
  .task-board-list { flex-direction: row; padding: 0; overflow-x: auto; }
  .task-board-link { min-width: 150px; }
  .task-main { min-height: 570px; }
  .task-page-head { align-items: flex-start; flex-direction: column; }
  .task-head-actions { width: 100%; justify-content: space-between; }
  .task-toolbar { flex-wrap: wrap; }
  .task-search { width: 100%; flex-basis: 100%; }
  .task-analysis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .task-title p, .task-total, .task-assignee-filters { display: none; }
  .task-head-actions .btn { padding-inline: 9px; }
  .task-metrics { grid-template-columns: 1fr; }
  .task-detail-meta, .task-form-grid { grid-template-columns: 1fr; }
  .task-detail-meta label:nth-child(3), .task-form-grid .task-field:last-child { grid-column: auto; }
}

/* Tasks workspace — aligned with design/prototypes/tasks-board.html */
.tasks-host-shell {
  grid-column: 1 / -1;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
}
.tasks-host-shell > .view { width: 100%; height: 100%; padding: 0; overflow: hidden; }
.tasks-host-shell .scr-tasks { width: 100%; height: 100vh; }
.scr-tasks {
  --task-border: rgba(var(--rgb-fill),.14);
  --task-subtle: rgba(var(--rgb-fill),.08);
  --task-glass: rgba(var(--rgb-fill),.08);
  --task-surface: rgba(var(--rgb-fill),.13);
}
.scr-tasks svg:not(.orbmark) { stroke-width: 2; }
.task-shell { grid-template-columns: 230px minmax(0,1fr); gap: 0; height: 100vh; }
.task-rail,
.task-main { min-height: 0; }
.task-rail {
  position: relative;
  margin: 14px;
  padding: 20px 15px;
  overflow: hidden;
  border: 1px solid var(--task-border);
  border-radius: 32px;
  background: var(--task-glass);
  box-shadow: 0 26px 64px -18px rgba(var(--rgb-shade),.7), inset 0 1px 0 rgba(var(--rgb-fill),.06);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
}
.task-rail::before {
  content: '';
  position: absolute;
  top: 14px;
  inset-inline: 30px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(var(--rgb-fill),.32),transparent);
}
.task-rail-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 16px;
  color: inherit;
  text-decoration: none;
}
.task-rail-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 11px;
  background: linear-gradient(135deg,#a27cb7,#2e2a6e);
  box-shadow: inset 0 1px 0 rgba(var(--rgb-fill),.3), 0 8px 18px rgba(var(--rgb-shade),.4);
}
.task-rail-mark .orbmark { width: 20px; height: 20px; }
.task-rail-brand > span { display: flex; flex-direction: column; }
.task-rail-brand b { font-size: 15px; font-weight: 600; }
.task-rail-brand small { margin-top: 3px; color: var(--text-label); font: 8.5px var(--font-mono); letter-spacing: .34em; }
.task-view-nav { display: flex; flex-direction: column; gap: 3px; }
.task-view-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-arabic);
  text-align: start;
  cursor: pointer;
  transition: 240ms;
}
.task-view-nav button:hover { color: var(--text-primary); background: rgba(var(--rgb-fill),.05); }
.task-view-nav button.on { color: var(--text-primary); background: rgba(142,107,174,.20); }
.task-view-nav button > span { min-width: 0; flex: 1; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.task-rail-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px 7px;
  color: var(--text-label);
  font: 9px var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.task-rail-group .task-icon-button { width: 24px; height: 24px; flex-basis: 24px; }
.task-board-list { flex: 1; gap: 3px; padding: 0; }
.task-board-link {
  grid-template-columns: 9px minmax(0,1fr) auto;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  color: var(--text-body);
  font-size: 13px;
}
.task-board-link:hover { background: rgba(var(--rgb-fill),.05); transform: none; }
.task-board-link.on { border-color: transparent; background: rgba(142,107,174,.16); box-shadow: none; }
.task-board-link > span:nth-child(2) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-board-link > small { min-width: 21px; padding: 2px 6px; border-radius: 999px; color: var(--text-label); background: rgba(var(--rgb-fill),.06); font: 9px var(--font-mono); text-align: center; }
.task-user {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding: 14px 8px 2px;
  border-top: 1px solid var(--task-subtle);
}
.task-user .task-avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 10px; }
.task-user > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.task-user b { overflow: hidden; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-user small { margin-top: 2px; color: var(--text-label); font: 8px var(--font-mono); text-transform: capitalize; }
.task-user > svg { color: var(--text-label); }

.task-main {
  padding: 14px 0 12px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.task-page-head {
  align-items: center;
  gap: 16px;
  padding: 2px 6px 12px;
  border: 0;
}
.task-plan { min-width: 0; }
.task-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 12px var(--font-arabic);
  cursor: pointer;
}
.task-back:hover { color: var(--text-primary); }
.task-plan-title { display: flex; min-width: 0; align-items: center; gap: 9px; }
.task-plan-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(var(--rgb-fill),.18); }
.task-plan-title h1 {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(118deg,#f3e9f6 0%,#cdb1d4 42%,#a27cb7 100%);
  background-clip: text;
  color: transparent;
  font-size: 22px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-plan-settings {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.task-plan-settings:hover { color: var(--text-primary); border-color: var(--task-border); background: rgba(var(--rgb-fill),.05); }
.task-plan-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.task-plan-sub i { width: 4px; height: 4px; border-radius: 50%; background: #a27cb7; }
.task-head-actions { gap: 10px; flex-shrink: 0; }
.task-head-actions > .btn { padding: 10px 15px; border-radius: 999px; font-size: 13px; }
.task-group-switch {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--task-border);
  border-radius: 999px;
  background: rgba(var(--rgb-fill),.05);
}
.task-group-switch > span { align-self: center; padding: 0 9px; color: var(--text-label); font: 9px var(--font-mono); letter-spacing: .12em; }
.task-group-switch button {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: 500 12.5px var(--font-arabic);
  cursor: pointer;
}
.task-group-switch button:hover { color: var(--text-primary); background: rgba(var(--rgb-fill),.05); }
.task-group-switch button.on { color: var(--text-primary); background: rgba(142,107,174,.26); }
.task-filter-wrap { position: relative; }
.task-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--task-border);
  border-radius: 999px;
  background: rgba(var(--rgb-fill),.05);
  color: var(--text-body);
  font: 13px var(--font-arabic);
  cursor: pointer;
}
.task-filter-button:hover,
.task-filter-button.active { color: var(--text-primary); background: rgba(var(--rgb-fill),.08); }
.task-filter-button b { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 9px; background: #8e6bae; color: #fff; font: 10px var(--font-mono); }
.task-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 80;
  width: 330px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--task-border);
  border-radius: 24px;
  background: rgba(var(--rgb-panel),.94);
  box-shadow: 0 26px 64px -18px rgba(var(--rgb-shade),.82), inset 0 1px 0 rgba(var(--rgb-fill),.08);
  backdrop-filter: blur(28px) saturate(200%);
  animation: task-filter-in 180ms ease-out;
}
@keyframes task-filter-in { from { opacity: 0; transform: translateY(-6px); } }
.task-filter-search { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--task-border); border-radius: 999px; background: rgba(var(--rgb-fill),.05); color: var(--text-label); }
.task-filter-search .task-search-input { padding: 0; font-size: 12px; }
.task-filter-section { display: flex; flex-direction: column; gap: 8px; }
.task-filter-label { color: var(--text-label); font: 9px var(--font-mono); letter-spacing: .11em; }
.task-filter-people,
.task-filter-priorities { display: flex; flex-wrap: wrap; gap: 6px; }
.task-filter-people button,
.task-filter-priorities button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--task-border);
  border-radius: 999px;
  background: rgba(var(--rgb-fill),.03);
  color: var(--text-muted);
  font: 10.5px var(--font-arabic);
  cursor: pointer;
}
.task-filter-people button.on,
.task-filter-priorities button.on { color: var(--text-primary); border-color: rgba(142,107,174,.5); background: rgba(142,107,174,.22); }
.task-filter-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding-top: 12px; border-top: 1px solid var(--task-subtle); }
.task-filter-stats span { display: flex; flex-direction: column; align-items: center; padding: 7px; border-radius: 11px; background: rgba(var(--rgb-fill),.04); }
.task-filter-stats b { font: 600 13px var(--font-mono); }
.task-filter-stats small { margin-top: 2px; color: var(--text-label); font-size: 8px; }
.task-filter-actions { display: flex; justify-content: space-between; gap: 8px; }
.task-filter-actions button { padding: 7px 14px; border: 1px solid var(--task-border); border-radius: 999px; background: rgba(var(--rgb-fill),.05); color: var(--text-body); font: 12px var(--font-arabic); cursor: pointer; }
.task-filter-actions button.primary { border-color: transparent; background: linear-gradient(135deg,#8e6bae,#5c3f86); color: #fff; }

.task-view-body { flex: 1; min-height: 0; overflow: auto; }
.task-board-scroll { min-width: min-content; height: 100%; gap: 14px; padding: 2px 6px 8px 2px; overflow-x: auto; overflow-y: hidden; }
.task-column {
  width: 286px;
  max-height: 100%;
  flex-basis: 286px;
  padding: 13px;
  border: 1px solid var(--task-border);
  border-radius: 24px;
  background: var(--task-glass);
  box-shadow: 0 26px 64px -28px rgba(var(--rgb-shade),.7), inset 0 1px 0 rgba(var(--rgb-fill),.05);
  backdrop-filter: blur(28px) saturate(180%);
}
.task-column::before,
.task-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 16px;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(var(--rgb-fill),.35),transparent);
  pointer-events: none;
}
.task-column.drop { border-color: rgba(162,124,183,.62); outline: 1.5px dashed rgba(162,124,183,.5); outline-offset: -4px; background: rgba(142,107,174,.12); }
.task-column-head { gap: 9px; padding: 2px 4px 11px; }
.task-column-head > span:first-child { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: 7px; }
.task-column-head b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-column-head small { color: var(--text-label); font: 10px var(--font-arabic); }
.task-column-count { order: initial; min-width: 25px; padding: 2px 8px; color: var(--text-label); background: rgba(var(--rgb-fill),.06); font: 11px var(--font-mono); }
.task-column-plus { width: 25px; height: 25px; display: grid; place-items: center; margin-inline-start: auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.task-column-plus:hover { color: var(--text-primary); }
.task-column-cards { min-height: 0; gap: 9px; padding: 2px; }
.task-column-cards::-webkit-scrollbar { width: 7px; }
.task-column-cards::-webkit-scrollbar-thumb,
.task-board-scroll::-webkit-scrollbar-thumb { border-radius: 9px; background: rgba(var(--rgb-fill),.08); }
.task-board-scroll::-webkit-scrollbar { height: 9px; }
.task-card {
  padding: 12px 14px 11px;
  border-color: var(--task-border);
  border-radius: 16px;
  background: var(--task-surface);
  box-shadow: 0 12px 30px -16px rgba(var(--rgb-shade),.7);
  backdrop-filter: blur(28px) saturate(180%);
  cursor: grab;
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms;
}
.task-card:active { cursor: grabbing; }
.task-card:hover,
.task-card:focus-visible { border-color: var(--task-border); transform: translateY(-2px); box-shadow: 0 26px 64px -18px rgba(var(--rgb-shade),.7), 0 0 60px rgba(142,107,174,.28); }
.task-priority-edge { inset-block: 11px; width: 3px; border-radius: 3px; box-shadow: none; }
.task-card-labels { gap: 5px; margin-bottom: 8px; }
.task-label { padding: 2px 8px; font-size: 10px; font-weight: 600; }
.task-card h3 { margin: 0 0 9px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.task-card-meta { gap: 9px; margin-top: 0; color: var(--text-muted); font: 10.5px var(--font-arabic); }
.task-card-meta .task-card-avatars { margin-inline-start: auto; }
.task-card .task-avatar.sm { width: 23px; height: 23px; flex-basis: 23px; margin-inline-start: -7px; border: 2px solid #140f2a; font-size: 8px; }
.task-progress-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.task-add-card { margin: 9px 2px 0; padding: 9px 10px; justify-content: flex-start; border-color: var(--task-border); border-radius: 12px; font-size: 12.5px; }
.task-quick-add { position: relative; margin-top: 1px; }
.task-quick-input { width: 100%; padding: 11px 12px; padding-inline-end: 72px; border: 1px solid var(--task-border); border-radius: 12px; outline: none; background: rgba(var(--rgb-fill),.06); color: var(--text-primary); font: 12.5px var(--font-arabic); }
.task-quick-input:focus { border-color: rgba(142,107,174,.6); box-shadow: 0 0 0 3px rgba(142,107,174,.18); }
.task-quick-add > span { position: absolute; top: 50%; inset-inline-end: 6px; display: flex; gap: 5px; transform: translateY(-50%); }
.task-quick-ok,
.task-quick-cancel { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
.task-quick-ok { border: 0; background: linear-gradient(135deg,#8e6bae,#5c3f86); color: #fff; }
.task-quick-cancel { border: 1px solid var(--task-border); background: rgba(var(--rgb-fill),.05); color: var(--text-muted); }
.task-column-empty { min-height: 70px; font-size: 10px; }
.task-new-column { width: 220px; min-height: 62px; flex-basis: 220px; padding: 10px; border-color: var(--task-border); border-radius: 24px; }
.task-new-column span { display: flex; flex-direction: column; }
.task-new-column b { font-size: 13px; }
.task-new-column small { color: var(--text-label); font: 9px var(--font-mono); }
.task-foot-note { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px 0; color: var(--text-label); font-size: 11px; }

.task-list,
.task-calendar,
.task-analytics,
.task-timeline { padding: 2px 6px 12px 2px; }
.task-list-row,
.task-calendar-month,
.task-analysis-panel,
.task-metric,
.task-timeline { border-color: var(--task-border); background: var(--task-glass); backdrop-filter: blur(22px); }
.task-timeline { min-width: 760px; border: 1px solid var(--task-border); border-radius: 24px; overflow: hidden; }
.task-timeline-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--task-subtle); color: var(--text-muted); font-size: 11px; }
.task-timeline-toolbar span { display: flex; align-items: center; gap: 7px; }
.task-timeline-toolbar b { color: var(--text-body); font: 10px var(--font-mono); }
.task-timeline-table { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 300px; direction: rtl; }
.task-timeline-labels { border-inline-end: 1px solid var(--task-subtle); }
.task-timeline-label-head { height: 42px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--task-subtle); color: var(--text-label); font-size: 10px; }
.task-timeline-labels button { width: 100%; height: 47px; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 0 14px; border: 0; border-bottom: 1px solid var(--task-subtle); background: transparent; color: var(--text-primary); text-align: start; cursor: pointer; }
.task-timeline-labels button b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-timeline-labels button small { color: var(--text-label); font-size: 8px; }
.task-timeline-scroll { overflow-x: auto; direction: ltr; }
.task-timeline-canvas { min-height: 100%; background-image: linear-gradient(90deg,rgba(var(--rgb-fill),.045) 1px,transparent 1px); background-size: 34px 100%; }
.task-timeline-scale { height: 42px; display: flex; align-items: center; justify-content: space-around; border-bottom: 1px solid var(--task-subtle); color: var(--text-label); font: 9px var(--font-mono); }
.task-timeline-track { position: relative; height: 47px; border-bottom: 1px solid var(--task-subtle); }
.task-timeline-bar { position: absolute; top: 9px; height: 28px; overflow: hidden; padding: 0 9px; border: 0; border-radius: 9px; color: #fff; font: 600 10px var(--font-arabic); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; box-shadow: 0 7px 18px -7px rgba(var(--rgb-shade),.7), inset 0 1px 0 rgba(var(--rgb-fill),.22); }

.task-drawer-backdrop { z-index: 120; justify-content: flex-start; background: rgba(var(--rgb-panel),.55); direction: ltr; }
.task-drawer {
  position: relative;
  width: min(460px,94vw);
  border: 1px solid var(--task-border);
  border-inline-start: 0;
  border-radius: 0 32px 32px 0;
  background: rgba(var(--rgb-panel),.96);
  box-shadow: 26px 0 70px rgba(0,0,0,.45), inset 0 1px rgba(var(--rgb-fill),.06);
  backdrop-filter: blur(28px) saturate(180%);
  direction: rtl;
}
.task-drawer-head { align-items: stretch; gap: 12px; padding: 22px 22px 14px; border-bottom: 1px solid var(--task-subtle); background: transparent; }
.task-drawer-priority { width: 4px; min-height: 34px; align-self: stretch; flex: 0 0 4px; border-radius: 4px; }
.task-drawer-title { flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid transparent; border-radius: 9px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.task-drawer-title:hover { background: rgba(var(--rgb-fill),.04); }
.task-drawer-title:focus { border-color: rgba(142,107,174,.5); background: rgba(var(--rgb-fill),.06); box-shadow: none; }
.task-drawer-close { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border: 1px solid var(--task-border); border-radius: 50%; background: rgba(var(--rgb-fill),.06); color: var(--text-body); cursor: pointer; }
.task-drawer-close:hover { color: var(--text-primary); background: rgba(var(--rgb-fill),.1); }
.task-drawer-body { display: flex; flex-direction: column; gap: 20px; padding: 18px 22px 26px; }
.task-drawer-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.task-drawer-summary span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--task-border); border-radius: 999px; background: rgba(var(--rgb-fill),.05); color: var(--text-body); font-size: 12px; }
.task-detail-section { padding: 0; border: 0; }
.task-detail-section h3,
.task-checklist-head h3 { margin: 0 0 9px; color: var(--text-label); font: 10px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.task-detail-section h3 > svg,
.task-checklist-head h3 > svg { color: #cdb1d4; }
.task-detail-section h3 > span,
.task-checklist-head h3 > span { display: flex; flex-direction: row; align-items: baseline; gap: 7px; }
.task-detail-section h3 b,
.task-checklist-head h3 b { color: var(--text-label); font: 10px var(--font-arabic); }
.task-detail-section h3 small,
.task-checklist-head h3 small { color: var(--text-label); font: 9px var(--font-mono); }
.task-detail-options { display: flex; flex-wrap: wrap; gap: 6px; }
.task-detail-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--task-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: 12px var(--font-arabic);
  cursor: pointer;
}
.task-detail-option:hover { color: var(--text-primary); }
.task-detail-option.on { color: var(--text-primary); border-color: rgba(142,107,174,.5); background: rgba(142,107,174,.24); }
.task-detail-option .task-color-dot { width: 9px; height: 9px; flex-basis: 9px; box-shadow: none; }
.task-detail-dates { display: flex; flex-wrap: wrap; gap: 10px; }
.task-detail-dates label { display: flex; min-width: 140px; flex: 1; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 11.5px; }
.task-detail-date { width: 100%; padding: 9px 11px; border: 1px solid var(--task-border); border-radius: 12px; outline: none; background: rgba(var(--rgb-fill),.05); color: var(--text-primary); color-scheme: dark; font: 12.5px var(--font-arabic); }
.task-detail-date:focus { border-color: rgba(142,107,174,.6); }
.task-detail-textarea,
.task-comment-input,
.task-inline-input { border-color: var(--task-border); background: rgba(var(--rgb-fill),.05); font-size: 12.5px; }
.task-comment-input { min-height: 38px; resize: none; }
.task-comment-add { align-self: stretch; height: auto; border-color: transparent; background: linear-gradient(135deg,#8e6bae,#5c3f86); color: #fff; }
.task-comment-add:hover { border-color: transparent; background: linear-gradient(135deg,#a27cb7,#6c4b9d); }
.task-detail-choices { gap: 6px; }
.task-detail-choice { padding: 3px 11px 3px 3px; font-size: 11.5px; }
.task-checklist-head { display: flex; align-items: center; justify-content: space-between; }
.task-checklist-head h3 { margin-bottom: 0; }
.task-checklist-head > b { color: var(--text-label); font: 10px var(--font-mono); }
.task-checklist-progress { height: 7px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: rgba(var(--rgb-fill),.08); }
.task-checklist-progress i { display: block; height: 100%; background: linear-gradient(135deg,#8e6bae,#5c3f86); box-shadow: 0 0 12px rgba(142,107,174,.5); }
.task-check-row { padding: 8px 4px; font-size: 12px; }
.task-comment p { font-size: 11.5px; }
.task-drawer-danger { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px 14px; border: 1px solid rgba(224,102,126,.28); border-radius: 999px; background: rgba(224,102,126,.08); color: #e88498; font: 600 12px var(--font-arabic); cursor: pointer; }
.task-drawer-danger:hover { background: linear-gradient(135deg,#e0667e,#a83b56); color: #fff; }

@media (max-width: 1180px) {
  .task-shell { grid-template-columns: 205px minmax(0,1fr); }
  .task-group-switch > span { display: none; }
  .task-group-switch button { padding-inline: 10px; }
}
@media (max-width: 900px) {
  .tasks-host-shell,
  .tasks-host-shell .scr-tasks { height: 100dvh; }
  .task-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .task-rail { display: flex; min-height: 58px; flex-direction: row; align-items: center; gap: 8px; margin: 8px; padding: 8px 10px; border-radius: 18px; overflow-x: auto; }
  .task-rail::before,
  .task-rail-brand,
  .task-rail-group,
  .task-board-list,
  .task-user { display: none; }
  .task-view-nav { flex-direction: row; }
  .task-view-nav button { width: auto; white-space: nowrap; }
  .task-view-nav button > span { display: block; }
  .task-main { min-height: 0; padding: 4px 8px 8px; }
  .task-page-head { align-items: flex-start; flex-direction: column; }
  .task-head-actions { width: 100%; overflow-x: auto; }
  .task-plan-title h1 { font-size: 19px; }
  .task-column { width: 272px; flex-basis: 272px; }
}
@media (max-width: 580px) {
  .task-plan-sub { display: none; }
  .task-page-head { gap: 9px; }
  .task-head-actions > .btn { padding-inline: 11px; }
  .task-group-switch button { padding: 6px 8px; font-size: 11px; }
  .task-filter-button { padding: 8px 11px; }
  .task-foot-note { display: none; }
}

/* Tasks boards gallery — the prototype's missing home screen */
.task-boards-home {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.task-boards-inner { width: min(1080px,100%); margin: 0 auto; padding: 26px 30px 60px; }
.task-boards-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.task-boards-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px;
  color: inherit;
  text-decoration: none;
}
.task-boards-brand > span:last-child { display: flex; flex-direction: column; }
.task-boards-brand b { font-size: 15px; font-weight: 600; }
.task-boards-brand small { margin-top: 3px; color: var(--text-label); font: 8.5px var(--font-mono); letter-spacing: .34em; }
.task-boards-user { width: 34px; height: 34px; flex-basis: 34px; font-size: 11px; }
.task-boards-heading { margin-bottom: 22px; }
.task-boards-heading h1 { margin: 0; color: var(--text-primary); font-size: 29px; font-weight: 600; }
.task-boards-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
.task-boards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 17px; }
.task-board-card {
  --board-color: #8e6bae;
  position: relative;
  min-width: 0;
  padding: 19px 21px;
  overflow: hidden;
  border: 1px solid var(--task-border);
  border-radius: 24px;
  outline: none;
  background: var(--task-glass);
  color: var(--text-primary);
  box-shadow: 0 26px 64px -28px rgba(var(--rgb-shade),.7), inset 0 1px 0 rgba(var(--rgb-fill),.06);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.05);
  font-family: var(--font-arabic);
  text-align: start;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms, border-color 240ms;
}
.task-board-card::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 4px; background: var(--board-color); }
.task-board-card::after { content: ''; position: absolute; top: 0; inset-inline: 16px; height: 1px; background: linear-gradient(90deg,transparent,rgba(var(--rgb-fill),.35),transparent); }
.task-board-card:hover,
.task-board-card:focus-visible { border-color: rgba(162,124,183,.34); transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(var(--rgb-shade),.6), 0 0 45px rgba(142,107,174,.15); }
.task-board-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.task-board-card-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--board-color); box-shadow: 0 0 0 4px rgba(var(--rgb-fill),.06); }
.task-board-card-count { color: var(--text-muted); font: 11px var(--font-mono); }
.task-board-card h2 { margin: 0 0 8px; overflow: hidden; color: var(--text-primary); font-size: 16.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-board-card p { min-height: 40px; display: -webkit-box; margin: 0 0 15px; overflow: hidden; color: var(--text-body); font-size: 12.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-board-card-progress { height: 7px; margin-bottom: 13px; overflow: hidden; border-radius: 999px; background: rgba(var(--rgb-fill),.08); }
.task-board-card-progress i { display: block; height: 100%; border-radius: inherit; background: var(--board-color); box-shadow: 0 0 11px color-mix(in srgb,var(--board-color) 55%,transparent); transition: width .5s cubic-bezier(.34,1.56,.64,1); }
.task-board-card-foot { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 11px; }
.task-board-card-avatars { display: flex; }
.task-board-card-avatars .task-avatar { width: 25px; height: 25px; flex-basis: 25px; margin-inline-start: -7px; border: 2px solid #140f2a; font-size: 8px; }
.task-board-card-avatars .task-avatar:first-child { margin-inline-start: 0; }
.task-board-card-new {
  min-height: 182px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed rgba(var(--rgb-fill),.18);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  box-shadow: none;
  backdrop-filter: none;
}
.task-board-card-new::before,
.task-board-card-new::after { display: none; }
.task-board-card-new:hover { border-color: #8e6bae; color: var(--text-primary); }
.task-board-card-new-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(var(--rgb-fill),.12); border-radius: 50%; background: rgba(var(--rgb-fill),.04); }

@media (max-width: 700px) {
  .task-boards-inner { padding: 18px 16px 42px; }
  .task-boards-top { margin-bottom: 24px; }
  .task-boards-heading h1 { font-size: 25px; }
  .task-boards-grid { grid-template-columns: 1fr; }
}

/* Prototype Gantt timeline */
.task-gantt-wrap {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 6px 10px 2px;
  user-select: none;
}
.task-gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  margin-bottom: 12px;
  padding-inline: 2px;
}
.task-gantt-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: 11.5px; }
.task-gantt-legend span { display: flex; align-items: center; gap: 6px; }
.task-gantt-legend i { width: 14px; height: 9px; border-radius: 3px; box-shadow: inset 0 1px rgba(var(--rgb-fill),.22); }
.task-gantt-tools { display: flex; gap: 6px; }
.task-gantt-tools button {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--task-border);
  border-radius: 9px;
  background: rgba(var(--rgb-fill),.05);
  color: var(--text-body);
  font: 12px var(--font-arabic);
  cursor: pointer;
  transition: 180ms;
}
.task-gantt-tools button:hover:not(:disabled) { color: var(--text-primary); background: rgba(var(--rgb-fill),.1); }
.task-gantt-tools button:disabled { opacity: .35; cursor: default; }
.task-gantt-tools button.wide { padding-inline: 10px; font-weight: 600; }
.task-gantt-tools button.add-group { border-color: rgba(142,107,174,.5); background: rgba(142,107,174,.2); color: var(--text-primary); }
.task-gantt-tools button.add-group:hover { border-color: transparent; background: linear-gradient(135deg,#8e6bae,#5c3f86); }

.task-gantt-frame {
  position: relative;
  min-height: 360px;
  flex: 1;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--task-border);
  border-radius: 24px;
  background: var(--task-glass);
  box-shadow: 0 26px 64px -24px rgba(var(--rgb-shade),.7), inset 0 1px 0 rgba(var(--rgb-fill),.06);
  backdrop-filter: blur(28px) saturate(180%);
}
.task-gantt-frame::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 16px;
  z-index: 20;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(var(--rgb-fill),.35),transparent);
  pointer-events: none;
}
.task-gantt-left {
  position: relative;
  z-index: 12;
  width: 220px;
  height: 100%;
  flex: 0 0 220px;
  overflow: hidden;
  border-inline-end: 1px solid var(--task-border);
  background: #140f2a;
  box-shadow: -12px 0 28px -24px rgba(var(--rgb-shade),.9);
}
.task-gantt-corner {
  position: relative;
  z-index: 3;
  height: 58px;
  display: flex;
  align-items: flex-end;
  padding: 0 14px 7px;
  border-bottom: 1px solid var(--task-border);
  background: rgba(26,19,52,.97);
  color: var(--text-label);
  font-size: 11px;
  font-weight: 600;
}
.task-gantt-left-body { will-change: transform; }
.task-gantt-left-group {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--task-border);
  background: rgba(var(--rgb-fill),.04);
  color: var(--text-primary);
  font: 600 13px var(--font-arabic);
  text-align: start;
  cursor: pointer;
}
.task-gantt-left-group:hover { background: rgba(var(--rgb-fill),.07); }
.task-gantt-left-group > svg { flex: 0 0 auto; color: var(--text-muted); }
.task-gantt-bucket-dot { width: 10px; height: 10px; flex-basis: 10px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(var(--rgb-fill),.18),0 2px 5px -1px rgba(var(--rgb-shade),.5); }
.task-gantt-left-group > span:nth-last-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-gantt-left-group > b { padding: 1px 8px; border-radius: 999px; background: rgba(var(--rgb-fill),.08); color: var(--text-label); font: 10px var(--font-mono); }
.task-gantt-left-task {
  position: relative;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--task-subtle);
  background: #140f2a;
  color: var(--text-primary);
  font: 500 12.5px var(--font-arabic);
  text-align: start;
  cursor: pointer;
  transition: background 160ms;
}
.task-gantt-left-task:hover { background: rgba(var(--rgb-fill),.05); }
.task-gantt-left-task > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-gantt-late { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px rgba(224,102,126,.52); }
.task-gantt-left-add {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid var(--task-subtle);
  background: #140f2a;
}
.task-gantt-left-add:focus-within { background: rgba(142,107,174,.08); }
.task-gantt-left-add input { min-width: 0; flex: 1; padding: 0 4px; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: 12px var(--font-arabic); }
.task-gantt-left-add input::placeholder { color: var(--text-muted); }
.task-gantt-left-add button { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border: 1px dashed var(--task-border); border-radius: 7px; background: rgba(var(--rgb-fill),.05); color: var(--text-muted); cursor: pointer; }
.task-gantt-left-add button:hover,
.task-gantt-left-add:focus-within button { border-color: transparent; border-style: solid; background: linear-gradient(135deg,#8e6bae,#5c3f86); color: #fff; }

.task-gantt-right {
  position: relative;
  min-width: 0;
  height: 100%;
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--rgb-fill),.14) transparent;
}
.task-gantt-right::-webkit-scrollbar { width: 10px; height: 10px; }
.task-gantt-right::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(var(--rgb-fill),.1); }
.task-gantt-right::-webkit-scrollbar-thumb:hover { background: rgba(var(--rgb-fill),.18); }
.task-gantt-calendar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 58px;
  overflow: hidden;
  border-bottom: 1px solid var(--task-border);
  background: rgba(26,19,52,.94);
  backdrop-filter: blur(18px) saturate(170%);
}
.task-gantt-months,
.task-gantt-days { display: flex; direction: ltr; }
.task-gantt-month { height: 29px; flex: 0 0 auto; padding: 6px 0; overflow: hidden; border-inline-end: 1px solid var(--task-border); border-bottom: 1px solid var(--task-subtle); color: var(--text-body); font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
.task-gantt-day { height: 29px; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; border-inline-end: 1px solid var(--task-subtle); color: var(--text-muted); text-align: center; }
.task-gantt-day span { font-size: 9px; opacity: .65; }
.task-gantt-day b { color: var(--text-primary); font: 500 11px var(--font-mono); }
.task-gantt-day.weekend { background: rgba(var(--rgb-fill),.04); }
.task-gantt-day.weekend b { color: var(--text-muted); }
.task-gantt-day.today { background: rgba(142,107,174,.28); }
.task-gantt-day.today b { color: #fff; font-weight: 700; }
.task-gantt-body { position: relative; min-height: calc(100% - 58px); }
.task-gantt-background { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.task-gantt-weekend { position: absolute; top: 0; bottom: 0; background: rgba(var(--rgb-fill),.022); }
.task-gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(224,102,126,.58); box-shadow: 0 0 9px rgba(224,102,126,.42); }
.task-gantt-today-line::before { content: ''; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px rgba(224,102,126,.7); }
.task-gantt-group-track {
  position: relative;
  z-index: 1;
  height: 40px;
  display: block;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--task-border);
  background: rgba(var(--rgb-fill),.02);
  cursor: pointer;
}
.task-gantt-group-track:hover { background: rgba(var(--rgb-fill),.035); }
.task-gantt-summary {
  --bucket-color: #8e6bae;
  position: absolute;
  top: 11px;
  height: 18px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--task-border);
  border-radius: 6px;
  background: rgba(var(--rgb-fill),.07);
  box-shadow: inset 0 1px rgba(var(--rgb-fill),.08),0 4px 12px -6px rgba(var(--rgb-shade),.5);
}
/* التعبئة تنطلق من بداية المدّة — وهي اليمين على المحور المقلوب.
   والحاوية `dir=ltr` (لثبات scrollLeft)، فاليمين هنا هو inline-end. */
.task-gantt-summary > i { position: absolute; inset-block: 0; inset-inline-end: 0; background: linear-gradient(270deg,var(--bucket-color),color-mix(in srgb,var(--bucket-color) 44%,transparent)); opacity: .65; }
.task-gantt-summary > b { position: relative; z-index: 1; padding: 0 9px; overflow: hidden; color: var(--text-body); font: 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.task-gantt-track { position: relative; z-index: 1; border-bottom: 1px solid var(--task-subtle); }
.task-gantt-add-spacer { position: relative; z-index: 1; border-bottom: 1px solid var(--task-subtle); }
.task-gantt-bar {
  --bucket-color: #8e6bae;
  --priority-color: #8e6bae;
  position: absolute;
  top: 9px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 0 9px;
  border-radius: 9px;
  outline: none;
  background: linear-gradient(135deg,var(--bucket-color),color-mix(in srgb,var(--bucket-color) 60%,#140f2a));
  color: #fff;
  box-shadow: 0 7px 18px -7px rgba(var(--rgb-shade),.7),inset 0 1px rgba(var(--rgb-fill),.22);
  font-size: 11.5px;
  font-weight: 600;
  cursor: grab;
  touch-action: none;
  transition: transform 180ms,filter 180ms,box-shadow 180ms;
}
.task-gantt-bar:hover,
.task-gantt-bar:focus-visible { z-index: 5; filter: brightness(1.1); transform: translateY(-1px); }
.task-gantt-bar.dragging { z-index: 8; cursor: grabbing; filter: brightness(1.15); transition: none; box-shadow: 0 14px 30px -8px rgba(var(--rgb-shade),.85),0 0 0 2px rgba(var(--rgb-fill),.55); }
.task-gantt-bar.late { box-shadow: inset 0 0 0 1.5px var(--danger),0 7px 18px -7px rgba(var(--rgb-shade),.7); }
.task-gantt-priority { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; width: 4px; background: var(--priority-color); }
.task-gantt-bar-fill { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 0; background: rgba(var(--rgb-fill),.26); border-inline-start: 1.5px solid rgba(var(--rgb-fill),.5); }
.task-gantt-bar > .task-progress-dot,
.task-gantt-bar-label,
.task-gantt-bar-avatars { position: relative; z-index: 2; }
.task-gantt-bar-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-gantt-bar-avatars { display: flex; flex: 0 0 auto; }
.task-gantt-bar-avatars .task-avatar { width: 19px; height: 19px; flex-basis: 19px; margin-inline-start: -5px; border: 1.5px solid rgba(var(--rgb-fill),.5); font-size: 7px; }
.task-gantt-bar-avatars .task-avatar:first-child { margin-inline-start: 0; }
.task-gantt-handle { position: absolute; top: 0; bottom: 0; z-index: 4; width: 9px; cursor: ew-resize; }
/* المحور الزمني مقلوب: بداية المهمة عند الحافة اليمنى واستحقاقها عند اليسرى */
.task-gantt-handle.start { right: 0; }
.task-gantt-handle.end { left: 0; }
.task-gantt-bar:hover .task-gantt-handle { background: rgba(var(--rgb-fill),.24); }
.task-gantt-bar.milestone { height: 46px; top: 0; overflow: visible; padding: 0 0 0 21px; background: transparent; box-shadow: none; color: var(--text-body); cursor: grab; }
.task-gantt-bar.milestone::before { content: ''; position: absolute; top: 15px; left: 2px; width: 16px; height: 16px; border-radius: 3px; background: var(--bucket-color); box-shadow: 0 3px 9px -2px rgba(var(--rgb-shade),.6),inset 0 1px rgba(var(--rgb-fill),.3); transform: rotate(45deg); }
.task-gantt-bar.milestone.late::before { background: var(--danger); }
.task-gantt-bar.milestone .task-gantt-priority,
.task-gantt-bar.milestone .task-gantt-bar-fill,
.task-gantt-bar.milestone > .task-progress-dot,
.task-gantt-bar.milestone .task-gantt-bar-avatars,
.task-gantt-bar.milestone .task-gantt-handle { display: none; }
.task-gantt-bar.milestone .task-gantt-bar-label { overflow: visible; color: var(--text-body); white-space: nowrap; }
.task-gantt-tip {
  position: fixed;
  z-index: 220;
  padding: 5px 10px;
  border: 1px solid var(--task-border);
  border-radius: 8px;
  background: rgba(var(--rgb-panel),.97);
  color: var(--text-primary);
  box-shadow: 0 10px 24px -8px rgba(var(--rgb-shade),.8);
  backdrop-filter: blur(20px);
  font: 11.5px var(--font-mono);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-100%);
  transition: opacity 100ms;
}
.task-gantt-tip.show { opacity: 1; }

.task-gantt-links {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.task-gantt-link {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  transition: stroke 160ms, opacity 160ms, filter 160ms;
}
.task-gantt-link.waiting { stroke: #e1a75d; }
.task-gantt-link.ready { stroke: #67d3a6; }
.task-gantt-link.selected {
  stroke: #f8f4ff;
  stroke-width: 2.6;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(196,154,237,.95));
}
.task-gantt-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
  outline: none;
}
.task-gantt-link-dot {
  stroke: rgba(20,15,42,.95);
  stroke-width: 2;
  pointer-events: all;
  cursor: pointer;
  transition: r 140ms, filter 140ms;
}
.task-gantt-link-dot.waiting { fill: #e1a75d; }
.task-gantt-link-dot.ready { fill: #67d3a6; }
.task-gantt-link-dot.selected {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(196,154,237,.95));
}
.task-gantt-link-temp {
  fill: none;
  stroke: #f4e8ff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 5;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(142,107,174,.9));
}
.task-gantt-link-point {
  position: absolute;
  top: 17px;
  z-index: 8;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid rgba(245,237,255,.88);
  border-radius: 50%;
  background: #8e6bae;
  box-shadow: 0 0 0 3px rgba(142,107,174,.22),0 4px 9px rgba(var(--rgb-shade),.65);
  opacity: 0;
  pointer-events: none;
  cursor: crosshair;
  transform: scale(.65);
  transition: opacity 130ms, transform 160ms, background 140ms;
  touch-action: none;
}
.task-gantt-track:hover .task-gantt-link-point,
.task-gantt-track:focus-within .task-gantt-link-point,
.task-gantt-body.linking .task-gantt-link-point {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.task-gantt-track:hover,
.task-gantt-track:focus-within,
.task-gantt-body.linking .task-gantt-track { z-index: 5; }
.task-gantt-link-point:hover { background: #c49aed; transform: scale(1.2) !important; }
.task-gantt-link-point.start::after,
.task-gantt-link-point.end::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.task-gantt-track.task-gantt-link-target,
.task-gantt-bar.task-gantt-link-target {
  background-color: rgba(142,107,174,.16);
  box-shadow: inset 0 0 0 1px rgba(196,154,237,.5);
}
.task-gantt-track.blocked .task-gantt-bar { filter: saturate(.7) brightness(.82); }
.task-gantt-left-task.blocked { color: var(--text-label); }
.task-gantt-left-task.blocked > svg { flex: 0 0 auto; color: #e1a75d; }

.task-dependency-popover {
  position: absolute;
  z-index: 22;
  width: 320px;
  padding: 13px;
  border: 1px solid rgba(196,154,237,.32);
  border-radius: 17px;
  background: linear-gradient(150deg,rgba(38,28,69,.98),rgba(19,14,39,.98));
  color: var(--text-body);
  box-shadow: 0 24px 54px -16px rgba(var(--rgb-shade),.92),inset 0 1px rgba(var(--rgb-fill),.12);
  backdrop-filter: blur(24px) saturate(175%);
  user-select: text;
}
.task-dependency-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgba(196,154,237,.32);
  border-left: 1px solid rgba(196,154,237,.32);
  background: #261c45;
  transform: translateX(-50%) rotate(45deg);
}
.task-dependency-popover > header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 11px; }
.task-dependency-route { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 7px; }
.task-dependency-route > span { min-width: 0; display: flex; align-items: center; gap: 5px; }
.task-dependency-route b { overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-dependency-route .task-color-dot { width: 7px; height: 7px; flex: 0 0 7px; }
.task-dependency-route > svg { color: var(--text-muted); }
.task-dependency-close {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(var(--rgb-fill),.06);
  color: var(--text-muted);
  cursor: pointer;
}
.task-dependency-close:hover { background: rgba(var(--rgb-fill),.12); color: #fff; }
.task-dependency-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.task-dependency-caption b { color: var(--text-primary); font-size: 12px; }
.task-dependency-caption small { color: var(--text-muted); font: 9px var(--font-mono); }
.task-dependency-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(var(--rgb-fill),.045); }
.task-dependency-modes button {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font: 10.5px var(--font-arabic);
  cursor: pointer;
}
.task-dependency-modes button.active { background: linear-gradient(135deg,#8e6bae,#60428b); color: #fff; box-shadow: 0 5px 12px -5px rgba(var(--rgb-shade),.7); }
.task-dependency-percent-panel { padding: 12px 2px 4px; }
.task-dependency-percent-panel > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--text-label); font-size: 10.5px; }
.task-dependency-percent { color: #d4b2f1; font: 700 12px var(--font-mono); }
.task-dependency-percent-panel input[type='range'] { width: 100%; margin: 9px 0 7px; accent-color: #a978d2; cursor: pointer; }
.task-dependency-presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.task-dependency-presets button { height: 24px; border: 1px solid var(--task-subtle); border-radius: 7px; background: rgba(var(--rgb-fill),.04); color: var(--text-muted); font: 9px var(--font-mono); cursor: pointer; }
.task-dependency-presets button:hover,
.task-dependency-presets button.active { border-color: rgba(196,154,237,.42); background: rgba(142,107,174,.23); color: #fff; }
.task-dependency-checklist { max-height: 132px; margin-top: 9px; overflow: auto; border: 1px solid var(--task-subtle); border-radius: 10px; background: rgba(var(--rgb-shade),.12); }
.task-dependency-checklist label { min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--task-subtle); color: var(--text-body); font-size: 10.5px; cursor: pointer; }
.task-dependency-checklist label:last-child { border-bottom: 0; }
.task-dependency-checklist input { accent-color: #9e73c4; }
.task-dependency-checklist span.done { color: var(--text-muted); text-decoration: line-through; }
.task-dependency-checklist p { margin: 0; padding: 12px; color: var(--text-muted); font-size: 10.5px; text-align: center; }
.task-dependency-status { min-height: 31px; display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 6px 9px; border-radius: 9px; font-size: 10.5px; }
.task-dependency-status.ready { background: rgba(72,186,137,.12); color: #8fe6b0; }
.task-dependency-status.waiting { background: rgba(218,161,87,.12); color: #efc37c; }
.task-dependency-delete { width: 100%; height: 29px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; border: 0; border-radius: 8px; background: transparent; color: #e995a5; font: 10.5px var(--font-arabic); cursor: pointer; }
.task-dependency-delete:hover { background: rgba(224,102,126,.12); }

@media (max-width: 900px) {
  .task-gantt-left { width: 190px; flex-basis: 190px; }
  .task-gantt-toolbar { align-items: flex-start; flex-direction: column; }
  .task-gantt-tools { width: 100%; overflow-x: auto; }
}
@media (max-width: 580px) {
  .task-gantt-wrap { padding-inline: 0; }
  .task-gantt-legend { display: none; }
  .task-gantt-left { width: 150px; flex-basis: 150px; }
  .task-gantt-left-group,
  .task-gantt-left-task { padding-inline: 9px; }
  .task-gantt-tools button.add-group { display: none; }
}

/* ═══════════════════════════ منتقي التواريخ (picker.js) ═══════════════════════════
   القائمة نفسها منقولة من النموذج الأوّلي بأصنافها `.ppdp-*` أعلاه؛
   وهنا ما تحتاجه بعد الترقية فقط.                                  */

/* قبل أن يرقّي `picker.js` الحقل بلحظة، يبقى `type=date` — وأيقونة
   المتصفّح فيه تفتح قائمةً أجنبية، فتُخفى دفعًا لوميضٍ والتباس */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }

/* الحقل بعد الترقية: نصٌّ يعرض YYYY-MM-DD من اليسار كالأرقام،
   محاذًى إلى بداية السطر (يمينه في صفحةٍ عربية) */
input.ppdp-in { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
input.ppdp-in::placeholder { letter-spacing: .04em; }

/* يومٌ خارج المدى المسموح (min/max) — النموذج لم يعرفه، والمنتج يعرفه */
.ppdp-d:disabled { opacity: .28; cursor: not-allowed; background: transparent; }
.ppdp-d:disabled:hover { background: transparent; color: rgba(var(--rgb-text),.78); }

/* ═══════════════════════════ هيكل الفريق (hierarchy.js) ═══════════════════════════
   شجرة «من يرفع لمن» — تصميم النموذج الأوّلي نفسه: خطوط CSS لا SVG،
   والبطاقة تُسحب إلى مديرها الجديد.                                  */

.scr-hierarchy .page-head { flex-wrap: wrap; }
.scr-hierarchy .hy-chart {
  min-height: 420px; overflow: auto; position: relative;
  padding: 26px 22px 44px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--rgb-fill),.14) transparent;
}
.scr-hierarchy .hy-depts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.scr-hierarchy .hy-depts .dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-inline-end: 4px; }
.scr-hierarchy .zoom { display: inline-flex; align-items: center; gap: 2px; }
.scr-hierarchy .zoom-lbl {
  min-width: 44px; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font: 600 11px var(--font-mono); font-variant-numeric: tabular-nums;
}
.scr-hierarchy .zoom-lbl:hover { color: var(--text-primary); }

/* منطقة «بلا مدير» — تظهر أثناء السحب فقط */
.scr-hierarchy .top-drop {
  display: none; position: sticky; top: 0; z-index: 5;
  align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 18px; max-width: 520px; padding: 12px;
  border: 1.5px dashed rgba(142,107,174,.6); border-radius: var(--r-md);
  background: rgba(142,107,174,.1); color: var(--c-pearl-lav);
  font-family: var(--font-arabic); font-size: 12.5px;
}
.scr-hierarchy .hy-chart.dragging .top-drop { display: flex; }
.scr-hierarchy .top-drop.over { border-color: var(--success); background: rgba(143,230,176,.14); color: var(--success); }

/* الشجرة: خطوط الوصل حدودُ عناصر — تعيش مع كل تكبير وتغيير خطّ */
.scr-hierarchy .tree { display: flex; justify-content: center; min-width: max-content; padding: 6px 8px 16px; }
.scr-hierarchy .tree ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 26px 0 0; position: relative; }
.scr-hierarchy .tree li { list-style: none; position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 18px 0; }
.scr-hierarchy .tree li::before,
.scr-hierarchy .tree li::after { content: ''; position: absolute; top: 0; width: 50%; height: 26px; border-top: 2px solid rgba(var(--rgb-label),.3); }
.scr-hierarchy .tree li::before { right: 50%; }
.scr-hierarchy .tree li::after { left: 50%; border-left: 2px solid rgba(var(--rgb-label),.3); }
.scr-hierarchy .tree ul::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 26px; border-left: 2px solid rgba(var(--rgb-label),.3); }
.scr-hierarchy .tree li:first-child::after { border-top-color: transparent; }
.scr-hierarchy .tree li:last-child::before { border-top-color: transparent; }
.scr-hierarchy .tree > ul { padding-top: 0; }
.scr-hierarchy .tree > ul::before { display: none; }
.scr-hierarchy .tree > ul > li { padding-top: 0; }
.scr-hierarchy .tree > ul > li::before,
.scr-hierarchy .tree > ul > li::after { display: none; }

/* البطاقة */
.scr-hierarchy .node {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 212px; padding: 13px 15px 13px 13px; border-radius: var(--r-lg);
  background: var(--glass-surface); border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(var(--rgb-fill),.06);
  cursor: grab;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur), border-color var(--dur), opacity var(--dur);
}
.scr-hierarchy .node:hover { border-color: rgba(142,107,174,.6); box-shadow: var(--shadow-deep), var(--glow-violet); }
.scr-hierarchy .node::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--dept, #8e6bae);
}
.scr-hierarchy .node-av { width: 40px; height: 40px; font-size: 13px; margin: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text-primary); font-weight: 600; flex-shrink: 0; }
.scr-hierarchy .node-i { flex: 1; min-width: 0; text-align: start; }
.scr-hierarchy .node-n { font-family: var(--font-arabic); font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.scr-hierarchy .node-n svg { width: 12px; height: 12px; color: var(--warn); flex-shrink: 0; }
.scr-hierarchy .node-t { font-family: var(--font-arabic); font-size: 11px; color: var(--text-body); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-hierarchy .node-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.scr-hierarchy .node-dept-l { font-family: var(--font-arabic); font-size: 9.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.scr-hierarchy .node-dept-l::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--dept, #8e6bae); }
.scr-hierarchy .lvl-pill { font-family: var(--font-arabic); font-size: 9px; font-weight: 600; padding: 1.5px 8px; border-radius: var(--r-pill); }
.scr-hierarchy .lvl-0 { background: rgba(142,107,174,.26); color: var(--c-pearl-lav); }
.scr-hierarchy .lvl-1 { background: rgba(111,154,214,.2); color: #9bc0ef; }
.scr-hierarchy .lvl-2 { background: rgba(106,209,182,.2); color: #7fdcc4; }
.scr-hierarchy .lvl-3 { background: rgba(var(--rgb-fill),.08); color: var(--text-muted); }
.scr-hierarchy .lvl-4 { background: rgba(230,184,92,.16); color: var(--warn); }

/* حالات السحب والترشيح */
.scr-hierarchy .node.dragging { opacity: .35; cursor: grabbing; }
.scr-hierarchy .node.drop-ok { border-color: var(--success); box-shadow: 0 0 0 2px var(--success), var(--shadow-deep); }
.scr-hierarchy .node.drop-bad { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.scr-hierarchy .node.dim { opacity: .32; filter: saturate(.5); }
.scr-hierarchy .node.hit { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(230,184,92,.6), var(--shadow-deep); }

/* زرّ الطيّ أسفل البطاقة */
.scr-hierarchy .node-col {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  min-width: 23px; height: 23px; padding: 0 6px; border-radius: var(--r-pill);
  border: 1px solid var(--border-glass); background: var(--c-space); color: var(--text-body);
  display: grid; place-items: center; cursor: pointer; z-index: 3;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; transition: var(--dur);
}
.scr-hierarchy .node-col:hover { color: var(--text-primary); border-color: var(--c-nebula); }
.scr-hierarchy .node-col svg { width: 13px; height: 13px; }

/* محرّر البطاقة — درج من الحافة اليسرى (نهاية السطر في صفحة عربية) */
.scr-hierarchy .hd-back { position: fixed; inset: 0; background: rgba(var(--rgb-panel),.55); opacity: 0; visibility: hidden; transition: var(--dur); z-index: 60; }
.scr-hierarchy .hd-back.open { opacity: 1; visibility: visible; }
.scr-hierarchy .hd-drawer {
  position: fixed; top: 0; inset-inline-end: 0; height: 100%; width: min(400px, 94vw);
  transform: translateX(-105%); transition: transform .42s var(--ease-spring); z-index: 61;
  display: flex; flex-direction: column; margin: 0; border-radius: var(--r-2xl) 0 0 var(--r-2xl); overflow: hidden;
}
[dir="ltr"] .scr-hierarchy .hd-drawer { transform: translateX(105%); }
.scr-hierarchy .hd-drawer.open { transform: translateX(0); }
.scr-hierarchy .hd-head { display: flex; align-items: center; gap: 13px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border-subtle); }
.scr-hierarchy .hd-av { width: 50px; height: 50px; font-size: 16px; margin: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text-primary); font-weight: 600; flex-shrink: 0; }
.scr-hierarchy .hd-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scr-hierarchy .hd-id b { font-family: var(--font-arabic); font-size: 16px; color: var(--text-primary); }
.scr-hierarchy .hd-x { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-glass); background: rgba(var(--rgb-fill),.05); color: var(--text-body); cursor: pointer; display: grid; place-items: center; }
.scr-hierarchy .hd-x:hover { color: var(--text-primary); }
.scr-hierarchy .hd-body { flex: 1; overflow-y: auto; padding: 6px 22px 24px; display: flex; flex-direction: column; }
.scr-hierarchy .hd-l { font-family: var(--font-arabic); font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 13px 0 6px; }
.scr-hierarchy .hd-in, .scr-hierarchy .hd-drawer .selin {
  width: 100%; box-sizing: border-box; background: rgba(var(--rgb-fill),.06);
  border: 1px solid var(--border-glass); border-radius: var(--r-md); color: var(--text-primary);
  font-family: var(--font-arabic); font-size: 13px; padding: 10px 12px; outline: none; transition: var(--dur);
}
.scr-hierarchy .hd-in:focus, .scr-hierarchy .hd-drawer .selin:focus { border-color: rgba(142,107,174,.6); box-shadow: 0 0 0 3px rgba(142,107,174,.18); }
.scr-hierarchy .hd-drawer .selin option { background: var(--c-space); color: var(--text-primary); }
.scr-hierarchy .hd-hint { display: flex; align-items: center; gap: 5px; font-family: var(--font-arabic); font-size: 10.5px; color: var(--text-muted); margin-top: 8px; }
.scr-hierarchy .hd-hint svg { color: var(--c-nebula); }
.scr-hierarchy .hd-rep-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.scr-hierarchy .hd-rep { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); border: 1px solid var(--border-glass); background: rgba(var(--rgb-fill),.04); font-family: var(--font-arabic); font-size: 11.5px; color: var(--text-body); cursor: pointer; transition: var(--dur); }
.scr-hierarchy .hd-rep:hover { color: var(--text-primary); border-color: rgba(142,107,174,.5); }
.scr-hierarchy .hd-rep-av { width: 20px; height: 20px; font-size: 8px; margin: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--grad-primary); color: var(--text-primary); }
.scr-hierarchy .hd-foot { padding: 14px 22px; border-top: 1px solid var(--border-subtle); font-family: var(--font-arabic); font-size: 11.5px; }
.scr-hierarchy .hd-foot a { color: var(--c-pearl-lav); text-decoration: none; }
.scr-hierarchy .hd-foot a:hover { text-decoration: underline; }