/* ============================================================
   هوية اللوحة الموحّدة — مشتقّة من القائمة الجانبية «الشريطان» (2026-11-04).
   «وضع الهوية» = أي ستايل غير الكلاسيكي (الشريطان/الهالة). فيه يُفرض المظهر
   الداكن (identity.js) وتُعاد قيم رموز app.css كلها إلى لوحة الهوية، فتتبعها
   كل الصفحات تلقائياً لأنها مبنية على الرموز.
   الكلاسيكي يبقى بمظهريه القديمين كما كانا تماماً (مخرج آمن).

   الملف يُحمَّل بعد كل CSS الصفحات. المحدِّد :root[data-theme="dark"]:not(...)
   وزنه (0,3,0) فيغلب :root[data-theme="dark"] في app.css وملفات الصفحات.

   للصفحات: استعملي الرموز (var(--surface) …) لا ألواناً ثابتة، ومكوّنات .id-*
   أدناه متاحة في كل الأوضاع.
   ============================================================ */

:root{
  /* رموز الهوية الجديدة — معرّفة دائماً كي تعمل مكوّنات .id-* في أي وضع */
  --surface-3:#2a1c47;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --ink:#f4effc; --ink-2:rgba(240,233,252,.74); --ink-3:#a596c4; --ink-4:#76679a;
  --brand:#7c4dbd; --brand-2:#a97fd6;
  --brand-grad:linear-gradient(135deg,#8b5cf6 0%,#a97fd6 55%,#e879f9 100%);
  /* ألوان الأقسام — نفس nav.js والقائمة، للتمييز لا للزخرفة */
  --c-live:#34d399; --c-captains:#f472b6; --c-customers:#60a5fa; --c-care:#fb923c;
  --c-growth:#e879f9; --c-finance:#fbbf24; --c-reports:#22d3ee; --c-hr:#4ade80;
  --c-gov:#94a3b8; --c-settings:#c084fc; --c-security:#f87171;
  --ok:#34d399; --ok-bg:rgba(52,211,153,.12);
  --info:#60a5fa; --info-bg:rgba(96,165,250,.12);
  --bad:#fb7185; --bad-bg:rgba(251,113,133,.13);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --ring:0 0 0 3px rgba(169,127,214,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms; --t:240ms; --t-slow:420ms;
}

/* ── وضع الهوية: إعادة قيم رموز app.css ── */
:root[data-theme="dark"]:not([data-sidebar-style="classic"]){
  color-scheme:dark;
  --page-bg:#0d0718;
  --bg:#120a20; --surface:#1c1231; --surface-2:#22163a;
  --border:rgba(255,255,255,.085); --border-soft:rgba(255,255,255,.055);
  --text:#f4effc; --muted:#a596c4; --faint:#76679a;
  --primary:#a97fd6; --primary-light:#c9a4e6; --accent:#b98fd9;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#a97fd6 60%,#d08cf0 100%);
  --good:#34d399; --good-bg:rgba(52,211,153,.12); --good-line:rgba(52,211,153,.32);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --warn-line:rgba(251,191,36,.32);
  --crit:#fb7185; --crit-bg:rgba(251,113,133,.13); --crit-line:rgba(251,113,133,.34);
  --cl-ops:#c4a5f0;   --cl-ops-bg:rgba(167,139,250,.13);  --cl-ops-line:rgba(167,139,250,.32);
  --cl-trust:#fbbf24; --cl-trust-bg:rgba(251,191,36,.12); --cl-trust-line:rgba(251,191,36,.3);
  --cl-gov:#5eead4;   --cl-gov-bg:rgba(94,234,212,.11);   --cl-gov-line:rgba(94,234,212,.3);
  --cl-ovr:#a78bfa;   --cl-ovr-bg:rgba(167,139,250,.13);  --cl-ovr-line:rgba(167,139,250,.32);
  --cl-cap2:#f472b6;  --cl-cap2-bg:rgba(244,114,182,.12); --cl-cap2-line:rgba(244,114,182,.32);
  --cl-cus2:#60a5fa;  --cl-cus2-bg:rgba(96,165,250,.12);  --cl-cus2-line:rgba(96,165,250,.32);
  --cl-qual:#34d399;  --cl-qual-bg:rgba(52,211,153,.12);  --cl-qual-line:rgba(52,211,153,.3);
  --cl-fin2:#fbbf24;  --cl-fin2-bg:rgba(251,191,36,.12);  --cl-fin2-line:rgba(251,191,36,.3);
  --cl-mkt2:#e879f9;  --cl-mkt2-bg:rgba(232,121,249,.12); --cl-mkt2-line:rgba(232,121,249,.3);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -14px rgba(5,2,12,.7);
  --shadow-lg:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -24px rgba(5,2,12,.85);
  --fbody:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;
  --fdisplay:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;
}

/* المظهر يُفرض داكناً في وضع الهوية، فزرّ التبديل بلا معنى فيه */
html:not([data-sidebar-style="classic"]) #themeBtn{display:none}

/* هالة خفيفة خلف المحتوى — نفس روح القائمة */
:root[data-theme="dark"]:not([data-sidebar-style="classic"]) body{font-variant-numeric:tabular-nums}
/* على خلفية .shell نفسها (مثبَّتة) لا طبقة ::before: الطبقة احتاجت سياق تكديس على
   .main (isolation)، فحبست كل نافذة position:fixed داخل المحتوى تحت القائمة الجانبية. */
:root[data-theme="dark"]:not([data-sidebar-style="classic"]) .shell{
  background:radial-gradient(900px 500px at 85% -10%,rgba(124,77,189,.16),transparent 60%) fixed,
             radial-gradient(700px 420px at 10% 110%,rgba(232,121,249,.07),transparent 60%) fixed,
             var(--bg)}

/* ============================================================
   مكوّنات .id-* — نفس معاينات التصميم المعتمدة (pages/shared/identity.css)
   ============================================================ */
.id-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.id-head h1{margin:0;font-family:var(--fdisplay);font-size:26px;font-weight:800}
.id-head p{margin:4px 0 0;color:var(--muted);max-width:720px}
.id-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--c,#a97fd6) 16%,transparent);color:var(--c,#a97fd6);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c,#a97fd6) 30%,transparent) inset,0 8px 24px -10px var(--c,#a97fd6)}

.id-card{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 20px}
.id-card h3{margin:0 0 12px;font-size:15px;font-weight:700}
.id-card .id-sub{color:var(--muted);font-size:12.5px}

.id-stat{display:flex;flex-direction:column;gap:4px}
.id-stat .k{color:var(--muted);font-size:12.5px;font-weight:500}
.id-stat .v{font-size:30px;font-weight:800;line-height:1.15}
.id-stat .d{font-size:12px;color:var(--muted)}
.id-stat .d.up{color:var(--good)} .id-stat .d.down{color:var(--crit)}

.id-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--glass-2);color:var(--muted);border:1px solid var(--border)}
.id-chip.ok{background:var(--good-bg);color:var(--good);border-color:transparent}
.id-chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.id-chip.bad{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.id-chip.info{background:var(--info-bg);color:var(--info);border-color:transparent}
.id-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.id-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--glass);border:1px solid var(--border);max-width:100%;overflow-x:auto}
.id-tab{padding:6px 14px;border-radius:9px;border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap;
  transition:color var(--t),background var(--t)}
