/* =====================================================================
   الشكل الجديد — طبقة فوق ستايل الصفحة نفسها، بلا تعديل على المارك-أب
   ولا على app.js. تُركّب على أي صفحة بسطر <link> واحد:
       python3 tools/apply-new-theme.py apply     ← index.html
       python3 tools/apply-new-theme.py revert    ← رجوع فوري
   لا شيء هنا يحذف قواعد الأصل، بل يتجاوزها، فتبقى كل الشاشات تعمل.

   تنبيه: app.js يخفي عناصر بـ element.style.display='none'، وأي display
   بـ !important هنا يتغلّب عليه — فلا يُستخدم إلا لقاعدة إخفاء صريحة.
   ===================================================================== */
:root{
  --bg:#f6f4ee; --panel:#fdfcfa; --sunk:#efede8;
  --ink:#000; --muted:#4d4d4d; --faint:#8a8a85;
  --line:#dbd9d5; --line-soft:#e7e5e0;
  /* خلفية البطاقة: خطوة صغيرة جداً عن الورقي (أربع درجات في كل قناة) */
  --card-bg:#faf8f3;
  --ease:cubic-bezier(.22,.61,.36,1);
  --brand:#0f5c54; --brand-2:#127066; --accent:#fa541c;
  --brand-soft:#eceae4; --brand-faint:#f6f4ee; --brand-deep:#f6f4ee;
  --danger:#a23b3b;
  --shadow:none; --radius:12px;
  /* اللون المميّز يأتي من ثيم app.js نفسه (applyTheme يكتبه على <html> حسب
     اختيار المستخدم في الإعدادات)، فلا تجاوزات هنا على --brand/--accent. */
}
body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px;
}

/* ---------- تخطيط: الشريط الجانبي ← هيدر أفقي لاصق ---------- */
/* #app شبكة عليها min-height:100vh من الأصل. بصفوف تلقائية، أي صفحة
   محتواها أقصر من الشاشة (المشاريع مثلاً) توزّع الفراغ على كل الصفوف
   فيتمدّد الهيدر لتحت. تثبيت الصفوف يجعل <main> وحده يستهلك الفراغ. */