.id-tab:hover{color:var(--text)}
.id-tab.on{background:var(--surface-3);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}

.id-grid{display:grid;gap:16px}
.id-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.id-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.id-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.id-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.id-g3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.id-g4,.id-g3,.id-g2{grid-template-columns:1fr}}

/* حركة الدخول: أضيفي .id-rise و style="--i:N" */
@keyframes id-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.id-rise{animation:id-rise var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.content.no-anim .id-rise{animation:none}
@keyframes id-shimmer{to{background-position:-200% 0}}
.id-skel{background:linear-gradient(90deg,var(--glass) 0%,var(--glass-2) 40%,var(--glass) 80%);background-size:200% 100%;
  animation:id-shimmer 1.4s linear infinite;border-radius:8px}
/* نبض الحيّ */
@keyframes id-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#34d399) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.id-live{width:8px;height:8px;border-radius:50%;background:var(--c,#34d399);animation:id-pulse 1.8s var(--ease) infinite;flex:none}
/* رسم خطوط SVG عند الدخول: أضيفي .id-draw لـpath (pathLength="1") */
@keyframes id-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.id-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:id-draw 1.1s var(--ease) both}
.content.no-anim .id-draw{animation:none}

@media (prefers-reduced-motion:reduce){
  .id-rise,.id-draw,.id-live,.id-skel{animation:none!important}
}

/* ============================================================
   الأساس المشترك في وضع الهوية — كل ما تستعمله الشاشات كلها:
   الشريط العلوي، المحتوى، البطاقات، المؤشّرات، الأزرار، الجداول، الحقول،
   التبويبات، الشارات، الأدراج، النوافذ، الإشعار، التحميل، الفراغ، الترقيم، الدخول.

   كل محدِّد يبدأ بـ :where(html:not([data-sidebar-style="classic"])) — وزنه صفر،
   فالقاعدة تساوي وزن قاعدة app.css المقابلة وتغلبها لأن الملف يُحمَّل آخراً،
   لكنها **تخسر** أمام أي قاعدة صفحة أدقّ (‎.fin .btn‎ مثلاً). هكذا يأخذ كل
   شيء شكل الهوية، وتبقى تصاميم الصفحات الخاصة فوقه بلا سباق أوزان.
   الكلاسيكي لا يُمسّ.
   ============================================================ */

:where(html:not([data-sidebar-style="classic"])){scrollbar-color:rgba(255,255,255,.14) transparent}
:where(html:not([data-sidebar-style="classic"])) ::selection{background:rgba(169,127,214,.42);color:#fff}
:where(html:not([data-sidebar-style="classic"])) :where(button,a,summary,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 85%,#fff);outline-offset:2px}

/* ── الشريط العلوي ── */
:where(html:not([data-sidebar-style="classic"])) .topbar{min-height:62px;padding:10px 28px;gap:12px;
  background:color-mix(in srgb,var(--bg) 74%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
:where(html:not([data-sidebar-style="classic"])) .crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(html:not([data-sidebar-style="classic"])) .crumb::before{content:"";flex:none;width:8px;height:8px;border-radius:3px;background:var(--brand-grad);box-shadow:0 0 10px rgba(169,127,214,.55)}
:where(html:not([data-sidebar-style="classic"])) .crumb b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis}
:where(html:not([data-sidebar-style="classic"])) .topbar .search{height:38px;width:300px;padding:0 13px;gap:9px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);color:var(--faint);font-size:13px;white-space:nowrap;overflow:hidden;
  transition:background var(--t) var(--ease),border-color var(--t),color var(--t),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .topbar .search:hover{background:var(--glass-2);border-color:var(--line-2);color:var(--muted)}
:where(html:not([data-sidebar-style="classic"])) .topbar .search svg{color:var(--muted)}
:where(html:not([data-sidebar-style="classic"])) .icon-btn{width:38px;height:38px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--muted);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) .icon-btn:hover{background:var(--glass-2);border-color:var(--line-2);color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .icon-btn:active{transform:scale(.93)}
:where(html:not([data-sidebar-style="classic"])) .icon-btn svg{transition:transform var(--t-slow) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) #refreshBtn:hover svg{transform:rotate(-70deg)}
:where(html:not([data-sidebar-style="classic"])) .topbar .avatar{width:38px;height:38px;border-radius:50%;flex:none;position:relative;
  background:linear-gradient(140deg,#d3b5f3 0%,#a97fd6 35%,#7c4dbd 70%,#5b2f9b 100%);color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(169,127,214,.55);transition:box-shadow var(--t) var(--ease),border-radius var(--t-slow) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) .topbar .avatar:hover{border-radius:34%;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(169,127,214,.95),0 8px 20px -6px rgba(169,127,214,.8)}
:where(html:not([data-sidebar-style="classic"])) .topbar .avatar::after{content:"";position:absolute;bottom:-1px;left:-1px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid var(--bg)}

/* ── المحتوى: كامل العرض المتاح، بلا سقف يترك فراغاً على اليسار ── */
:where(html:not([data-sidebar-style="classic"])) .main{min-width:0}
:where(html:not([data-sidebar-style="classic"])) .content{width:100%;max-width:none;padding:26px 32px 80px;min-width:0}
:where(html:not([data-sidebar-style="classic"])) .page-head{align-items:flex-end;gap:16px;margin-bottom:22px}
:where(html:not([data-sidebar-style="classic"])) .page-head h1{font-size:26px;font-weight:800;line-height:1.3;margin:0 0 4px;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .page-head p{color:var(--muted);max-width:76ch}
:where(html:not([data-sidebar-style="classic"])) .section-head h2{font-size:16px}
:where(html:not([data-sidebar-style="classic"])) .content > .page-head{animation:id-rise var(--t-slow) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .content.no-anim > .page-head{animation:none}

/* ── البطاقات ── */
:where(html:not([data-sidebar-style="classic"])) .panel{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);animation:id-rise var(--t-slow) var(--ease) both;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) .panel:hover{border-color:var(--line-2)}
:where(html:not([data-sidebar-style="classic"])) .panel-head{padding:15px 20px;border-bottom:1px solid var(--line);min-height:54px}
:where(html:not([data-sidebar-style="classic"])) .panel-head h3{font-size:15px;font-weight:800;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .panel-head .hint{color:var(--faint);font-size:11.5px;font-weight:500}
:where(html:not([data-sidebar-style="classic"])) .panel-body{padding:18px 20px}
:where(html:not([data-sidebar-style="classic"])) :where(.stat,.rule-card,.builder,.lb-card,.mod-card,.chart-card,.map-card,.widget,.region-card,.footnote,.team-tbl-wrap,.breakdown-bar,.sc-card){
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
:where(html:not([data-sidebar-style="classic"])) .region-card{transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .region-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
:where(html:not([data-sidebar-style="classic"])) .footnote{color:var(--muted)}

/* ── شريط المؤشّرات ── */
:where(html:not([data-sidebar-style="classic"])) .kpi-row{gap:14px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
:where(html:not([data-sidebar-style="classic"])) .kpi{--kc:var(--primary);position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 15px;
  background:radial-gradient(160px 120px at 0% 100%,color-mix(in srgb,var(--kc) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow);transition:translate var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .kpi:hover{translate:0 -2px;border-color:var(--line-2);box-shadow:var(--shadow-lg)}
:where(html:not([data-sidebar-style="classic"])) .kpi .k{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
:where(html:not([data-sidebar-style="classic"])) .kpi .v{font-size:27px;font-weight:800;line-height:1.12;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .kpi .s{font-size:11.5px;color:var(--faint);font-weight:500;margin-top:6px}
:where(html:not([data-sidebar-style="classic"])) .kpi.crit{--kc:var(--crit);border-color:var(--crit-line);
  background:radial-gradient(180px 130px at 100% 0%,var(--crit-bg),transparent 75%),linear-gradient(180deg,var(--surface-2),var(--surface))}
:where(html:not([data-sidebar-style="classic"])) .kpi.warn{--kc:var(--warn);border-color:var(--warn-line);
  background:radial-gradient(180px 130px at 100% 0%,var(--warn-bg),transparent 75%),linear-gradient(180deg,var(--surface-2),var(--surface))}
:where(html:not([data-sidebar-style="classic"])) .kpi.good{--kc:var(--good);border-color:var(--good-line);
  background:radial-gradient(180px 130px at 100% 0%,var(--good-bg),transparent 75%),linear-gradient(180deg,var(--surface-2),var(--surface))}
:where(html:not([data-sidebar-style="classic"])) .kpi.dark{--kc:#e879f9;color:var(--text);border-color:rgba(169,127,214,.32);
  background:radial-gradient(200px 140px at 0% 100%,rgba(232,121,249,.16),transparent 70%),linear-gradient(135deg,rgba(139,92,246,.24),rgba(124,77,189,.08)),var(--surface)}
:where(html:not([data-sidebar-style="classic"])) .kpi.dark .k,:where(html:not([data-sidebar-style="classic"])) .kpi.dark .s{color:var(--muted)}
:where(html:not([data-sidebar-style="classic"])) .kpi-row .kpi:nth-child(2){animation-delay:45ms}
:where(html:not([data-sidebar-style="classic"])) .kpi-row .kpi:nth-child(3){animation-delay:90ms}
:where(html:not([data-sidebar-style="classic"])) .kpi-row .kpi:nth-child(4){animation-delay:135ms}
:where(html:not([data-sidebar-style="classic"])) .kpi-row .kpi:nth-child(5){animation-delay:180ms}
:where(html:not([data-sidebar-style="classic"])) .kpi-row .kpi:nth-child(n+6){animation-delay:225ms}

/* ── الأزرار ── */
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.pager .pg-btn){display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font-weight:700;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t),filter var(--t)}
:where(html:not([data-sidebar-style="classic"])) .btn{min-height:32px;padding:6px 14px;font-size:12.5px}
:where(html:not([data-sidebar-style="classic"])) .act{min-height:34px;padding:7px 14px;font-size:12.5px}
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.pager .pg-btn):hover:not(:disabled){background:var(--glass-2);border-color:rgba(255,255,255,.2)}
:where(html:not([data-sidebar-style="classic"])) .act:hover:not(:disabled){color:var(--primary-light);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.pager .pg-btn,.btn-primary):active:not(:disabled){transform:scale(.97)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.pager .pg-btn,.btn-primary):focus-visible{outline:none;box-shadow:var(--ring)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.btn-primary) svg{flex:none}
:where(html:not([data-sidebar-style="classic"])) :where(.btn.ok,.row-btn.approve){border-color:transparent;background:linear-gradient(135deg,#059669,#34d399);color:#04170f;box-shadow:0 8px 20px -10px rgba(52,211,153,.65)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn.ok,.row-btn.approve):hover:not(:disabled){background:linear-gradient(135deg,#059669,#34d399);filter:brightness(1.08);border-color:transparent}
:where(html:not([data-sidebar-style="classic"])) :where(.btn.no,.row-btn.reject){background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn.no,.row-btn.reject):hover:not(:disabled){background:color-mix(in srgb,var(--crit) 22%,transparent);border-color:color-mix(in srgb,var(--crit) 55%,transparent)}
:where(html:not([data-sidebar-style="classic"])) .act.danger{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
:where(html:not([data-sidebar-style="classic"])) .act.danger:hover:not(:disabled){color:var(--crit);background:color-mix(in srgb,var(--crit) 22%,transparent);border-color:color-mix(in srgb,var(--crit) 55%,transparent)}
:where(html:not([data-sidebar-style="classic"])) .act.warnish:hover:not(:disabled){color:var(--warn);background:color-mix(in srgb,var(--warn) 20%,transparent);border-color:var(--warn-line)}
:where(html:not([data-sidebar-style="classic"])) .act.good:hover:not(:disabled){color:var(--good);background:color-mix(in srgb,var(--good) 20%,transparent);border-color:var(--good-line)}
:where(html:not([data-sidebar-style="classic"])) :where(.btn,.act,.row-btn,.btn-primary,.pager .pg-btn):disabled{opacity:.45;cursor:not-allowed;filter:none}
:where(html:not([data-sidebar-style="classic"])) .btn-primary{border:0;border-radius:11px;padding:10px 18px;background:var(--brand-grad);color:#fff;font-weight:700;
  box-shadow:0 10px 24px -10px rgba(168,85,247,.75),inset 0 1px 0 rgba(255,255,255,.2);
  transition:filter var(--t) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 14px 28px -10px rgba(168,85,247,.85),inset 0 1px 0 rgba(255,255,255,.22)}
:where(html:not([data-sidebar-style="classic"])) .linkish{color:var(--primary-light)}

/* ── الجداول ── */
:where(html:not([data-sidebar-style="classic"])) .tbl-wrap{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
:where(html:not([data-sidebar-style="classic"])) .data-tbl{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  animation:id-rise var(--t-slow) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .content.no-anim .data-tbl{animation:none}
/* جدول داخل بطاقة: بلا بطاقة ثانية داخلها */
:where(html:not([data-sidebar-style="classic"])) :where(.panel,.data-tbl,.hr-modal,.drawer) .tbl-wrap{background:transparent;border:0;border-radius:0;box-shadow:none}
:where(html:not([data-sidebar-style="classic"])) :is(th,td){border-bottom-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) thead th{background:rgba(255,255,255,.028);color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
:where(html:not([data-sidebar-style="classic"])) .data-tbl :is(th,td){border-bottom-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) .data-tbl thead th{background:rgba(255,255,255,.028);color:var(--muted);font-size:11.5px;letter-spacing:0;text-transform:none}
:where(html:not([data-sidebar-style="classic"])) .panel .tbl-wrap :is(th,td){border-bottom-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) .panel .tbl-wrap thead th{background:rgba(255,255,255,.028);color:var(--muted);font-size:11px;letter-spacing:0}
:where(html:not([data-sidebar-style="classic"])) tbody tr{transition:background var(--t-fast)}
:where(html:not([data-sidebar-style="classic"])) tbody tr:hover,
:where(html:not([data-sidebar-style="classic"])) .data-tbl tbody tr:hover,
:where(html:not([data-sidebar-style="classic"])) .panel .tbl-wrap tbody tr:hover{background:var(--glass)}
:where(html:not([data-sidebar-style="classic"])) .data-tbl .head{padding:16px 20px 6px}
:where(html:not([data-sidebar-style="classic"])) .mini-avatar{background:var(--glass-2);border-color:var(--line-2);color:var(--primary-light)}

/* ── الحقول: شبكة أمان بوزن صفر لكل حقل بلا تصميم (hr-input وأمثاله) ── */
:where(html:not([data-sidebar-style="classic"])) :where(.content,.hr-modal,.drawer,.login-card) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]),select,textarea):where(:not(#ccRoot *)){
  background-color:var(--surface-3);border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:8px 12px;font-family:inherit;font-size:13px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast)}
:where(html:not([data-sidebar-style="classic"])) :where(.content,.hr-modal,.drawer,.login-card) :where(input,select,textarea):where(:not(#ccRoot *)):hover:not(:focus):not(:disabled){border-color:rgba(255,255,255,.2)}
:where(html:not([data-sidebar-style="classic"])) :where(.content,.hr-modal,.drawer,.login-card) :where(input,select,textarea):where(:not(#ccRoot *)):focus{outline:none;border-color:color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:var(--ring)}
:where(html:not([data-sidebar-style="classic"])) :where(input,textarea)::placeholder{color:var(--faint);opacity:1}
:where(html:not([data-sidebar-style="classic"])) :where(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
:where(html:not([data-sidebar-style="classic"])) :where(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--primary)}
:where(html:not([data-sidebar-style="classic"])) :where(select option){background:var(--surface-2);color:var(--text)}
/* الحقول المسمّاة في app.css */
:where(html:not([data-sidebar-style="classic"])) :where(.sel,.inp,.txta){background-color:var(--surface-3);border:1px solid var(--line-2);border-radius:10px;color:var(--text);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) :where(.sel,.inp){min-height:36px;padding:7px 12px;font-size:13px}
:where(html:not([data-sidebar-style="classic"])) :where(.sel,.inp,.txta):hover:not(:focus){border-color:rgba(255,255,255,.2)}
:where(html:not([data-sidebar-style="classic"])) :where(.sel,.inp,.txta):focus{outline:none;border-color:color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:var(--ring)}
:where(html:not([data-sidebar-style="classic"])) :where(select.sel,select.inp,select.hr-input){appearance:none;-webkit-appearance:none;padding-left:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a596c4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:left 12px center;background-size:12px}
:where(html:not([data-sidebar-style="classic"])) :where(select.sel,select.inp,select.hr-input)[multiple]{background-image:none;padding-left:12px}
:where(html:not([data-sidebar-style="classic"])) :where(.fld-lbl,.field label){color:var(--muted);font-size:12.5px;font-weight:700}
:where(html:not([data-sidebar-style="classic"])) .fld-hint{color:var(--faint)}
:where(html:not([data-sidebar-style="classic"])) .hr-field-head{color:var(--primary-light);border-top-color:var(--line-2)}
:where(html:not([data-sidebar-style="classic"])) .field .box{background:var(--surface-3);border-color:var(--line-2)}
:where(html:not([data-sidebar-style="classic"])) :where(.hr-check,.perm-item){background:var(--glass);border-color:var(--line);transition:border-color var(--t-fast),background var(--t-fast)}
:where(html:not([data-sidebar-style="classic"])) :where(.hr-check,.perm-item):hover{border-color:var(--line-2)}
:where(html:not([data-sidebar-style="classic"])) :where(.hr-check.on,.perm-item.on){background:color-mix(in srgb,var(--primary) 12%,transparent);border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
:where(html:not([data-sidebar-style="classic"])) :where(.hr-check-box,.perm-box){border-color:var(--line-2);border-radius:6px}
:where(html:not([data-sidebar-style="classic"])) .hr-hint-box{background:color-mix(in srgb,var(--primary) 8%,transparent);border-color:color-mix(in srgb,var(--primary) 24%,transparent);color:var(--muted)}
/* مفاتيح التبديل */
:where(html:not([data-sidebar-style="classic"])) .switch{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 14px -8px var(--good)}
:where(html:not([data-sidebar-style="classic"])) .mini-switch{background:rgba(255,255,255,.12);transition:background var(--t) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) .mini-switch.on{background:var(--good);box-shadow:0 4px 12px -6px var(--good)}
:where(html:not([data-sidebar-style="classic"])) .mini-switch .knob{transition:transform var(--t) var(--spring);box-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ── التبويبات والمقاطع ── */
:where(html:not([data-sidebar-style="classic"])) .st-tabs{gap:4px;padding:4px;border-radius:13px;background:var(--glass);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
:where(html:not([data-sidebar-style="classic"])) .st-tabs::-webkit-scrollbar{display:none}
:where(html:not([data-sidebar-style="classic"])) .st-tab{border-radius:10px;color:var(--muted);font-weight:700;white-space:nowrap;
  transition:color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .st-tab:hover{color:var(--text);background:var(--glass)}
:where(html:not([data-sidebar-style="classic"])) .st-tab.on{background:var(--surface-3);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px -6px rgba(0,0,0,.6),inset 0 -2px 0 var(--primary)}
:where(html:not([data-sidebar-style="classic"])) .st-tab .n{background:var(--glass-2);color:var(--muted)}
:where(html:not([data-sidebar-style="classic"])) .st-tab.on .n{background:color-mix(in srgb,var(--primary) 24%,transparent);color:var(--primary-light)}
:where(html:not([data-sidebar-style="classic"])) .st-tab .n.hot{background:var(--crit);color:#fff}
:where(html:not([data-sidebar-style="classic"])) .seg-toggle{background:var(--glass);border-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) .seg{color:var(--muted);transition:color var(--t),background var(--t)}
:where(html:not([data-sidebar-style="classic"])) .seg.active{background:var(--surface-3);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* ── شرائح التصفية والشارات ── */
:where(html:not([data-sidebar-style="classic"])) :where(.chip,.toggle-chip){background:var(--glass);border:1px solid var(--line);color:var(--muted);font-weight:700;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) :where(.chip,.toggle-chip):hover{background:var(--glass-2);border-color:var(--line-2);color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) :where(.chip,.toggle-chip):active{transform:scale(.96)}
:where(html:not([data-sidebar-style="classic"])) .chip.active{background:color-mix(in srgb,var(--primary) 20%,transparent);border-color:color-mix(in srgb,var(--primary) 55%,transparent);color:#fff;
  box-shadow:0 6px 16px -10px rgba(169,127,214,.9)}
:where(html:not([data-sidebar-style="classic"])) .toggle-chip.on{background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit)}
:where(html:not([data-sidebar-style="classic"])) :where(.tag,.status-pill,.scope-tag,.review-tag,.vis){font-weight:700;letter-spacing:0}
:where(html:not([data-sidebar-style="classic"])) .tag{font-size:11px;padding:2px 9px}
:where(html:not([data-sidebar-style="classic"])) :where(.tag.good,.status-pill.paid,.vis.customer){border-color:color-mix(in srgb,var(--good) 26%,transparent)}
:where(html:not([data-sidebar-style="classic"])) :where(.tag.warn,.status-pill.pending,.vis.captain){border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
:where(html:not([data-sidebar-style="classic"])) :where(.tag.crit,.status-pill.rejected,.review-tag){border-color:color-mix(in srgb,var(--crit) 28%,transparent)}
:where(html:not([data-sidebar-style="classic"])) :where(.tag.mute,.scope-tag,.vis){background:var(--glass-2);border-color:var(--line);color:var(--muted)}
:where(html:not([data-sidebar-style="classic"])) .err{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-line);border-radius:12px}
:where(html:not([data-sidebar-style="classic"])) .quote{background:var(--glass);border-color:var(--line);border-inline-start-color:var(--primary);border-radius:12px;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .timeline::before{background:var(--line-2)}
:where(html:not([data-sidebar-style="classic"])) .tl-item::before{border-color:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
:where(html:not([data-sidebar-style="classic"])) .acc-note{background:var(--glass);border-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) .kv .k{color:var(--muted)}

/* ── الأدراج ── */
@keyframes id-scrim{from{opacity:0}}
@keyframes id-drawer{from{opacity:0;transform:translateX(36px)}}
@keyframes id-dlg{from{opacity:0;transform:translateY(14px) scale(.96)}}
:where(html:not([data-sidebar-style="classic"])) .drawer-bg{background:rgba(8,4,16,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:id-scrim var(--t) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .drawer{background:radial-gradient(600px 300px at 100% 0%,rgba(124,77,189,.14),transparent 60%),linear-gradient(180deg,var(--surface-2),var(--bg) 40%);
  border-inline-end:1px solid var(--line-2);box-shadow:0 0 0 1px rgba(255,255,255,.03),-30px 0 80px -20px rgba(0,0,0,.75);animation:id-drawer var(--t-slow) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .drawer-head{background:transparent;border-bottom:1px solid var(--line);padding:18px 22px}
:where(html:not([data-sidebar-style="classic"])) .drawer-head h2{font-size:17px;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .drawer-head .sub{color:var(--muted);font-weight:500}
:where(html:not([data-sidebar-style="classic"])) :where(.drawer-close,.hr-modal-x){width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--glass);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t) var(--ease)}
:where(html:not([data-sidebar-style="classic"])) :where(.drawer-close,.hr-modal-x):hover{background:var(--crit-bg);border-color:var(--crit-line);color:var(--crit);transform:rotate(90deg)}
:where(html:not([data-sidebar-style="classic"])) .drawer-body{padding:18px 22px 28px}
:where(html:not([data-sidebar-style="classic"])) .drawer-sec h4{display:flex;align-items:center;gap:8px;letter-spacing:0;text-transform:none;font-size:12px;color:var(--faint);font-weight:700}
:where(html:not([data-sidebar-style="classic"])) .drawer-sec h4::after{content:"";flex:1;height:1px;background:var(--line)}
:where(html:not([data-sidebar-style="classic"])) .drawer-actions{border-bottom-color:var(--line)}

/* ── النوافذ (hrModal ومن يستعملها: الصور، التأكيد، النماذج) ── */
:where(html:not([data-sidebar-style="classic"])) .hr-modal-ov{background:rgba(8,4,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:id-scrim var(--t) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .hr-modal{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg),0 40px 80px -30px rgba(0,0,0,.8);animation:id-dlg .34s var(--spring) both}
:where(html:not([data-sidebar-style="classic"])) .hr-modal-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:18px 22px}
:where(html:not([data-sidebar-style="classic"])) .hr-modal-head h3{font-size:17px;color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .hr-modal-body{padding:20px 22px 22px}
:where(html:not([data-sidebar-style="classic"])) .hr-modal-foot{border-top:1px solid var(--line)}
:where(html:not([data-sidebar-style="classic"])) .hr-modal-body img{border-radius:12px}
:where(html:not([data-sidebar-style="classic"])) .gs-ov{background:rgba(8,4,16,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:id-scrim var(--t) var(--ease) both}
:where(html:not([data-sidebar-style="classic"])) .gs-box{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--line-2);border-radius:var(--r-xl);animation:id-dlg .3s var(--spring) both}
:where(html:not([data-sidebar-style="classic"])) .gs-in{border-bottom-color:var(--line)}
:where(html:not([data-sidebar-style="classic"])) :where(.gs-row:hover,.gs-row.on){background:var(--glass-2)}
:where(html:not([data-sidebar-style="classic"])) :where(.gs-av,.gs-tag){background:var(--glass-2)}

/* ── الإشعار ── */
:where(html:not([data-sidebar-style="classic"])) .hr-toast{display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));padding:11px 16px;border-radius:13px;
  background:#0f0820;color:var(--text);border:1px solid var(--line-2);box-shadow:0 20px 40px -12px rgba(0,0,0,.7);font-weight:600;
  transition:opacity .2s var(--ease),transform .32s var(--spring);z-index:200}
:where(html:not([data-sidebar-style="classic"])) .hr-toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.18)}

/* ── التحميل: حلقة بتدرّج الهوية ونصّ يلمع؛ وعلى مستوى الصفحة هيكل
   الشاشة نفسها (عنوان + مؤشّرات + بطاقتان) يلمع حتى تصل البيانات ── */
@keyframes id-spin{to{transform:rotate(360deg)}}
@keyframes id-text-shine{to{background-position:-200% 0}}
:where(html:not([data-sidebar-style="classic"])) .spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px 20px;
  font-size:13px;font-weight:600;color:transparent;
  background:linear-gradient(90deg,var(--faint) 0%,var(--text) 45%,var(--faint) 90%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:id-text-shine 1.8s linear infinite}
:where(html:not([data-sidebar-style="classic"])) .spinner::before{content:"";width:30px;height:30px;border-radius:50%;flex:none;
  background:conic-gradient(from 90deg,transparent 0 20%,rgba(139,92,246,.9) 60%,#e879f9 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  animation:id-spin .85s linear infinite}
:where(html:not([data-sidebar-style="classic"])) #content > .spinner{align-items:stretch;justify-content:flex-start;padding:0;gap:18px;text-align:center}
:where(html:not([data-sidebar-style="classic"])) #content > .spinner::before{width:100%;height:430px;border-radius:0;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.085) 40%,rgba(255,255,255,.035) 80%) 0 0/200% 100%;
  animation:id-shimmer 1.4s linear infinite;
  -webkit-mask:var(--id-skel-mask) 0 0/100% 100% no-repeat;mask:var(--id-skel-mask) 0 0/100% 100% no-repeat}
:root{
  --id-skel-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><svg x='100%25' overflow='visible'><rect x='-290' y='0' width='290' height='30' rx='10'/><rect x='-440' y='44' width='440' height='13' rx='6.5'/></svg><rect x='0' y='88' width='23.8%25' height='106' rx='16'/><rect x='25.4%25' y='88' width='23.8%25' height='106' rx='16'/><rect x='50.8%25' y='88' width='23.8%25' height='106' rx='16'/><rect x='76.2%25' y='88' width='23.8%25' height='106' rx='16'/><rect x='0' y='210' width='59%25' height='220' rx='16'/><rect x='60.6%25' y='210' width='39.4%25' height='220' rx='16'/></svg>");
}
@media (max-width:640px){:root{
  --id-skel-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><svg x='100%25' overflow='visible'><rect x='-200' y='0' width='200' height='26' rx='9'/><rect x='-280' y='38' width='280' height='12' rx='6'/></svg><rect x='0' y='76' width='48.5%25' height='92' rx='14'/><rect x='51.5%25' y='76' width='48.5%25' height='92' rx='14'/><rect x='0' y='180' width='48.5%25' height='92' rx='14'/><rect x='51.5%25' y='180' width='48.5%25' height='92' rx='14'/><rect x='0' y='284' width='100%25' height='116' rx='14'/></svg>");
}}

/* ── الفراغ: صندوق متقطّع بأيقونة تطفو، لا سطر رمادي ضائع ── */
@keyframes id-float{50%{transform:translateY(-4px)}}
:where(html:not([data-sidebar-style="classic"])) .empty{color:var(--muted);font-size:13.5px}
:where(html:not([data-sidebar-style="classic"])) div.empty:not([style]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:40px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:rgba(255,255,255,.015);text-align:center;line-height:1.7}
:where(html:not([data-sidebar-style="classic"])) div.empty:not([style])::before{content:"";width:50px;height:50px;border-radius:16px;flex:none;
  background:color-mix(in srgb,var(--primary) 13%,transparent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a4e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13h4l2 3h6l2-3h4'/><path d='M5.5 5.5 3 13v5a1.5 1.5 0 0 0 1.5 1.5h15A1.5 1.5 0 0 0 21 18v-5l-2.5-7.5A1.5 1.5 0 0 0 17.1 4.5H6.9a1.5 1.5 0 0 0-1.4 1z'/></svg>") center/24px no-repeat;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 26%,transparent);animation:id-float 3.2s ease-in-out infinite}
:where(html:not([data-sidebar-style="classic"])) :where(.panel-body,.drawer-body,.hr-modal-body,.tbl-wrap) div.empty:not([style]){border:0;background:transparent;padding:30px 16px}

/* ── الترقيم ── */
:where(html:not([data-sidebar-style="classic"])) .pager{border-top-color:var(--line);gap:12px}
:where(html:not([data-sidebar-style="classic"])) .pager .pg-btn{min-height:34px;padding:6px 16px;font-size:12.5px}
:where(html:not([data-sidebar-style="classic"])) .pager .pg-info{color:var(--muted);font-weight:700}

/* ── معاينة الصور المصغّرة ── */
:where(html:not([data-sidebar-style="classic"])) .doc-thumb{border-color:var(--line-2);transition:transform var(--t) var(--spring),border-color var(--t),box-shadow var(--t)}
:where(html:not([data-sidebar-style="classic"])) .doc-thumb:hover{box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
:where(html:not([data-sidebar-style="classic"])) .ti-preview{border-color:var(--line-2)}

/* ── شاشة الافتتاح ── */
:where(html:not([data-sidebar-style="classic"])) .splash{background:radial-gradient(900px 560px at 70% -10%,rgba(124,77,189,.34),transparent 60%),radial-gradient(700px 480px at 10% 110%,rgba(232,121,249,.14),transparent 60%),#0d0718}
:where(html:not([data-sidebar-style="classic"])) .splash-tag{color:var(--muted);letter-spacing:0;font-weight:600}

/* ── شاشة الدخول ── */
:where(html:not([data-sidebar-style="classic"])) .login-shell{position:relative;overflow:hidden;
  background:radial-gradient(900px 560px at 80% -10%,rgba(124,77,189,.34),transparent 60%),radial-gradient(760px 520px at 8% 110%,rgba(232,121,249,.13),transparent 60%),#0d0718}
:where(html:not([data-sidebar-style="classic"])) .login-shell::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask:radial-gradient(60% 55% at 50% 45%,#000,transparent 75%);mask:radial-gradient(60% 55% at 50% 45%,#000,transparent 75%)}
:where(html:not([data-sidebar-style="classic"])) .login-card{position:relative;width:min(410px,100%);padding:34px 32px 28px;gap:15px;border-radius:26px;
  background:linear-gradient(180deg,rgba(38,25,64,.86),rgba(26,17,46,.92));border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -30px rgba(0,0,0,.85);
  animation:id-dlg .5s var(--spring) both}
:where(html:not([data-sidebar-style="classic"])) .login-brand{gap:12px;margin-bottom:10px}
:where(html:not([data-sidebar-style="classic"])) .login-logo{width:84px;height:84px;padding:9px;border-radius:30%;object-fit:contain;
  background:radial-gradient(120% 120% at 30% 15%,#fff 0%,#f1e8fc 55%,#dcc8f5 100%);
  box-shadow:0 14px 30px -12px rgba(169,127,214,.9),inset 0 -2px 0 rgba(124,77,189,.18);filter:none}
:where(html:not([data-sidebar-style="classic"])) .login-brand span{font-size:15px;font-weight:800;color:var(--text);font-family:var(--fdisplay)}
:where(html:not([data-sidebar-style="classic"])) .login-card label{color:var(--muted);font-weight:700}
:where(html:not([data-sidebar-style="classic"])) .login-card input{height:46px;padding:0 14px;border-radius:12px;font-size:15px;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text)}
:where(html:not([data-sidebar-style="classic"])) .login-card input:focus{outline:none;border-color:color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:var(--ring)}
:where(html:not([data-sidebar-style="classic"])) .login-card .btn-primary{height:46px;margin-top:4px;font-size:15px;border-radius:12px}
:where(html:not([data-sidebar-style="classic"])) .login-error{background:var(--crit-bg);border:1px solid var(--crit-line);border-radius:12px}
:where(html:not([data-sidebar-style="classic"])) .login-hint{color:var(--faint);text-align:center}
:where(html:not([data-sidebar-style="classic"])) .login-switch{color:var(--primary-light)}
:where(html:not([data-sidebar-style="classic"])) .login-sent{color:var(--muted)}

/* ── الجوال ── */
@media (max-width:980px){
  :where(html:not([data-sidebar-style="classic"])) .topbar{padding:10px 18px}
}
@media (max-width:600px){
  :where(html:not([data-sidebar-style="classic"])) .content{padding:18px 16px 60px}
  :where(html:not([data-sidebar-style="classic"])) .topbar{padding:8px 16px;min-height:56px}
  :where(html:not([data-sidebar-style="classic"])) .page-head h1{font-size:22px}
  :where(html:not([data-sidebar-style="classic"])) .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :where(html:not([data-sidebar-style="classic"])) .kpi{padding:13px 14px}
  :where(html:not([data-sidebar-style="classic"])) .kpi .v{font-size:22px}
  :where(html:not([data-sidebar-style="classic"])) .login-card{padding:28px 22px 24px}
  :where(html:not([data-sidebar-style="classic"])) #content > .spinner::before{height:400px}
}

@media (prefers-reduced-motion:reduce){
  :where(html:not([data-sidebar-style="classic"])) :where(.panel,.kpi-row .kpi,.data-tbl,.drawer,.drawer-bg,.hr-modal,.hr-modal-ov,.login-card,.gs-box,.content > .page-head){animation:none}
  :where(html:not([data-sidebar-style="classic"])) :where(.spinner,.spinner::before,div.empty::before){animation:none}
  :where(html:not([data-sidebar-style="classic"])) .spinner{color:var(--muted);background:none}
}

/* صفحة «الستايلات»: كانت محصورة بعرض 1180 فتترك فراغاً يساراً على الشاشات العريضة */
:where(html:not([data-sidebar-style="classic"])) .content > .stp{max-width:none}
:where(html:not([data-sidebar-style="classic"])) .content > .stp .stp-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* الكلاسيكي الفاتح: رموز الهوية الجديدة قيمها داكنة افتراضياً (أعلى الملف)، فمن
   يستعملها من الصفحات (‎--surface-3 --ink --line …‎) كان يرسم بقعاً داكنة على
   اللوحة الفاتحة. هنا تُحال إلى رموز الكلاسيكي نفسها كي يبقى مقبولاً. */
:root[data-sidebar-style="classic"]:not([data-theme="dark"]){
  --surface-3:var(--surface-2);
  --glass:rgba(124,77,189,.045); --glass-2:rgba(124,77,189,.085);
  --line:var(--border-soft); --line-2:var(--border);
  --ink:var(--text); --ink-2:var(--text); --ink-3:var(--muted); --ink-4:var(--faint);
  --ring:0 0 0 3px rgba(124,77,189,.25);
}

/* ============================================================
   منتقي التاريخ والوقت (identity.js) — في كل الأوضاع، لأن قاعدة الأرقام اللاتينية
   والتقويم الميلادي عامّة. الحقل صار نصّاً (data-date) فأيقونته من هنا، والمنتقي
   عنصر واحد في body فوق الأدراج والنوافذ. رموز فقط: داكن في الهوية، ويتبع
   الكلاسيكي بمظهريه.
   ============================================================ */
:root{
  --dt-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a596c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
  --dt-ico-t:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a596c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}
:root[data-sidebar-style="classic"]:not([data-theme="dark"]){
  --dt-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
  --dt-ico-t:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}
/* !important للأيقونة وحدها: حقول كثيرة تكتب background مختصراً بوزن أعلى فتمحوها */
input[data-date]{direction:ltr;text-align:right;font-variant-numeric:tabular-nums;
  padding-left:32px !important;background-image:var(--dt-ico) !important;background-repeat:no-repeat !important;
  background-position:left 10px center !important;background-size:15px 15px !important}
input[data-date="time"]{background-image:var(--dt-ico-t) !important}
input[data-date]::placeholder{direction:ltr}

@keyframes dtp-in{from{opacity:0;transform:translateY(-4px)}}
.dtp{position:fixed;z-index:10050;top:0;left:0;padding:12px;border-radius:var(--r-lg);max-width:calc(100vw - 16px);box-sizing:border-box;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--text);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);
  font-size:13px;line-height:1.2;font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;animation:dtp-in var(--t-fast) var(--ease) both}
.dtp[hidden]{display:none}
.dtp button{font:inherit;margin:0;-webkit-tap-highlight-color:transparent}
.dtp-main{display:flex;gap:10px;align-items:flex-start}
.dtp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dtp-nav{width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0;border-radius:9px;border:1px solid var(--line);
  background:var(--glass);color:var(--muted);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.dtp-nav:hover{background:var(--glass-2);color:var(--text)}
.dtp-title{flex:1;height:30px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--text);font-weight:800;font-size:14px;cursor:pointer;transition:background var(--t-fast)}
.dtp-title:hover:not(:disabled){background:var(--glass)}
.dtp-title:disabled{cursor:default}
.dtp-grid{display:grid;grid-template-columns:repeat(7,36px);gap:2px}
.dtp-grid.is-mo,.dtp-grid.is-yr{grid-template-columns:repeat(3,1fr);gap:6px;width:264px}
.dtp-wd{height:26px;display:grid;place-items:center;color:var(--faint);font-size:11.5px;font-weight:700}
.dtp-c{height:36px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);font-weight:600;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast)}
.dtp-grid.is-mo .dtp-c,.dtp-grid.is-yr .dtp-c{height:46px}
.dtp-c:hover:not(:disabled){background:var(--glass-2)}
.dtp-c.is-today{border-color:color-mix(in srgb,var(--primary) 55%,transparent);color:var(--primary-light)}
.dtp-c.is-cur{box-shadow:var(--ring)}
.dtp-c.is-sel,.dtp-c.is-sel:hover{background:var(--grad);border-color:transparent;color:#fff}
.dtp-c:disabled{color:var(--faint);opacity:.45;cursor:not-allowed}
.dtp-time{display:flex;gap:4px}
.dtp-cal + .dtp-time{border-inline-start:1px solid var(--line);padding-inline-start:10px}
.dtp-tc{display:flex;flex-direction:column}
.dtp-col{width:52px;height:256px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;scrollbar-width:none}
.dtp-col::-webkit-scrollbar{display:none}
.dtp[data-kind="time"] .dtp-col{height:220px}
.dtp-col .dtp-c{flex:none;height:32px}
.dtp-foot{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dtp-btn{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);font-weight:700;cursor:pointer;
  transition:background var(--t-fast)}
.dtp-btn:hover:not(:disabled){background:var(--glass-2)}
.dtp-btn:disabled{opacity:.45;cursor:not-allowed}
.dtp-btn.is-clr{color:var(--muted)}
.dtp-btn.is-go{margin-inline-start:auto;background:var(--grad);border-color:transparent;color:#fff}
@media (max-width:440px){
  .dtp{padding:10px}
  .dtp-grid{grid-template-columns:repeat(7,32px)}
  .dtp-grid.is-mo,.dtp-grid.is-yr{width:236px}
  .dtp-c{height:32px}
  .dtp-col{width:46px;height:232px}
}
@media (prefers-reduced-motion:reduce){
  .dtp{animation:none}
  .dtp-c,.dtp-nav,.dtp-title,.dtp-btn{transition:none}
}