#app{
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto 1fr auto !important;
  min-width:0;
}
aside{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  background:var(--bg) !important; color:var(--ink) !important;
  position:sticky; top:0; height:auto !important; overflow:visible; z-index:30;
  padding:11px max(24px,calc((100% - 1180px)/2)) !important;
  border-bottom:1px solid var(--line);
}
.side-brand{
  margin:0 !important; padding:0 !important; flex:0 0 auto;
  display:flex; align-items:center; gap:10px; margin-inline-end:12px !important;
}
.side-brand .m{background:var(--ink) !important; border-radius:8px; width:34px; height:34px; font-size:17px}
.side-brand b{color:var(--ink) !important; font-size:16px; font-weight:600}
.side-brand span{color:var(--faint) !important; font-size:11.5px}
.nav-label,.nav-sep{display:none !important}
/* الحاويات تختفي حتى تصبح الروابط أبناءً مباشرين لصفّ الهيدر */
#nav,#collectionsNav,#requestsNav,#adminNav,#teamNav,#settingsNav{display:contents}
.nav-item{
  width:auto !important; display:inline-flex !important; gap:8px;
  padding:8px 14px !important; border-radius:999px !important;
  color:var(--muted) !important; font-size:14px; font-weight:500;
  background:none !important; white-space:nowrap; flex:0 0 auto;
}
.nav-item:hover{background:var(--sunk) !important; color:var(--ink) !important}
.nav-item.active{background:var(--brand) !important; color:#fff !important}
.nav-item .ico{font-size:15px; width:auto}
.nav-item .count{
  margin-inline-start:4px !important; background:none !important; color:inherit;
  opacity:.55; font-size:12px; padding:0 !important; font-variant-numeric:tabular-nums;
}

/* ---------- المحتوى ---------- */
main{padding:26px 24px 70px !important; max-width:1180px; margin:0 auto; width:100%}

/* ---------- شريط الأدوات العلوي ---------- */
.topbar{gap:12px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.topbar h2{font-size:26px; font-weight:600; letter-spacing:-.4px}
.topbar .sub{color:var(--muted); font-size:13px}
.search{
  border-radius:999px !important; box-shadow:none !important; background:var(--panel) !important;
  border:1px solid var(--line) !important; padding:9px 16px !important;
}
.search:focus-within{border-color:var(--brand) !important}
.add-btn{
  background:var(--brand) !important; color:#fff !important; border-radius:999px !important;
  box-shadow:none !important; padding:10px 18px !important; font-weight:600;
}
.add-btn:hover{background:var(--brand-2) !important; filter:none}
/* اللغة تُدار من الإعدادات، فلا حاجة لها في الهيدر. #langLogin في شاشة
   الدخول يبقى كما هو، فهو الطريق الوحيد قبل تسجيل الدخول. */
#langApp{display:none !important}
/* زرّ رفع مادة خرج من الهيدر إلى شريط تحت المرشّحات في صفحة كل المواد */
#pvAddBar{order:65; margin:2px 0 20px; display:flex}
#pvAddBar .add-btn{margin:0}
.lang-btn,.exit-btn,.bell-btn{
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:999px !important; box-shadow:none !important; color:var(--muted) !important;
  padding:9px 16px !important; font-weight:500;
}
.lang-btn:hover,.exit-btn:hover,.bell-btn:hover{border-color:var(--brand) !important; color:var(--brand) !important}
.topbar-greeting{
  background:var(--panel) !important; color:var(--muted) !important;
  border:1px solid var(--line); border-radius:999px; font-weight:500;
}
.bell-dot{background:var(--brand) !important}

/* ---------- الأرقام: كروت ← شريط مفصول بخطوط ---------- */
/* بلا !important على display: showScreen يضبط display:none مباشرة على العنصر
   في الشاشات غير الرئيسية، والـ !important كان يتغلّب عليه فيُظهر الشريط في كل شاشة. */
.stats{
  display:flex; flex-wrap:wrap; gap:0 !important;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:26px; background:none;
}
.stat{
  flex:1; min-width:150px; background:none !important; border:none !important;
  border-inline-start:1px solid var(--line-soft) !important; border-radius:0 !important;
  box-shadow:none !important;
  /* مسافة متساوية على جانبي الفاصل حتى لا يلتصق الرقم بالخط */
  padding:20px 22px !important;
}
.stat:first-child{border-inline-start:none !important; padding-inline-start:0 !important}
.stat .n{font-size:30px; font-weight:600; color:var(--brand) !important; letter-spacing:-1px; line-height:1.15}
.stat .l{font-size:13px; color:var(--muted)}

/* ---------- المرشّحات ---------- */
/* شريط المرشّحات: سطر واحد — الأنواع تُمرَّر أفقياً، والأدوات في الطرف */
/* بلا !important على display: app.js يخفي الشريط في الشاشات غير المكتبة
   (الإحصائيات، الطلبات، المجموعات…) بـ inline style، و!important يتغلّب عليه. */
.filters{align-items:center; gap:12px; flex-wrap:nowrap}
.f-scroll{
  display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.f-scroll::-webkit-scrollbar{display:none}
.f-tools{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.chip[data-type]{white-space:nowrap}
.chip .fc{
  font-size:11.5px; font-variant-numeric:tabular-nums;
  opacity:.55; margin-inline-start:6px;
}
.chip.active .fc{opacity:.8}
@media(max-width:760px){
  .filters{flex-wrap:wrap; row-gap:10px}
  .f-tools{flex:1 1 100%}
}

/* أيقونات موحّدة بدل الإيموجي في المحتوى */
.ml-ico{
  width:15px; height:15px; flex-shrink:0; opacity:.7;
  display:inline-block; vertical-align:-2px; margin-inline-end:6px;
}
.chip.active .ml-ico,.vtag .ml-ico{opacity:.9}
.chip{display:inline-flex; align-items:center}
.vtag{display:inline-flex; align-items:center}
.vtag .ml-ico{width:12px; height:12px; margin-inline-end:4px}

.chip{
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  color:var(--muted); font-size:13.5px; font-weight:500; padding:7px 15px;
}
.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.active{background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important}
.active-filter{
  background:var(--panel) !important; box-shadow:none !important;
  border:1px solid var(--line) !important; border-radius:12px !important;
}
.active-filter .clear{background:var(--sunk) !important; border-radius:999px !important}

/* ---------- كروت المواد ---------- */
.grid{gap:30px 22px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); align-items:start}
.card{
  /* تمييز في أدنى حدّ: لا حدّ ولا إطار — فرق خلفية بالكاد يُلحظ
     (الورقي #f6f4ee مقابل السطح #fdfcfa) وظلّ بمقدار ٢٪ لا أكثر. */
  background:var(--card-bg) !important; border:none !important;
  border-radius:14px !important; box-shadow:0 1px 2px rgba(0,0,0,.015) !important;
  overflow:hidden !important; padding:7px !important;
  display:grid !important; grid-template-rows:auto auto auto; grid-template-columns:100%;
  transition:box-shadow .18s;
}
.card>.thumb{grid-row:1; grid-column:1}
.card>.card-body{grid-row:2; grid-column:1}
/* عند المرور: الإشارة الأساسية هي تعتيم الغلاف؛ الظلّ يزيد بالقليل فقط */
.card:hover{
  transform:none !important;
  box-shadow:0 1px 4px rgba(0,0,0,.035) !important;
}
/* ترتيب المحتوى: التاريخ ← العنوان ← الوسوم (بلا تعديل على app.js) */
.card>.card-body{display:flex !important; flex-direction:column; padding:11px 7px 6px !important}
.card-body .card-meta{order:-1; margin:0 0 6px !important; padding:0 !important}
.card-body h4{order:0}
.card-body .tags{order:1}
.thumb{
  height:auto !important; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:var(--sunk) !important; position:relative;
}
.card:hover .thumb{filter:brightness(.96)}
.badge{
  background:rgba(0,0,0,.72) !important; border-radius:999px; font-size:11px;
  font-weight:500; padding:3px 9px; backdrop-filter:blur(4px);
}
.card-body{padding:10px 2px 0 !important}
.card-body h4{font-size:17px; font-weight:600; line-height:1.5; letter-spacing:-.2px}
.card:hover .card-body h4{color:var(--brand)}
.card-meta{font-size:12.5px; color:var(--muted)}
.tags{gap:6px; margin:8px 0 0}
.tag{
  background:var(--panel) !important; color:var(--muted) !important;
  border:1px solid var(--line); border-radius:999px; font-size:11.5px; padding:2px 10px;
}
.tag:hover,.tag.on{background:var(--brand) !important; color:#fff !important; border-color:var(--brand)}
.vtag{border:1px solid var(--line); border-radius:999px; font-size:11.5px; padding:2px 10px; font-weight:500}
.vtag.on{box-shadow:0 0 0 2px var(--brand)}
/* أزرار البطاقة تطفو فوق الغلاف عند المرور — كما في ثمانية */
/* الأزرار تتراكب فوق خانة الغلاف نفسها (نفس صف الشبكة) وتظهر عند المرور */
.card>.card-actions{
  grid-row:1; grid-column:1; align-self:end; z-index:2;
  margin:9px; border-top:none !important; padding:0 !important; gap:6px;
  opacity:0; transform:translateY(4px); transition:.16s;
}
.card:hover .card-actions,.card:focus-within .card-actions{opacity:1; transform:none}
/* تدرّج خفيف أسفل الغلاف حتى تُقرأ الأزرار فوق الصور الفاتحة */
.thumb::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.28),transparent);
  opacity:0; transition:.16s;
}
.card:hover .thumb::after{opacity:1}
.act{
  background:rgba(255,255,255,.96) !important; border-radius:8px !important;
  border:1px solid rgba(0,0,0,.06) !important;
  font-size:12px; font-weight:500; padding:6px 8px !important; backdrop-filter:blur(6px);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.act:hover{background:var(--brand) !important; color:#fff !important}

/* ---------- الأسطح العامة: بلا ظلال، بحدود شعرية ---------- */
.thread,.settings-panel,.impact-card,.stat-card,.col-card,.ind-panel,.bell-panel,.modal,
.log-filters,.month-picker,.req-fields{
  box-shadow:none !important; border:1px solid var(--line) !important;
  background:var(--panel) !important; border-radius:12px !important;
}
.modal{border-radius:16px !important; box-shadow:0 24px 60px rgba(0,0,0,.16) !important}
.overlay{background:rgba(0,0,0,.42) !important}
.btn{background:var(--brand) !important; color:#fff !important; border-radius:999px !important; font-weight:600}
.btn:hover{background:var(--brand-2) !important}
.btn.ghost{
  background:var(--panel) !important; color:var(--muted) !important;
  border:1px solid var(--line) !important;
}
.btn.ghost:hover{border-color:var(--ink) !important; color:var(--ink) !important}
.field input,.field select,.field textarea{border-radius:10px; background:var(--panel)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand) !important; box-shadow:none !important}
h2,h3,h4{letter-spacing:-.2px}
.stat-n,.impact-n{color:var(--ink) !important}
.link-back{color:var(--muted)}
.notif.unread{background:var(--sunk) !important}

/* ---------- شاشة الدخول ---------- */
#login{background:var(--bg) !important}
.login-card{
  box-shadow:none !important; border:1px solid var(--line); border-radius:16px;
  background:var(--panel) !important;
}
.brand-mark{background:var(--brand) !important; border-radius:10px}
.lang-switch-login{
  background:var(--panel) !important; color:var(--muted) !important;
  border:1px solid var(--line) !important;
}

/* =====================================================================
   بنية الصفحة كما في المقترح الأولي: هيدر بصفّين، بانر، أقسام
   (أحدث المواد ١٢ + عرض الجميع، المبادرات، المشاريع، الطلبات)، فوتر.
   ===================================================================== */
aside{
  /* لا يتمدّد مهما فعلت الشبكة، ويبقى لاصقاً أعلى الصفحة */
  align-self:start; height:auto !important; overflow:visible;
  flex-direction:column; align-items:stretch; gap:0; min-width:0;
  padding:0 max(24px,calc((100% - 1180px)/2)) !important;
}
/* صفّ واحد: الاسم ← الروابط ← فراغ ← البحث والأدوات وقائمة المستخدم */
.hdr-top{
  display:flex; align-items:center; gap:12px; width:100%; min-width:0;
  min-height:72px; flex-wrap:wrap;
}
.hdr-top .sp{flex:1; min-width:0}
.hdr-nav{
  display:flex; align-items:center; gap:2px; flex:0 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.hdr-nav::-webkit-scrollbar{display:none}
/* البحث ٤٠px مثل بقية العناصر: app.js يخفيه خارج شاشة المكتبة، وكان
   أطولها (٤٤px) فيقصر الهيدر ٣px عند الانتقال. الآن الارتفاع ثابت. */
.hdr-top .search{
  flex:0 1 230px; min-width:150px; height:40px; padding:0 16px !important;
  /* الحركة على flex-basis بين طولين صريحين (٢٣٠←٤٢٠). القيمة auto وتغيير
     flex-grow لا يقبلان الحركة أصلاً، وذلك كان سبب القفزة. */
  transition:flex-basis .3s var(--ease), border-color .22s ease;
}
.side-brand{min-height:40px}
/* عند التركيز على البحث: يتمدّد ليأخذ فراغ السطر، وتُطوى الأيقونات */
/* على الحاسب يتمدّد إلى ٤٢٠px فيأكل الفراغ المرن تدريجياً؛ وعلى الهاتف
   flex-grow=1 أصلاً فيتّسع من نفسه بانكماش الأيقونات. */
@media(min-width:621px){
  .hdr-top.searching .search{flex-basis:420px}
}
.hdr-top.searching .search{border-color:var(--brand) !important}
.hdr-top .bell-wrap,.hdr-top .pv-user,.hdr-top .add-btn{
  max-width:60px;
  transition:max-width .3s var(--ease),
             opacity .2s ease .12s,
             transform .3s var(--ease),
             margin-inline-start .3s var(--ease);
}
.hdr-top.searching .bell-wrap,
.hdr-top.searching .pv-user,
.hdr-top.searching .add-btn{
  opacity:0; max-width:0; transform:scale(.9);
  margin-inline-start:-12px;      /* يغلق فجوة الـ gap تدريجياً (gap لا يقبل الحركة) */
  pointer-events:none;
  transition:opacity .16s ease,
             max-width .3s var(--ease) .06s,
             transform .22s var(--ease),
             margin-inline-start .3s var(--ease) .06s;
}
.side-brand{margin-inline-end:4px !important}

/* الترتيب داخل المحتوى */
main{display:flex; flex-direction:column; min-width:0}
/* الترتيب بفواصل عشرة: يبقى فيه متّسع لإدخال قسم بين قسمين لاحقاً.
   طلبات صاحب الحساب فوق الأرقام — هي ما يعنيه أولاً عند فتح الصفحة. */
.topbar{order:0; border-bottom:none !important; padding-bottom:0 !important}
#previewHero{order:10}
#secRequests{order:20}
.stats{order:30}
#sheadLatest{order:40}
.filters{order:50}
.active-filter{order:60}
#grid{order:70}
#secInitiatives{order:80}
#secProjects{order:90}
#logView,#usersView,#tagsView,#settingsView,#collectionsView,#collectionDetail,
#requestsView,#reqDetailView,#statsView,#statsAdminView{order:100}
/* على شاشة المكتبة العناوين تكفي، فلا حاجة لعنوان الصفحة */
main.lib .topbar{display:none !important}
/* صفحة كل المواد: عنوان الصفحة يظهر كما في المشاريع والطلبات */
main.lib.allmode .topbar{display:flex !important}

/* ---------- البانر ---------- */
#previewHero{
  position:relative; overflow:hidden; border-radius:12px; color:#fff;
  background:var(--brand-deep);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  padding:42px 44px; min-height:228px; display:flex; flex-direction:column; justify-content:center;
  margin-bottom:30px;
}
#previewHero::after{
  content:""; position:absolute; inset-inline-start:-8%; top:-45%; width:56%; height:190%;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
#previewHero>*{position:relative; z-index:1}
#previewHero .k{font-size:12.5px; font-weight:600; letter-spacing:.6px; color:rgba(255,255,255,.78); margin-bottom:12px}
#previewHero h1{font-size:33px; font-weight:600; line-height:1.35; max-width:20ch; letter-spacing:-.4px}
#previewHero p{color:rgba(255,255,255,.72); font-size:15.5px; margin-top:10px; max-width:48ch}
#previewHero .cta{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
#previewHero .cta button{border-radius:999px; padding:11px 22px; font-size:14.5px; font-weight:600; border:none; cursor:pointer}
#previewHero .cta .a1{background:#fff; color:var(--brand)}
#previewHero .cta .a2{background:none; color:#fff; border:1px solid rgba(255,255,255,.32); font-weight:500}

/* ---------- عناوين الأقسام ---------- */
.shead{display:flex; align-items:flex-end; gap:14px; margin:6px 0 16px}
.shead h3{font-size:24px; font-weight:600; letter-spacing:-.3px; line-height:1.25}
.shead .more{
  margin-inline-start:auto; font-size:14px; color:var(--muted); font-weight:500;
  background:none; border:none; cursor:pointer; font-family:inherit; padding:4px 0;
}
.shead .more:hover{color:var(--brand)}
/* خط خفيف يفصل كل قسم عن الذي قبله في الصفحة الرئيسية */
#secInitiatives,#secProjects,#secRequests{
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line-soft);
}
/* «طلباتي» يأتي فوق «آخر المواد» (order:20 قبل 40)، وكان عنوان المواد
   يلتصق بصندوق الطلبات. المسافة تُضاف تحته — وتختفي معه إذا لم تكن
   للمستخدم طلبات، فلا تبقى فجوة معلّقة. */
#secRequests{ margin-bottom:38px }

/* ---------- سقف ١٢ مادة على الصفحة ---------- */
#grid.capped .card:nth-child(n+13){display:none !important}

/* ---------- صفوف المجموعات ---------- */
.rail{display:flex; gap:18px; overflow-x:auto; padding-bottom:12px; scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.rail .col{flex:0 0 180px; cursor:pointer; border:none; background:none; padding:0; text-align:start; font:inherit}
.rail .col .sq{
  aspect-ratio:1; border-radius:12px; background:var(--sunk); overflow:hidden;
  display:grid; place-items:center; font-size:38px; margin-bottom:10px;
}
.rail .col .sq img{width:100%; height:100%; object-fit:cover}
.rail .col:hover .sq{filter:brightness(.96)}
.rail .col b{display:block; font-size:15px; font-weight:600; line-height:1.5}
.rail .col:hover b{color:var(--brand)}
.rail .col span{font-size:12.5px; color:var(--muted)}
.rail .empty{padding:26px 0; font-size:14px}

/* ---------- شاشة المجموعات: كروت مسطّحة مربّعة ---------- */
.col-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important; gap:28px 20px !important}
.col-card{background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important}
.col-card:hover{transform:none !important; box-shadow:none !important}
.col-card .thumb{height:auto !important; aspect-ratio:1; border-radius:12px}
.col-card-body{padding:10px 2px 0 !important}
.col-card-body h4{font-size:16px !important; font-weight:600 !important}
.col-card:hover .col-card-body h4{color:var(--brand)}
.col-cover{border-radius:12px}

/* ---------- الجداول (الطلبات + السجل): مسطّحة بخط شعري ---------- */
.log-wrap{background:none !important; border:none !important; border-radius:0 !important; box-shadow:none !important}
.log-table th{
  background:none !important; color:var(--faint) !important; font-weight:500 !important;
  font-size:12.5px !important; text-transform:none !important; letter-spacing:0 !important;
  padding:0 12px 10px !important; border-bottom:1px solid var(--line) !important;
}
.log-table td{padding:14px 12px !important; border-bottom:1px solid var(--line-soft) !important}
.log-table tbody tr:hover{background:none !important}
.log-table tbody tr:hover td{background:var(--panel) !important}
.log-table tbody tr:last-child td{border-bottom:1px solid var(--line-soft) !important}
.req-status{
  background:none !important; padding:0 !important; font-weight:500 !important; font-size:12.5px !important;
  display:inline-flex; align-items:center; gap:7px;
}
.req-status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; display:block}
.req-status.submitted{color:#6b6a66 !important}
.req-status.in_progress{color:var(--brand) !important}
.req-status.done{color:#2f7a3f !important}
.req-status.cancelled{color:#a23b3b !important}
/* ---------- شاشة الإحصائيات ---------- */
.stats-updated{
  background:none !important; color:var(--muted) !important; padding:0 !important;
  font-size:13px !important; font-weight:500 !important; border-radius:0 !important;
}
/* السنوات: أقسام يفصلها خط شعري، كأقسام الصفحة الرئيسية */
.stat-sec{
  font-size:21px !important; font-weight:600 !important; letter-spacing:-.2px;
  margin:30px 0 16px !important; padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.stat-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important; gap:16px !important}
.stat-card{
  background:var(--card-bg) !important; border:none !important; border-radius:14px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.015) !important; padding:18px 16px !important;
}
.stat-emoji{font-size:22px !important; opacity:.9}
.stat-n{font-size:27px !important; font-weight:600 !important; color:var(--ink) !important; letter-spacing:-.6px}
.stat-l{font-size:12.5px !important; color:var(--muted) !important}

/* الإحصائيات الشاملة: كتلة واحدة معبّأة باللون المميّز — لا تُشبه سنةً من السنوات */
.stat-sec.total-sec{
  border-top:none !important; padding-top:0 !important; margin:8px 0 0 !important;
  color:#fff !important; font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:.7px; text-transform:uppercase;
  background:var(--brand); border-radius:14px 14px 0 0;
  padding:16px 20px 0 !important;
}
.stat-grid.total{
  background:var(--brand); border-radius:0 0 14px 14px;
  padding:14px 20px 20px !important; margin-bottom:var(--s6, 34px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:8px !important;
}
.stat-grid.total .stat-card{
  background:none !important; box-shadow:none !important; border-radius:0 !important;
  padding:12px 10px !important; position:relative;
}
.stat-grid.total .stat-card+.stat-card::before{
  content:""; position:absolute; inset-block:16%; inset-inline-start:0;
  width:1px; background:rgba(255,255,255,.22);
}
/* الإيموجي على خلفية معبّأة يخرج مربّعات بيضاء غير مقروءة — يُخفى هنا،
   والرقم واسمه هما المقصود في الكتلة الشاملة (وهذا يزيدها تميّزاً). */
.stat-grid.total .stat-emoji{display:none}
.stat-grid.total .stat-n{color:#fff !important; font-size:31px !important}
.stat-grid.total .stat-l{color:rgba(255,255,255,.75) !important}

.col-add-bar{margin-bottom:16px}

/* ---------- الفوتر ---------- */
#previewFooter{
  border-top:1px solid var(--line); margin-top:34px; font-size:13.5px; color:var(--muted);
  padding:30px max(24px,calc((100% - 1180px)/2)) 44px;
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
}
#previewFooter .fl{display:flex; gap:18px; flex-wrap:wrap}
#previewFooter button{background:none; border:none; font:inherit; color:inherit; cursor:pointer; padding:0}
#previewFooter button:hover{color:var(--brand)}
#previewFooter .fine{margin-inline-start:auto; font-size:12.5px; color:var(--faint)}

/* =====================================================================
   الهيدر: بلا شعار، بلا إيموجي، أربعة روابط فقط، وقائمة المستخدم.
   ===================================================================== */
/* لا شعار — لا في الهيدر ولا في لوحة الدخول */
.side-brand .m,.brand-mark{display:none !important}
.login-card h1{margin-top:2px}
/* لا إيموجي في روابط الهيدر */
.hdr-nav .nav-item .ico{display:none !important}
.hdr-nav .nav-item[data-cat="all"] .count{display:none !important}
/* .nav-item فيها display:inline-flex !important، فالإخفاء يحتاج قاعدة بنفس القوة
   لا مجرد element.style.display='none' */
.hdr-nav .nav-item.pv-hide{display:none !important}
.hdr-nav .nav-item{padding:8px 13px !important}

/* أيقونات SVG بدل الإيموجي */
.search svg,.bell-btn svg{flex-shrink:0; opacity:.55}
.bell-btn{display:inline-flex; align-items:center; justify-content:center; padding:9px 12px !important}
.bell-btn:hover svg{opacity:1}

/* ---------- قائمة المستخدم ---------- */
.pv-user{position:relative; flex:0 0 auto}
.pv-ava{
  width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  background:var(--brand-faint); color:var(--brand); font-size:12.5px; font-weight:600;
  letter-spacing:.3px; cursor:pointer; display:grid; place-items:center; font-family:inherit;
}
.pv-ava:hover,.pv-user.open .pv-ava{border-color:var(--brand); color:var(--brand)}
.pv-menu{
  display:none; position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  width:min(268px,88vw); background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.13); padding:8px; z-index:70;
}
.pv-user.open .pv-menu{display:block}
.pv-menu-hd{padding:10px 11px 12px; border-bottom:1px solid var(--line); margin-bottom:6px}
.pv-menu-hd #greeting{
  background:none !important; border:none !important; padding:0 !important;
  color:var(--ink) !important; font-size:14px; font-weight:600; display:block !important;
}
.pv-menu-hd .pv-mail{font-size:12px; color:var(--faint); margin-top:3px; direction:ltr; text-align:start; word-break:break-all}
.pv-items{display:flex; flex-direction:column; gap:2px}
/* روابط التنقّل المنقولة إلى القائمة تُعرض كصفوف */
.pv-menu .nav-item{
  width:100% !important; display:flex !important; justify-content:flex-start;
  border-radius:9px !important; padding:9px 11px !important; font-size:13.5px;
}
.pv-menu .nav-item .ico{display:inline-block !important; font-size:14px; width:20px; opacity:.75}
.pv-menu .nav-item.active{background:var(--brand-soft) !important; color:var(--brand) !important}
.pv-foot{border-top:1px solid var(--line); margin-top:6px; padding-top:6px}
.pv-foot .exit-btn{
  width:100%; text-align:start; border:none !important; border-radius:9px !important;
  padding:9px 11px !important; color:var(--danger) !important; font-size:13.5px; background:none !important;
}
.pv-foot .exit-btn:hover{background:var(--sunk) !important; color:var(--danger) !important}

/* =====================================================================
   المقاسات — مفحوصة على 1440 / 1280 / 1024 / 768 / 430 / 375
   ===================================================================== */

/* حاويةُ flex تلتفّ قبل أن تضيق، فدون ١٠٠٠ تنزل الروابط سطراً كاملاً
   بدل أن تلتفّ دائرة المستخدم وحدها (كان الهيدر يقفز إلى ٩٣ بكسل). */
@media(max-width:1000px){
  .hdr-nav{order:9; flex:1 1 100%; padding-bottom:7px}
  .hdr-top .search{flex:0 1 200px}
}

/* لوحي: مسافات أقرب وسطران للهيدر */
@media(max-width:900px){
  /* index.html يحوّل <aside> تحت ٨٢٠ إلى درج منزلق بعرض ٢٥٠px مع زرّ ☰.
     لا درج في هذا الشكل — الهيدر أفقي في كل المقاسات، فتُبطل تلك القواعد. */
  aside{
    position:sticky !important; inset-inline-start:auto !important;
    inset-inline-end:auto !important; width:auto !important;
    z-index:30 !important; transition:none !important;
  }
  .menu-toggle{display:none !important}
  .hdr-top{min-height:0 !important; padding:9px 0 !important; row-gap:8px; column-gap:8px}
  .lang-btn,.add-btn{padding:8px 13px !important; font-size:13px}
  /* الدائرة قد تقع في وسط السطر، فتُربط القائمة بالهيدر لا بالدائرة */
  .pv-user{position:static}
  .pv-menu{top:calc(100% - 4px); inset-inline:16px; width:auto; max-width:none}
  main{padding:18px 16px 40px !important}
  #previewHero{padding:28px 22px; min-height:0}
  #previewHero h1{font-size:25px; max-width:none}
  #previewHero p{font-size:14.5px}
  .shead h3{font-size:20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important; gap:22px 14px}
  .rail .col{flex:0 0 150px}
  #previewFooter{padding:26px 16px 40px}
}

/* هاتف: عمودان ثابتان، وشريط أرقام ٢×٢ بفواصل داخلية نظيفة */
@media(max-width:620px){
  .menu-toggle{display:none !important}
  /* حواشي الهيدر ١٦px كحواشي المحتوى: كان الفارق بكسلاً واحداً فقط
     (٣٢٨ مطلوبة مقابل ٣٢٧ متاحة) فتنزل الدائرة سطراً وحدها. */
  aside{padding-inline:16px !important}
  /* لا يأخذ الاسم السطر كاملاً، حتى يجاوره البحث والأيقونات */
  .side-brand{flex:0 1 auto; min-width:0}
  .side-brand span{display:none}                 /* سطر "المكتبة الرقمية" يوفّر ارتفاعاً */
  .hdr-top .sp{display:none}                     /* الفراغ المرن بلا معنى عند الالتفاف */
  .hdr-top .search{flex:1 1 110px; min-width:96px; padding:0 12px !important}
  .side-brand b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
  .grid{grid-template-columns:1fr 1fr !important; gap:20px 12px}
  .card>.card-body{padding:9px 5px 4px !important}
  .card-body h4{font-size:15px}
  /* بلا !important: showScreen يضبط display:none على العنصر في الشاشات
     غير الرئيسية، والـ !important هنا كان يتغلّب عليه فيظهر الشريط في كل
     شاشة على الهاتف (نسخة النطاق العريض صُحّحت من قبل، وهذه بقيت). */
  .stats{display:grid; grid-template-columns:1fr 1fr}
  .stat{min-width:0; padding:15px 14px !important; border-inline-start:none !important}
  .stat:first-child{padding-inline-start:14px !important}
  .stat:nth-child(2n){border-inline-start:1px solid var(--line-soft) !important}
  .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .stat .n{font-size:24px}
  #previewHero{padding:24px 18px}
  #previewHero h1{font-size:22px}
  #previewHero .cta button{padding:10px 16px; font-size:13.5px}
  .rail .col{flex:0 0 132px}
  #previewFooter{gap:14px}
  #previewFooter .fine{margin-inline-start:0; flex:1 1 100%}
}

/* هواتف صغيرة جداً فقط: الأرقام عمود واحد. أعرض من ذلك تبقى ٢×٢ لأن
   الأرقام قصيرة، وعمود واحد كان يمدّ الصفحة بلا داعٍ. زرّ اللغة يبقى
   ظاهراً في كل المقاسات — هو تحكّم أساسي في منصة ثنائية اللغة. */
/* هواتف ضيقة جداً (٣٢٠px): البحث يصغر إلى قرص صغير حتى يبقى السطر واحداً
   — وهو يتمدّد عند النقر عليه على أي حال. */
@media(max-width:340px){
  .hdr-top .search{flex:1 1 80px; min-width:72px}
}

@media(max-width:330px){
  .stats{grid-template-columns:1fr}
  .stat:nth-child(2n){border-inline-start:none !important}
  .stat:nth-child(n+2){border-top:1px solid var(--line-soft)}
}

/* =====================================================================
   حركات انتقالية خفيفة — تُلغى كلها لمن يطلب تقليل الحركة من نظامه
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @keyframes pvIn{
    from{opacity:0; transform:translateY(7px)}
    to{opacity:1; transform:none}
  }
  @keyframes pvFade{ from{opacity:0} to{opacity:1} }

  /* الانتقال بين الشاشات: المحتوى يظهر صاعداً قليلاً */
  main.pv-anim > .topbar{animation:pvIn .24s cubic-bezier(.22,.61,.36,1) both}
  /* الظهور المتتابع: التأخير يُكتب من الـ JS على كل عنصر */
  /* الحاوية المُعلَّمة تُخفي أبناءها حتى تبدأ الحركة */
  .pv-hold > *{opacity:0}
  @keyframes pvSeq{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
  .pv-seq{animation:pvSeq .24s cubic-bezier(.22,.61,.36,1) both}
  /* تغيير التصنيف: الشبكة وحدها تُعاد بلطف */
  #grid.pv-anim{animation:pvFade .22s ease both}
  /* القائمة المنسدلة */
  .pv-user.open .pv-menu{animation:pvIn .16s ease both}
  /* التمرير داخل صفوف المجموعات وإلى الأقسام */
  html{scroll-behavior:smooth}
  .rail{scroll-behavior:smooth}
}

/* انتقالات دقيقة للعناصر التفاعلية */
.nav-item,.chip,.tag,.vtag,.act,.btn,.add-btn,.bell-btn,.pv-ava,
.shead .more,.rail .col b,.card-body h4,#previewFooter button{
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}
.rail .col .sq,.thumb{transition:filter .18s ease}
.pv-menu .nav-item{transition:background-color .14s ease, color .14s ease}

/* من يطلب تقليل الحركة من نظامه: لا انتقالات في الهيدر ولا في البطاقات */
@media (prefers-reduced-motion: reduce){
  .hdr-top .search,.hdr-top .bell-wrap,.hdr-top .pv-user,.hdr-top .add-btn,
  .card,.thumb,.rail .col .sq{transition:none !important}
}

/* =====================================================================
   اللون المميّز في كل شيء — نفس ضبط لوحة الميديا
   ===================================================================== */
:root{accent-color:var(--brand)}                 /* مربّعات الاختيار والراديو */
::selection{background:var(--brand-soft); color:var(--brand)}
input,textarea,select{caret-color:var(--brand)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

/* =====================================================================
   حركات لطيفة في كل المكتبة — كلها داخل prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @keyframes pvPop{from{opacity:0; transform:translateY(9px) scale(.995)} to{opacity:1; transform:none}}

  /* النوافذ */
  .overlay.show{animation:pvFade .18s ease both}
  .overlay.show .modal{animation:pvPop .24s var(--ease) both}
  .bell-panel.show{animation:pvPop .16s var(--ease) both}

  /* بطاقات المواد تظهر بتتابع خفيف عند تغيير التصنيف أو دخول الشاشة */
  #grid.pv-anim .card{animation:pvPop .3s var(--ease) both}
  #grid.pv-anim .card:nth-child(1){animation-delay:0ms}
  #grid.pv-anim .card:nth-child(2){animation-delay:30ms}
  #grid.pv-anim .card:nth-child(3){animation-delay:60ms}
  #grid.pv-anim .card:nth-child(4){animation-delay:90ms}
  #grid.pv-anim .card:nth-child(5){animation-delay:115ms}
  #grid.pv-anim .card:nth-child(6){animation-delay:140ms}
  #grid.pv-anim .card:nth-child(n+7){animation-delay:160ms}

  /* صفوف المجموعات والطلبات */
  .rail .col{animation:pvFade .28s ease both}
  #secRequests .req-row{animation:pvFade .26s ease both}

  /* ضغط الأزرار */
  .btn:active,.add-btn:active,.chip:active,.act:active,.tag:active,
  .nav-item:active,.shead .more:active,.hs-open:active{transform:scale(.97)}
  .btn,.add-btn,.act,.tag,.shead .more{transition:transform .12s var(--ease),
    background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease)}

  /* الجداول والصفوف */
  .log-table tbody tr,.sugg-row,.col-card{transition:background-color .16s var(--ease),
    border-color .16s var(--ease), box-shadow .16s var(--ease)}
}

/* =====================================================================
   التعديل بالنقر على البطاقة، والحذف داخل شاشة التعديل
   ===================================================================== */
.card.pv-editable{cursor:pointer}
/* زرّ الحذف في شاشة التعديل: لا يزاحم الحفظ، ولونه لون التحذير.
   `.btn` في الصفحة عرضها ١٠٠٪ (زرّ الدخول)، و`.modal-actions .btn{flex:1}`
   هو ما يضبط البقيّة — فبلا `width:auto` يتمدّد الحذف على الفراغ كلّه. */
#uploadOverlay .modal-actions #pvDelItem{
  flex:0 0 auto !important; width:auto !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  white-space:nowrap; padding:13px 18px !important;
  background:none !important; color:var(--danger,#a23b3b) !important;
  border:1px solid var(--line) !important;
}
#uploadOverlay .modal-actions #pvDelItem:hover{border-color:var(--danger,#a23b3b) !important; background:#fbe6e6 !important}
#uploadOverlay .modal-actions #pvDelItem .ml-ico{opacity:.9}

/* طاقم الأيقونات في الأزرار */
.act .ml-ico,.btn .ml-ico,.mini .ml-ico{
  width:15px; height:15px; margin-inline-end:6px; margin-block:0; opacity:.8;
}
.pv-ico-only{display:inline-grid !important; place-items:center; line-height:0}
.pv-ico-only .ml-ico{margin:0 !important; width:16px; height:16px}

/* =====================================================================
   طلباتي في الرئيسية: صفوف بسطرين ونقطة حالة — كصفوف لوحة الميديا
   ===================================================================== */
/* أرضية اللوح: خطوة واحدة عن الورقي بالكاد تُلحظ — نفس درجة ألواح اللوحة */
#secRequests .box{
  background:#faf9f4; border:1px solid var(--line-soft);
  border-radius:14px; padding:6px 14px 8px;
}
#secRequests .pv-req-list{display:flex; flex-direction:column}
#secRequests .inc-row{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:10px 6px; border-bottom:1px solid var(--line-soft);
  border-radius:8px;
  transition:background-color .16s var(--ease);
}
#secRequests .inc-row:last-child{border-bottom:none}
#secRequests .inc-row:hover{background:var(--panel)}
#secRequests .inc-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--muted)}
#secRequests .inc-dot.submitted{background:var(--brand)}
#secRequests .inc-dot.in_progress{background:#9a6a12}
#secRequests .inc-dot.done{background:#2f7a3f}
#secRequests .inc-dot.cancelled{background:var(--danger)}
#secRequests .inc-mid{flex:1; min-width:0}
#secRequests .inc-l1{display:block; font-size:13.5px; font-weight:600; line-height:1.4}
#secRequests .inc-who{display:block; font-size:12px; color:var(--faint)}
#secRequests .inc-right{flex-shrink:0}
#secRequests .req-status{
  background:none !important; padding:0 !important; font-size:12.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
}
#secRequests .req-status::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor; display:block;
}
/* لا درج جانبي في هذا الشكل: زرّ ☰ مخفيّ في كل المقاسات، وبوزن يكفي
   لئلا تغلبه قاعدة صنف واحد لاحقة (وقع ذلك مع .pv-ico-only) */
.topbar .menu-toggle{display:none !important}

/* شريط المرشّحات: ارتفاع واحد لكل عناصره.
   كانت ثلاثة ارتفاعات في سطر واحد — القرص ٣٧ والقائمة ٣٣ ومدى التاريخ ٤٠:
   القائمة `<select>` تحمل صنف `chip` أيضاً، وعنصر flex منها يفقد سطر النصّ
   فيقصر؛ ومدى التاريخ يحمل حقلَي إدخال داخل حشوته فيطول. */
#filters .chip{min-height:37px}
#filters .date-chip{padding-block:0 !important}

/* =====================================================================
   المشاريع والمبادرات — البطاقة الأغنى (المقترح أ)
   الغلاف ١٦:٩، وسطرٌ مختصر (المدّة · القرى · المواد)، ورقمان من أرقام
   الأثر أسفل خطٍّ شعري. بلا شارة حالة.
   ===================================================================== */
.col-grid{grid-template-columns:repeat(auto-fill,minmax(258px,1fr)) !important; gap:16px !important}
.col-card{
  background:var(--panel) !important; border:1px solid var(--line-soft) !important;
  border-radius:14px !important; overflow:hidden !important; padding:0 !important;
  transition:border-color .16s var(--ease) !important;
}
.col-card:hover{border-color:var(--brand) !important}
.col-card .thumb{aspect-ratio:16/9 !important; border-radius:0 !important; height:auto !important}
.col-card-body{padding:13px 14px 14px !important}
.col-card-body h4{font-size:15.5px !important; font-weight:600 !important; line-height:1.4}
.col-meta-line{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:12px; color:var(--faint)}
.col-meta-line > span{display:inline-flex; align-items:center; gap:6px}
.col-i{width:13px !important; height:13px !important; margin:0 !important; opacity:.55}
.col-figs{
  display:flex; margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft);
}
.col-figs .cf{flex:1; min-width:0; padding-inline-end:10px}
.col-figs .cf + .cf{border-inline-start:1px solid var(--line-soft); padding-inline-start:12px; padding-inline-end:0}
.col-figs .cf b{
  display:block; font-size:17px; font-weight:600; letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
}
.col-figs .cf > span{
  display:block; font-size:10.5px; color:var(--faint); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* =====================================================================
   صفحة المشروع (المقترح د)
   ===================================================================== */
#collectionDetail .col-cover{
  height:auto !important; aspect-ratio:21/9; border-radius:16px !important; background:var(--sunk) !important;
}
#collectionDetail .col-name{font-size:24px; font-weight:600; letter-spacing:-.3px}
#collectionDetail .col-desc{font-size:14px !important; color:var(--muted) !important; line-height:1.8 !important; max-width:76ch}
/* المعلومات سطرٌ واحد بين خطّين: لا أقراص ملوّنة ولا ثلاثة صفوف */
.pv-col-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  margin:14px 0 0; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pv-col-row > *{margin:0 !important; gap:8px !important}
.pv-col-row .chip-meta,.pv-col-row .partner-chip,.pv-col-row .vtag{
  background:none !important; border:none !important; border-radius:0 !important;
  padding:0 !important; font-size:12.5px !important; font-weight:500 !important;
  color:var(--muted) !important;
}
.pv-col-row .vtag + .vtag::before,.pv-col-row .partner-chip + .partner-chip::before{
  content:"·"; color:var(--faint); margin-inline-end:8px;
}
.pv-col-row .col-partners-label{font-size:11px !important; color:var(--faint) !important; font-weight:500 !important}
/* أرقام الأثر: شريط بخطوط شعرية بلا إيموجي ولا بطاقات */
.pv-col-figs{
  display:flex !important; flex-wrap:wrap; gap:0 !important;
  border-bottom:1px solid var(--line); margin:0 0 6px !important;
}
.pv-col-figs .stat-card{
  flex:1 1 150px; background:none !important; box-shadow:none !important;
  border:none !important; border-radius:0 !important; padding:16px 16px 16px 0 !important;
}
.pv-col-figs .stat-card + .stat-card{
  border-inline-start:1px solid var(--line-soft) !important; padding-inline-start:16px !important;
}
.pv-col-figs .stat-emoji{display:none !important}
.pv-col-figs .stat-n{font-size:24px !important; letter-spacing:-.5px}
.pv-col-figs .stat-l{font-size:11px !important; color:var(--faint) !important}
/* عنوان المواد المرتبطة: تسميةٌ صغيرة بعددها */
#collectionDetail .pv-col-sec{
  display:flex; align-items:baseline; gap:8px;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint) !important;
  margin:26px 0 14px !important; padding-bottom:8px; border-bottom:1px solid var(--line);
}
#collectionDetail .pv-col-sec .n{font-size:11px; font-weight:500; color:var(--faint)}
/* عناوين أقسام أرقام الأثر تأخذ الشكل نفسه */
#collectionDetail .col-sec:not(.pv-col-sec){
  font-size:11px !important; font-weight:600 !important; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint) !important; margin:24px 0 10px !important;
}
@media(max-width:620px){
  .col-grid{grid-template-columns:1fr !important}
  #collectionDetail .col-cover{aspect-ratio:16/9}
}
/* أيقونات سطر المعلومات في صفحة المشروع */
.pv-col-row .ml-ico{width:13px !important; height:13px !important; margin-inline-end:6px !important; opacity:.55}
.pv-col-row .chip-meta,.pv-col-row .vtag{display:inline-flex !important; align-items:center}

/* =====================================================================
   الأثر والأرقام بلا إيموجي: الرقم هو المقصود، والرمز يرسمه كل نظام
   بحجمٍ ووزنٍ مختلف فيبدو الصفّ غير مستوٍ.
   ===================================================================== */
.stat-emoji,.impact-emoji{display:none !important}
/* علامة أن الرقم مجموعُ عدّة مُدخلات (التفصيل داخل صفحة المشروع) */
.col-figs .cf-sum{
  font-style:normal; font-size:9.5px; opacity:.5; margin-inline-start:5px;
  font-family:system-ui,sans-serif;
}
/* الأرقام تبدأ من بداية السطر لا من وسطه — `start` منطقيّة: يساراً في
   الإنجليزي ويميناً في العربي بلا قاعدتين */
.stat-card,.impact-card{text-align:start !important}
.stat-grid.total .stat-card{text-align:start !important}
/* الرقم نفسه يحمل `dir="ltr"` كي تُقرأ خانته و«+» صحيحةً — و`start` عليه
   يعني «يسار» حتى في الصفحة العربية. فيُسند صريحاً إلى اليمين في العربي. */
html[dir="rtl"] .stat-card,html[dir="rtl"] .impact-card,
html[dir="rtl"] .stat-card > *,html[dir="rtl"] .impact-card > *,
html[dir="rtl"] .col-figs .cf,html[dir="rtl"] .col-figs .cf > *{text-align:right !important}

/* =====================================================================
   شريط الأرقام يخرج من الصفحة الرئيسية بالكامل — مكانه شاشة «الإحصائيات».
   `!important` مقبول هنا لأنه إخفاءٌ صريح لا يحتاجه أحدٌ أن يُظهره:
   `app.js` يكتب `display:''` على العنصر في شاشة المكتبة، والمُعرِّف
   يغلب قواعد الصنف (ومنها قاعدة الهاتف `.stats{display:grid}`).
   ===================================================================== */
#stats{display:none !important}

/* =====================================================================
   إعلانات الصفحة الرئيسية — الشكل ب:
   الصورة تملأ البطاقة، وجزء الكلام خلفيّته اللون المُختار للإعلان
   (`--acc`، وافتراضيّه لون الجهة) ينطفئ تدريجاً في الصورة. العدّاد أعلى
   الصورة، وأرقام الانتقال أسفلها، وشريطٌ رقيق يُظهر الخمس ثوان.
   ===================================================================== */
.pv-ads{
  --acc:var(--brand);
  position:relative; order:10; border-radius:20px; overflow:hidden;   /* مكان الغلاف نفسه */
  min-height:360px; color:#fff; margin-bottom:26px; isolation:isolate;
}
.pv-ad{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .55s var(--ease)}
.pv-ad.on{opacity:1; pointer-events:auto; position:relative}
.pv-ad-img{position:absolute; inset:0; background:var(--sunk) center/cover no-repeat; z-index:0}
/* التدريج يمتدّ على البطاقة كلّها **في اتجاه الصورة**: اللون ممتلئ عند
   الكلام ثم يسيل داخل الصورة حتى ينطفئ عند طرفها — لا يتوقّف عند حدّ
   جزء الكلام كما كان. (سطر احتياطيّ أوّلاً لمن لا يعرف `color-mix`.) */
/* الاتجاه: اللون ممتلئٌ **عند الكلام** ثم يسير في اتجاه الصورة حتى ينطفئ.
   في العربي الكلامُ يميناً فالتدريج `to left`، وفي الإنجليزي يساراً
   فـ `to right` — والمحطّة الأولى هي اللون لا الشفافية. */
.pv-ad-wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left, var(--acc) 26%, transparent 92%);
  background:linear-gradient(to left,
    var(--acc) 26%,
    color-mix(in srgb, var(--acc) 82%, transparent) 44%,
    color-mix(in srgb, var(--acc) 34%, transparent) 68%,
    color-mix(in srgb, var(--acc) 0%, transparent) 94%);
}
html[dir="ltr"] .pv-ad-wash{
  background:linear-gradient(to right, var(--acc) 26%, transparent 92%);
  background:linear-gradient(to right,
    var(--acc) 26%,
    color-mix(in srgb, var(--acc) 82%, transparent) 44%,
    color-mix(in srgb, var(--acc) 34%, transparent) 68%,
    color-mix(in srgb, var(--acc) 0%, transparent) 94%);
}
/* جزء الكلام بلا خلفيّة: اللون صار في الغلاف الممتدّ */
.pv-ad-txt{
  position:relative; z-index:2; width:min(60%,620px); min-height:360px;
  padding:40px 42px; display:flex; flex-direction:column; justify-content:center;
  background:none;
}
.pv-ad-txt .k{font-size:11px; font-weight:600; letter-spacing:.14em; opacity:.74; text-transform:uppercase}
.pv-ad-txt h2{font-size:34px; font-weight:600; line-height:1.2; letter-spacing:-.5px; margin-top:12px; color:#fff}
.pv-ad-txt p{font-size:14.5px; line-height:1.75; opacity:.85; margin-top:12px; max-width:46ch}
.pv-ad-cta{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px}
.pv-ad-b{
  border-radius:999px; padding:11px 20px; font-size:14px; font-weight:600;
  background:#fff; color:#1a1a1a; border:none; cursor:pointer;
  transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.pv-ad-b:hover{transform:translateY(-1px)}
.pv-ad-b.ghost{background:none; color:#fff; border:1px solid rgba(255,255,255,.42); font-weight:500}
.pv-ad-b.ghost:hover{background:rgba(255,255,255,.12)}
/* العدّاد */
.pv-ad-cd{
  position:absolute; z-index:3; top:22px; inset-inline-end:22px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:6px 14px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(3px);
}
.pv-ad-cd i{width:7px; height:7px; border-radius:50%; background:#fff; opacity:.85; display:block}
/* أرقام الانتقال فوق الصورة */
.pv-ad-nums{position:absolute; z-index:4; bottom:20px; inset-inline-end:26px; display:flex; gap:7px}
.pv-ad-nums button{
  width:28px; height:28px; border-radius:999px; font:inherit; font-size:12px; font-weight:600;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.pv-ad-nums button:hover{background:rgba(255,255,255,.34)}
.pv-ad-nums button.on{background:#fff; color:#1a1a1a; border-color:#fff}
/* شريط الخمس ثوان */
.pv-ad-bar{position:absolute; z-index:4; inset-inline:0; bottom:0; height:2px; background:rgba(255,255,255,.2)}
.pv-ad-bar i{display:block; height:100%; background:#fff; width:0}
@media (prefers-reduced-motion: no-preference){
  .pv-ads.run .pv-ad-bar i{animation:pvAdBar 5s linear forwards}
  @keyframes pvAdBar{from{width:0} to{width:100%}}
  .pv-ad.on .pv-ad-txt > *{animation:pvIn .5s var(--ease) both}
  .pv-ad.on .pv-ad-txt > *:nth-child(2){animation-delay:.05s}
  .pv-ad.on .pv-ad-txt > *:nth-child(3){animation-delay:.1s}
  .pv-ad.on .pv-ad-txt > *:nth-child(4){animation-delay:.15s}
}
@media(max-width:760px){
  .pv-ads{min-height:0; border-radius:16px}
  .pv-ad{position:relative; display:none}
  .pv-ad.on{display:block}
  .pv-ad-img{position:relative; inset:auto; height:190px}
  .pv-ad-txt{
    width:100%; min-height:0; padding:24px 22px;
    background:var(--acc) !important;      /* عمودياً: كتلة لون لا تدريج */
  }
  .pv-ad-wash{
    inset:auto 0 auto 0; height:190px;     /* التدريج على أسفل الصورة */
    background:linear-gradient(to top, var(--acc) 6%, transparent 64%) !important;
  }
  .pv-ad-txt h2{font-size:25px}
  .pv-ad-nums{top:150px; bottom:auto; inset-inline-end:14px}
  .pv-ad-cd{top:14px; inset-inline-end:14px}
}

/* =====================================================================
   تقويم المكتبة — على هيئة صفحة فعاليات مكتب أبوظبي الإعلامي: رأسٌ
   تحريري، ثم شهرٌ واحد والفعالية الممتدّة شريطٌ متّصل، وإلى جانبه لوحة
   فعاليات الشهر يفصلها خطٌّ أسود.
   ===================================================================== */
#libCalView{order:12}
/* الرأس التحريري يحلّ محلّ شريط العنوان في هذه الشاشة */
body.pv-cal main > .topbar{display:none !important}
.lc-hero{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px;
  padding:26px 0 30px; border-bottom:2px solid var(--ink);
}
.lc-hero .k{font-size:18px; font-weight:500; padding-top:7px}
.lc-hero h1{font-size:clamp(26px,3.6vw,42px); font-weight:500; line-height:1.25; letter-spacing:-.01em; max-width:760px; margin:0 0 18px}
.lc-layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; padding:28px 0 20px}
.lc-cal{padding-inline-end:24px; border-inline-end:2px solid var(--ink); min-width:0}
.lc-side{padding-inline-start:24px; min-width:0}
/* رأس الشهر: الشهر عريض والسنة خفيفة */
.lc-mh{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.lc-mh h2{font-size:28px; font-weight:700; letter-spacing:-.01em; margin:0; margin-inline-end:auto}
.lc-mh h2 span{font-weight:400}
.lc-nav{
  width:34px; height:34px; border-radius:50%; border:none; background:none; color:var(--ink);
  font-size:20px; line-height:1; display:grid; place-items:center; cursor:pointer;
}
.lc-nav:hover{background:var(--sunk)}
[dir=rtl] .lc-nav{transform:scaleX(-1)}
.lc-pill{
  border:none; background:var(--sunk); color:var(--ink); border-radius:999px; cursor:pointer;
  padding:7px 13px; font:inherit; font-size:12px; font-weight:600; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:5px;
}
.lc-pill:hover{background:var(--line)}
.lc-pill svg{width:13px; height:13px}
/* الشبكة: أسابيع، لكلٍّ خلفيةٌ من سبعة أيام وفوقها مسارات الشرائط */
.lc-month{border-top:1px solid var(--line); border-inline-start:1px solid var(--line)}
.lc-dows{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.lc-dows span{
  font-size:11px; font-weight:600; color:var(--faint); text-align:center; padding:6px 0;
  border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line);
}
.lc-wk{position:relative}
.lc-wbg{position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.lc-day{
  border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:6px 8px; text-align:end; cursor:pointer; transition:background-color .15s var(--ease);
}
.lc-day:hover{background:var(--card-bg)}
.lc-day .n{font-size:12.5px; font-weight:600; display:inline-grid; place-items:center; min-width:24px; height:24px; border-radius:50%}
.lc-day.out .n{color:var(--faint); font-weight:400}
.lc-day.out{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.018) 6px 7px)}
.lc-day.today .n{background:var(--brand); color:#fff}
.lc-day.sel{background:var(--sunk); box-shadow:inset 0 0 0 2px var(--ink)}
.lc-wfg{
  position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:20px; row-gap:3px; padding:34px 0 10px; min-height:116px; pointer-events:none;
}
.lc-ev{
  pointer-events:auto; min-width:0; margin:0 4px; padding:0 7px; border:none; cursor:pointer;
  font:inherit; font-size:11.5px; line-height:20px; color:var(--ink); text-align:start;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:3px;
  background:color-mix(in srgb, var(--c) 13%, #fff); border-inline-start:3px solid var(--c);
  transition:background-color .15s var(--ease);
}
.lc-ev.cb{margin-inline-start:0; border-inline-start:0; border-start-start-radius:0; border-end-start-radius:0}
.lc-ev.ca{margin-inline-end:0; border-start-end-radius:0; border-end-end-radius:0}
.lc-ev:hover,.lc-ev.hl{background:color-mix(in srgb, var(--c) 28%, #fff)}
.lc-more{
  pointer-events:auto; border:none; background:none; cursor:pointer; font:inherit;
  font-size:11px; font-weight:600; color:var(--muted); text-align:start; padding:0 8px;
}
.lc-more:hover{color:var(--ink); text-decoration:underline}
/* اللوحة */
.lc-sh{display:flex; align-items:center; gap:8px; margin-bottom:12px; min-height:40px}
.lc-sh h2{font-size:28px; font-weight:500; margin:0; margin-inline-end:auto}
.lc-fwrap{position:relative}
.lc-fbtn{
  border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:7px 13px; border-radius:999px; color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, #fff);
}
.lc-fbtn b{
  display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:9px;
  background:var(--brand); color:#fff; font-size:10.5px; margin-inline-start:5px;
}
.lc-fpop{
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:20; width:270px; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.1);
}
.lc-fpop.on{display:block}
.lc-fpop h4{font-size:11px; font-weight:600; color:var(--faint); letter-spacing:.04em; margin:4px 0 6px}
.lc-fpop label+h4{margin-top:12px}
.lc-fpop label{display:flex; align-items:center; gap:9px; font-size:14px; padding:5px 2px; cursor:pointer}
.lc-fpop label i{width:10px; height:10px; border-radius:2px; flex:0 0 auto}
.lc-fpop input{accent-color:var(--brand); width:15px; height:15px; margin:0}
.lc-fpop .row{display:flex; justify-content:space-between; border-top:1px solid var(--line-soft); margin-top:10px; padding-top:10px}
.lc-fpop .row button{border:none; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--brand)}
.lc-ctx{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:10px}
.lc-ctx button{border:none; background:none; cursor:pointer; font:inherit; font-size:12px; text-decoration:underline; color:var(--ink)}
.lc-cards{display:flex; flex-direction:column; gap:10px}
.lc-card{
  display:block; width:100%; text-align:start; border:none; cursor:pointer; font:inherit; color:var(--ink);
  background:var(--sunk); border-inline-start:4px solid var(--c); padding:16px 18px 14px;
  transition:background-color .15s var(--ease);
}
.lc-card:hover,.lc-card.hl{background:color-mix(in srgb, var(--c) 10%, var(--sunk))}
.lc-card .ty{display:block; font-size:11px; font-weight:600; color:var(--c); margin-bottom:4px}
.lc-card .t{display:block; font-size:17px; line-height:1.35; margin-bottom:16px}
.lc-card .ft{display:flex; align-items:flex-end; gap:10px}
.lc-card .w{margin-inline-end:auto; font-size:13px; font-weight:600; line-height:1.4}
.lc-card .go{font-size:12.5px; color:var(--muted); white-space:nowrap}
.lc-cards .empty{padding:22px 2px}
/* بطاقة الفعالية */
.lc-ov{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.32);
}
.lc-ov.on{display:flex}
.lc-dlg{
  background:var(--panel); border-radius:18px; padding:24px; width:min(430px,94vw);
  max-height:92vh; overflow:auto; box-shadow:0 26px 64px rgba(0,0,0,.24);
}
.lc-dhead{margin-bottom:16px}
.lc-type{
  display:inline-block; color:#fff; border-radius:999px; padding:3px 11px;
  font-size:11px; font-weight:600; letter-spacing:.02em; margin-bottom:9px;
}
.lc-dlg h3{font-size:19px; font-weight:600; line-height:1.35}
.lc-rows{display:flex; flex-direction:column; margin-bottom:18px}
.lc-r{padding:11px 0; border-bottom:1px solid var(--line-soft)}
.lc-r:last-child{border-bottom:none}
.lc-r .l{display:block; font-size:10.5px; color:var(--faint); letter-spacing:.03em}
.lc-r .v{display:block; font-size:14px; font-weight:500; margin-top:2px}
.lc-acts{display:flex; justify-content:flex-end}
.lc-acts{gap:8px}

/* شاشة التقويم: ظهورها بصنفٍ على body، فلا يغلبها ستايلٌ سطري متأخّر */
#libCalView{display:none}
body.pv-cal #libCalView{display:block}
body.pv-cal main > *:not(.topbar):not(#libCalView){display:none !important}

/* طلب إضافة فعالية: زرّ الموظّف أعلى التقويم */
.lc-ask{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0;
}
.lc-ask .btn{width:auto}
.lc-ask span{font-size:12.5px; color:var(--faint)}