/* =====================================================================
   بوابة أثر — نظام التصميم
   فريق نقل المعرفة والتدريب | منصة تجاوب — المجلس الأعلى للقضاء
   أزرق رئيسي / أزرق داكن / ذهبي رملي / خلفيات فاتحة جدًا
   ===================================================================== */

/* ---------- 1. الرموز التصميمية ---------- */
:root{
  /* أزرق رئيسي */
  --blue-900:#0A2540;
  --blue-800:#0E3A63;
  --blue-700:#12508C;
  --blue-600:#1B6BB5;
  --blue-300:#8FBEE6;
  --blue-100:#E8F1FA;
  --blue-50:#F3F8FD;

  /* ذهبي / رملي */
  --gold-700:#A98A45;
  --gold:#C8A96A;
  --gold-300:#E3CFA0;
  --gold-100:#F6EEDD;

  /* أخضر هادئ للنِّسب الإيجابية */
  --green-700:#2F6B4F;
  --green-100:#E6F2EC;

  /* محايدات */
  --bg:#F5F8FC;
  --bg-2:#EEF4FA;
  --surface:#FFFFFF;
  --ink:#16283A;
  --ink-2:#33495E;
  --muted:#64798E;
  --line:#E2EAF3;
  --line-2:#EEF3F9;

  /* قياسات */
  --r-sm:8px; --r:12px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(16,42,67,.05);
  --sh-2:0 2px 8px rgba(16,42,67,.06), 0 1px 2px rgba(16,42,67,.04);
  --sh-3:0 8px 24px rgba(16,42,67,.09);
  --sh-4:0 18px 48px rgba(10,37,64,.18);
  --sb-w:274px;
  --top-h:70px;
  --tr:170ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI","Noto Kufi Arabic","Noto Sans Arabic","Dubai","Tajawal",Tahoma,Arial,sans-serif;
  font-size:15px;line-height:1.75;color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.45;color:var(--blue-900);font-weight:800;letter-spacing:-.2px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue-700);text-decoration:none}
a:hover{color:var(--blue-600)}
button,input,select,textarea{font:inherit;color:inherit}
[dir="rtl"] .ico,[dir="rtl"] .ico *{transform:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}
:focus-visible{outline:2.5px solid var(--blue-600);outline-offset:2px;border-radius:6px}

/* ---------- 3. الهيكل ---------- */
.app{display:flex;min-height:100vh}

/* ---------- 4. القائمة الجانبية ---------- */
.sidebar{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--sb-w);
  display:flex;flex-direction:column;z-index:60;
  background:var(--surface);
  border-inline-end:1px solid var(--line);
  box-shadow:1px 0 0 rgba(16,42,67,.02);
}
/* كتلة العلامة في الـSidebar: خلفية بيضاء لتظهر الشعارات فوقها بوضوح،
   بلا أي مربعات بيضاء صغيرة حول كل شعار وبلا حدود أو ظلال. */
.sidebar__brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 16px 20px;min-height:var(--top-h);
  background:#fff;
  border-block-end:1px solid var(--line);
  position:relative;
}
.sidebar__names{text-align:center;min-width:0}
.sidebar__title{font-size:1.14rem;font-weight:800;color:var(--blue-900);line-height:1.4}
.sidebar__sub{font-size:.74rem;color:var(--blue-700);font-weight:700;line-height:1.5}
/* =====================================================================
   قواعد الشعارات النهائية — وضوح كامل بلا أي تعتيم أو ترشيح
   تُعرض الشعارات بصورها الأصلية كما هي: object-fit contain، بلا قصّ،
   وبلا خلفية أو حدّ أو صندوق، وبشفافية كاملة 1.
   ===================================================================== */
.logo-sjc {
  width: 140px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: block;
  flex: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.logo-tajawob {
  width: 130px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: block;
  flex: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---------------------------------------------------------------------
   مجموعات الشعارات في الهيدر والـSidebar.
   ترتيب العناصر داخل RTL: شعار المجلس أولًا = يمين، وتجاوب الثاني = يسار.
   لا قصّ ولا overflow hidden ولا transform scale — الشعار يظهر كاملًا.
   --------------------------------------------------------------------- */

/* ---------- شعارات الهيدر العلوي (الهيدر الأبيض فقط) ---------- */
/* ترتيب العناصر داخل RTL: شعار المجلس أولًا = يمين، وتجاوب الثاني = يسار */
.top-brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 360px;
  overflow: visible;
}

.top-logo {
  display: block;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: none;
}

.top-logo-sjc {
  width: 165px;
  height: 90px;
  object-fit: contain;
}

.top-logo-tajawob {
  width: 165px;
  max-width: 165px;
  height: auto;
  max-height: 95px;
  object-fit: contain;
}

/* شعار تجاوب الكامل — نفس القواعد في الهيدر وفي الـSidebar.
   الحبر الداكن داخل صورة شفافة، فلا يحتاج أي filter ولا blend ولا
   خلفية، ويظهر واضحًا فوق الهيدر الأبيض والقائمة الجانبية البيضاء. */
.top-logo-tajawob,
.sidebar-logo-tajawob {
  display: block !important;
  width: 165px !important;
  max-width: 165px !important;
  height: auto !important;
  max-height: 95px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- شعارات الـSidebar (بنفس المسارات بحجم أصغر) ---------- */
.sidebar-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: visible;
}

.sidebar-logo-sjc {
  width: 130px;
  max-height: 85px;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: block;
}

/* شعار تجاوب في الـSidebar: القواعد موحّدة مع الهيدر أعلاه
   (.top-logo-tajawob, .sidebar-logo-tajawob) بعرض 165px وحد أقصى 95px */

/* أسماء المنصة أسفل الشعارات — تُحدَّد مرة واحدة فقط */
.sidebar__names{min-width:0}

/* شعارات أعلى البانر: تُعرض مباشرة فوق الخلفية الزرقاء بلا أي صندوق أبيض.
   الترتيب في RTL: أول عنصر (المجلس) على اليمين، وتجاوب على اليسار. */

.nav{flex:1;overflow-y:auto;padding:16px 12px 20px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.nav__item{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 14px;margin-block-end:3px;border-radius:var(--r);
  color:var(--ink-2);font-size:.92rem;font-weight:600;
  transition:background var(--tr),color var(--tr),transform var(--tr);
}
.nav__item:hover{background:var(--blue-50);color:var(--blue-800)}
.nav__item.is-active{
  background:linear-gradient(90deg,var(--blue-800),var(--blue-700));
  color:#fff;box-shadow:0 4px 12px rgba(14,58,99,.24);
}
.nav__item.is-active .ico{color:var(--gold-300)}
.nav__item.is-active::before{
  content:"";position:absolute;inset-inline-end:-12px;inset-block:9px;width:4px;
  border-radius:4px;background:var(--gold);
}
.sidebar__foot{padding:16px 20px 18px;border-block-start:1px solid var(--line-2);background:var(--blue-50)}
.sidebar__foot-title{margin-block-end:4px;font-size:.78rem;font-weight:800;color:var(--blue-800)}
.sidebar__foot-text{font-size:.73rem;color:var(--muted);line-height:1.7}

.scrim{position:fixed;inset:0;background:rgba(10,37,64,.42);z-index:55;backdrop-filter:blur(2px)}

/* ---------- 5. الهيدر ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;margin-inline-start:var(--sb-w)}
.topbar{
  position:sticky;top:0;z-index:40;min-height:var(--top-h);
  display:flex;align-items:center;gap:14px;
  padding:12px 26px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-block-end:1px solid var(--line);
}
.topbar__burger{display:none}
.topbar__brand{display:flex;align-items:center;gap:16px;flex:none;padding:4px 0}
.topbar__sep{width:1px;height:44px;background:var(--line);flex:none}
.topbar__title{
  font-size:.95rem;font-weight:800;color:var(--blue-800);
  padding-inline-start:4px;white-space:nowrap;
}
.topbar__search{
  flex:1;max-width:420px;margin-inline-start:auto;position:relative;
  display:flex;align-items:center;
}
.topbar__search .ico{position:absolute;inset-inline-start:12px;color:var(--muted);width:18px;height:18px}
.topbar__search input{
  width:100%;padding:10px 40px;background:var(--bg);border:1.5px solid var(--line);
  border-radius:999px;font-size:.88rem;transition:var(--tr);
}
.topbar__search input:focus{background:#fff;border-color:var(--blue-600);box-shadow:0 0 0 4px var(--blue-100);outline:none}
.topbar__date{font-size:.8rem;color:var(--muted);font-weight:600;white-space:nowrap}
.topbar__actions{display:flex;align-items:center;gap:9px;flex:none}

/* ---------- 6. مساحة العرض ---------- */
.view{flex:1;padding:26px 26px 40px;max-width:1480px;width:100%;margin-inline:auto;outline:none}
.footer{padding:16px 26px 22px;text-align:center;border-block-start:1px solid var(--line-2)}
.footer__line{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.1px}

/* ---------- 7. الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r);border:1.5px solid transparent;
  font-size:.88rem;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:var(--tr);box-shadow:var(--sh-1);
}
.btn--sm{padding:8px 14px;font-size:.82rem;border-radius:var(--r-sm)}
.btn--xs{padding:6px 11px;font-size:.76rem;border-radius:var(--r-sm)}
.btn--block{width:100%}
.btn--primary{background:linear-gradient(135deg,var(--blue-800),var(--blue-700));color:#fff;box-shadow:0 3px 10px rgba(14,58,99,.22)}
.btn--primary:hover{filter:brightness(1.08);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,58,99,.26)}
.btn--gold{background:linear-gradient(135deg,var(--gold),#D9BE84);color:#3B2E12;box-shadow:0 3px 10px rgba(169,138,69,.24)}
.btn--gold:hover{filter:brightness(1.05);color:#3B2E12;transform:translateY(-1px)}
.btn--ghost{background:var(--surface);color:var(--blue-800);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-800)}
.btn--soft{background:var(--blue-100);color:var(--blue-800);border-color:transparent}
.btn--soft:hover{background:var(--blue-300);color:var(--blue-900)}
.btn--danger{background:#FDEEEE;color:#9B2C2C;border-color:#F5D5D5}
.btn--danger:hover{background:#FBDADA}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.iconbtn{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;transition:var(--tr);
}
.iconbtn:hover{border-color:var(--blue-600);color:var(--blue-700);background:var(--blue-50)}

/* ---------- 8. ترويسة الصفحة ---------- */
.phead{margin-block-end:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.phead__title{display:flex;align-items:center;gap:12px}
.phead__ico{
  width:44px;height:44px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-800),var(--blue-600));color:#fff;box-shadow:0 4px 12px rgba(14,58,99,.22);
}
.phead__ico .ico{width:22px;height:22px}
.phead h1{font-size:1.42rem}
.phead__desc{margin-block-start:5px;font-size:.88rem;color:var(--muted);max-width:70ch;line-height:1.8}
.phead__actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- 9. البطاقات ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.card__head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-block-end:1px solid var(--line-2);
  background:linear-gradient(180deg,#FCFDFF,#F8FBFE);
}
.card__title{display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:800;color:var(--blue-900)}
.card__title .ico{width:18px;height:18px;color:var(--blue-600)}
.card__hint{margin-inline-start:auto;font-size:.78rem;color:var(--muted);font-weight:600}
.card__body{padding:20px}
.card__body--flush{padding:0}

.grid{display:grid;gap:18px}
.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--members{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* ---------- 10. بطاقات الإحصاء ---------- */
.kpi{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:8px;min-height:118px;
}
.kpi::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,var(--blue-700),var(--blue-300));
}
.kpi--gold::after{background:linear-gradient(90deg,var(--gold-700),var(--gold-300))}
.kpi--green::after{background:linear-gradient(90deg,var(--green-700),#9BC9B0)}
.kpi--teal::after{background:linear-gradient(90deg,#0E6F73,#63B7B9)}
.kpi__top{display:flex;align-items:center;gap:10px}
.kpi__ico{
  width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-700);
}
.kpi--gold .kpi__ico{background:var(--gold-100);color:var(--gold-700)}
.kpi--green .kpi__ico{background:var(--green-100);color:var(--green-700)}
.kpi--teal .kpi__ico{background:#E1F0F0;color:#0E6F73}
.kpi__label{font-size:.83rem;font-weight:700;color:var(--muted);line-height:1.5}
.kpi__value{font-size:1.85rem;font-weight:800;color:var(--blue-900);line-height:1.2;letter-spacing:-.5px}
.kpi__value--sm{font-size:1.1rem}
.kpi__note{font-size:.76rem;color:var(--muted);font-weight:600;line-height:1.6}
.kpi--link{cursor:pointer;transition:var(--tr)}
.kpi--link:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--blue-300)}

/* ---------- 11. الهيرو ---------- */
/* خلفية أفتح وأناقة: هالة بيضاء تمتزج مع خلفية الصفحة في الزاوية العلوية
   اليسرى (حيث العلامة المائية)، ثم تدرّج إلى أزرق تجاوب متوسط، مع لمسات
   تركواز خفيفة جدًّا. النص يبقى أبيضًا واضحًا فوق الجزء الأزرق. */
.hero{
  position:relative;overflow:hidden;margin-block-end:24px;
  border-radius:var(--r-xl);padding:38px 40px;
  background:
    radial-gradient(120% 105% at 0% 0%,rgba(255,255,255,.95) 0%,rgba(240,248,255,.72) 16%,rgba(226,241,255,.34) 34%,rgba(226,241,255,0) 56%),
    radial-gradient(70% 55% at 100% 100%,rgba(86,190,193,.20) 0%,rgba(86,190,193,0) 70%),
    linear-gradient(135deg,#8FB9DF 0%,#4E8CC5 22%,#2C6FB2 52%,#26649F 76%,#1F5D98 100%);
  color:#fff;box-shadow:0 12px 30px rgba(31,93,152,.18);
}
/* العلامة المائية: شعار tajawob-mark.png أبيض فقط داخل الخلفية،
   في الجهة اليسرى أعلى البانر (خصائص فيزيائية لأن الصفحة RTL)،
   بلا صندوق ولا بطاقة ولا حدود. */
.hero__wm{
  position:absolute;top:-8%;left:-3%;
  width:400px;max-width:42%;
  opacity:.14;pointer-events:none;
  transform:rotate(-4deg);
}
/* ضمان وضوح النص الأبيض فوق الأجزاء الفاتحة */
.hero h1,.hero__text,.hero__stats dd{text-shadow:0 1px 3px rgba(10,45,80,.28)}
.hero__rings{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__rings i{
  position:absolute;border:1.5px solid rgba(255,255,255,.14);border-radius:50%;
}
/* حلقات خفيفة جدًّا في الجهة المقابلة (يمين) حتى لا تتراكب مع العلامة المائية */
.hero__rings i:nth-child(1){width:400px;height:400px;top:-190px;right:70px}
.hero__rings i:nth-child(2){width:280px;height:280px;top:-110px;right:140px}
.hero__rings i:nth-child(3){width:170px;height:170px;top:-45px;right:200px}
.hero__rings b{
  position:absolute;inset-block-end:0;inset-inline:0;height:110px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 16px);
}
.hero__in{position:relative;max-width:1000px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-block-end:16px;
  padding:6px 15px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);
  font-size:.76rem;font-weight:700;color:var(--gold-300);
}
.hero h1{color:#fff;font-size:2.05rem;line-height:1.5;max-width:26ch;letter-spacing:-.6px}
.hero__text{margin-block-start:14px;font-size:1rem;color:rgba(255,255,255,.88);max-width:74ch;line-height:2}
.hero__actions{margin-block-start:26px;display:flex;gap:11px;flex-wrap:wrap}
.hero .btn--gold{box-shadow:0 6px 18px rgba(0,0,0,.18)}
.hero__link{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--r);
  background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.28);
  color:#fff;font-size:.88rem;font-weight:700;transition:var(--tr);
}
.hero__link:hover{background:rgba(255,255,255,.18);color:#fff}
.hero__stats{
  margin-block-start:30px;padding-block-start:24px;border-block-start:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;
}
.hero__stats div{display:flex;flex-direction:column;gap:2px}
.hero__stats dt{font-size:.76rem;color:rgba(255,255,255,.66);font-weight:600}
.hero__stats dd{margin:0;font-size:1.6rem;font-weight:800;color:#fff;line-height:1.25}
.hero__stats dd small{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.6)}

/* ---------- 12. الاختصارات ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.quick__item{
  display:flex;align-items:center;gap:14px;padding:17px 19px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);transition:var(--tr);
}
.quick__item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--blue-300)}
.quick__ico{
  width:46px;height:46px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-700),var(--blue-500,#1B6BB5));color:#fff;
  box-shadow:0 4px 12px rgba(14,58,99,.2);
}
.quick__item:nth-child(2) .quick__ico{background:linear-gradient(140deg,var(--gold-700),var(--gold))}
.quick__item:nth-child(3) .quick__ico{background:linear-gradient(140deg,#0E6F73,#3FA0A2)}
.quick__item:nth-child(4) .quick__ico{background:linear-gradient(140deg,var(--green-700),#4E8C6C)}
.quick__item:nth-child(5) .quick__ico{background:linear-gradient(140deg,var(--blue-900),var(--blue-700))}
.quick__item:nth-child(6) .quick__ico{background:linear-gradient(140deg,#6B5B95,#9586BC)}
.quick__t{font-size:.92rem;font-weight:800;color:var(--blue-900);line-height:1.5}
.quick__d{font-size:.78rem;color:var(--muted);font-weight:600;line-height:1.6}

/* ---------- 13. بطاقات الأعضاء ---------- */
.mcard{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);transition:var(--tr);
}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--blue-300)}
.mcard__top{
  display:flex;align-items:center;gap:15px;padding:20px;
  background:linear-gradient(135deg,var(--blue-800),var(--blue-700));
  position:relative;overflow:hidden;
}
.mcard--lead .mcard__top{background:linear-gradient(135deg,#7A5F1F,var(--gold-700) 55%,var(--gold))}
.mcard--deputy .mcard__top{background:linear-gradient(135deg,var(--blue-900),#15527F 60%,#1B6BB5)}
.mcard__top::after{
  content:"";position:absolute;inset-block-start:-46px;inset-inline-end:-30px;
  width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.mcard__av{
  width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.96);color:var(--blue-800);
  font-size:1.5rem;font-weight:800;box-shadow:0 4px 12px rgba(6,26,46,.2);
}
.mcard--lead .mcard__av{color:#7A5F1F}
.mcard__id{min-width:0;position:relative}
.mcard__name{font-size:1.06rem;font-weight:800;color:#fff;line-height:1.5}
.mcard__role{
  display:inline-flex;align-items:center;gap:6px;margin-block-start:5px;
  padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  font-size:.75rem;font-weight:700;color:#fff;
}
.mcard__body{padding:18px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mcard__body--simple{grid-template-columns:1fr;gap:0;padding:16px 20px}
.mstat{background:var(--blue-50);border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px}
.mstat--single{display:flex;align-items:baseline;gap:8px;padding:12px 14px}
.mstat--single b{font-size:1.32rem}
.mstat--single span{font-size:.8rem}
.mstat b{display:block;font-size:1.22rem;font-weight:800;color:var(--blue-800);line-height:1.3}
.mstat span{display:block;font-size:.74rem;color:var(--muted);font-weight:700}
.mstat--single span{display:inline}
.mcard__foot{display:flex;gap:9px;padding:0 20px 20px}
.mcard__foot .btn{flex:1}

/* ---------- 14. بطاقة العضو ---------- */
.profile{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:26px 28px;margin-block-end:20px;
  background:linear-gradient(135deg,var(--blue-800),var(--blue-700) 65%,var(--blue-600));
  border-radius:var(--r-xl);color:#fff;box-shadow:0 14px 34px rgba(10,37,64,.2);
  position:relative;overflow:hidden;
}
.profile::after{
  content:"";position:absolute;inset-block-start:-70px;inset-inline-end:-40px;
  width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);
}
.profile__av{
  width:86px;height:86px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.97);color:var(--blue-800);font-size:2.1rem;font-weight:800;
  box-shadow:0 6px 20px rgba(6,26,46,.24);position:relative;
}
.profile__id{position:relative;flex:1;min-width:210px}
.profile__name{font-size:1.5rem;font-weight:800;color:#fff;line-height:1.45}
.profile__role{
  display:inline-block;margin-block-start:8px;padding:4px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  font-size:.8rem;font-weight:700;color:#fff;
}
.profile__note{margin-block-start:10px;font-size:.82rem;color:rgba(255,255,255,.76);line-height:1.8}
.profile__actions{position:relative;display:flex;gap:10px;flex-wrap:wrap}

.crumb{display:flex;align-items:center;gap:7px;margin-block-end:14px;font-size:.82rem;color:var(--muted);font-weight:600;flex-wrap:wrap}
.crumb a{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.crumb .ico{width:15px;height:15px;transform:scaleX(-1)}

/* ---------- 15. الجداول ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
.tbl th{
  text-align:start;padding:12px 16px;background:var(--blue-50);
  font-size:.78rem;font-weight:800;color:var(--blue-800);
  border-block-end:1.5px solid var(--line);white-space:nowrap;
}
.tbl td{padding:13px 16px;border-block-end:1px solid var(--line-2);vertical-align:middle;line-height:1.7}
.tbl tbody tr{transition:background var(--tr)}
.tbl tbody tr:hover{background:var(--blue-50)}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl__title{font-weight:700;color:var(--blue-900);display:block}
.cell-note{display:block;font-size:.76rem;color:var(--muted);margin-block-start:2px}
.tbl .num{font-weight:800;color:var(--blue-800);font-variant-numeric:tabular-nums}
.tbl__actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- 16. بطاقات الأعمال ---------- */
.wcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.wcard{
  display:flex;flex-direction:column;gap:12px;padding:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);transition:var(--tr);
}
.wcard:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--blue-300)}
.wcard__top{display:flex;align-items:flex-start;gap:11px}
.wcard__ico{
  width:42px;height:42px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-700);
}
.wcard__t{flex:1;min-width:0}
.wcard__t h3{font-size:.98rem;line-height:1.55;word-break:break-word}
.wcard__tags{display:flex;gap:6px;flex-wrap:wrap;margin-block-start:6px}
.wcard__desc{font-size:.84rem;color:var(--ink-2);line-height:1.85;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard__meta{display:flex;flex-direction:column;gap:6px;padding-block-start:12px;border-block-start:1px dashed var(--line);font-size:.79rem;color:var(--muted)}
.wcard__meta span{display:flex;align-items:center;gap:7px}
.wcard__meta .ico{width:16px;height:16px;color:var(--blue-600)}
.wcard__foot{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:auto;padding-block-start:4px}

/* ---------- 17. الشرائح والتصنيفات ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.75rem;font-weight:700;line-height:1.6;
  background:var(--blue-100);color:var(--blue-800);border:1px solid transparent;
}
.chip--gold{background:var(--gold-100);color:var(--gold-700)}
.chip--blue{background:var(--blue-50);color:var(--blue-800)}
.chip--green{background:var(--green-100);color:var(--green-700)}
.chip--teal{background:#E1F0F0;color:#0E6F73}
.chip--slate{background:#EFF3F7;color:var(--muted)}
.chip--line{border-color:var(--line);background:var(--surface)}

.sst{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.76rem;font-weight:700;background:#EFF3F7;color:var(--muted);border:1px solid #E3EAF2}
.sst i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sst--approved,.sst--done{background:var(--green-100);color:var(--green-700);border-color:#CFE6DA}
.sst--review,.sst--prep{background:var(--gold-100);color:var(--gold-700);border-color:#EBDCBC}
.sst--sched{background:var(--blue-100);color:var(--blue-700);border-color:#CFE1F4}
.sst--draft{background:#EFF3F7;color:var(--muted);border-color:#E3EAF2}
.sst--live{background:#E1F0F0;color:#0E6F73;border-color:#C6E2E2}

/* ---------- 18. الرسوم البيانية ---------- */
.chart{display:flex;flex-direction:column;gap:11px}
.chart__row{display:grid;grid-template-columns:minmax(96px,32%) 1fr auto;gap:12px;align-items:center}
.chart__lab{font-size:.83rem;font-weight:700;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart__track{height:11px;border-radius:999px;background:var(--blue-50);overflow:hidden;border:1px solid var(--line-2)}
.chart__fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--blue-700),var(--blue-500,#1B6BB5));
  transition:width 600ms cubic-bezier(.4,0,.2,1);
}
.chart__fill--gold{background:linear-gradient(90deg,var(--gold-700),var(--gold-300))}
.chart__fill--green{background:linear-gradient(90deg,var(--green-700),#7FB89B)}
.chart__fill--teal{background:linear-gradient(90deg,#0E6F73,#63B7B9)}
.chart__val{font-size:.82rem;font-weight:800;color:var(--blue-800);font-variant-numeric:tabular-nums;min-width:2ch}
.chart__note{font-size:.78rem;color:var(--muted);line-height:1.7}

.donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.donut__svg{width:172px;height:172px;flex:none}
.donut__center{text-align:center}
.donut__center b{display:block;font-size:1.75rem;font-weight:800;color:var(--blue-900);line-height:1.2}
.donut__center span{font-size:.76rem;color:var(--muted);font-weight:700}
.donut__legend{display:flex;flex-direction:column;gap:9px;min-width:170px}
.donut__li{display:flex;align-items:center;gap:9px;font-size:.84rem}
.donut__li i{width:11px;height:11px;border-radius:4px;flex:none}
.donut__li b{margin-inline-start:auto;font-weight:800;color:var(--blue-800);font-variant-numeric:tabular-nums}

.months{display:flex;align-items:flex-end;gap:8px;height:180px;padding-block-start:12px}
.months__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.months__bar{
  width:100%;max-width:44px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,var(--blue-600),var(--blue-800));
  min-height:5px;position:relative;transition:height 600ms cubic-bezier(.4,0,.2,1);
}
.months__bar b{
  position:absolute;inset-block-start:-22px;inset-inline:0;text-align:center;
  font-size:.76rem;font-weight:800;color:var(--blue-800);
}
.months__lab{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}

/* ---------- 19. النماذج ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--wide{grid-column:1/-1}
.field__label{font-size:.82rem;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.field__label i{width:6px;height:6px;border-radius:50%;background:var(--blue-600);flex:none}
.field input,.field select,.field textarea{
  width:100%;padding:11px 14px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);font-size:.9rem;
  transition:var(--tr);
}
.field textarea{resize:vertical;min-height:88px;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue-600);box-shadow:0 0 0 4px var(--blue-100);outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:#9AAAB9}
.field__hint{font-size:.76rem;color:var(--muted);line-height:1.6}
.form__actions{
  grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;
  padding-block-start:6px;border-block-start:1px solid var(--line-2);margin-block-start:4px;
}

/* ---------- 20. الفلاتر ---------- */
.filters{
  display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 18px;background:var(--blue-50);border:1px solid var(--line-2);border-radius:var(--r-md);
}
.filters .field{min-width:158px;flex:1 1 158px}
.filters .field input,.filters .field select{padding:9px 12px;font-size:.85rem}
.filters__reset{display:flex;align-items:flex-end}

/* ---------- 21. التبويبات ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;background:var(--blue-50);border:1px solid var(--line-2);border-radius:var(--r-md);margin-block-end:20px;width:fit-content;max-width:100%}
.tab{
  padding:9px 18px;border-radius:var(--r-sm);border:0;background:transparent;
  font-size:.86rem;font-weight:700;color:var(--muted);cursor:pointer;transition:var(--tr);
  display:inline-flex;align-items:center;gap:7px;
}
.tab:hover{color:var(--blue-700)}
.tab.is-active{background:var(--surface);color:var(--blue-800);box-shadow:var(--sh-2)}
.tab .ico{width:17px;height:17px}

/* ---------- 22. الحالات الفارغة ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:38px 24px;color:var(--muted);
}
.empty__ico{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue-300);border:1px solid var(--line-2);
}
.empty__ico .ico{width:27px;height:27px}
.empty__t{font-size:.98rem;font-weight:800;color:var(--blue-900)}
.empty__d{font-size:.85rem;max-width:52ch;line-height:1.8}

.note{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px 17px;border-radius:var(--r-md);
  background:var(--blue-50);border:1px solid var(--line-2);
  font-size:.85rem;line-height:1.8;color:var(--ink-2);
}
.note--gold{background:var(--gold-100);border-color:#EBDCBC}
.note--green{background:var(--green-100);border-color:#CFE6DA}
.note__ico{width:20px;height:20px;flex:none;color:var(--blue-700);margin-block-start:2px}
.note--gold .note__ico{color:var(--gold-700)}
.note--green .note__ico{color:var(--green-700)}
.note b{color:var(--blue-900)}
.note--gold b{color:#7A5F1F}

.info-list{display:flex;flex-direction:column;gap:0}
.info-list__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-block-end:1px dashed var(--line);font-size:.88rem}
.info-list__row:last-child{border-block-end:0}
.info-list__row dt{color:var(--muted);font-weight:700;white-space:nowrap}
.info-list__row dd{margin:0;font-weight:700;color:var(--ink);text-align:end;word-break:break-word}

/* ---------- 23. القوائم ---------- */
.lst{display:flex;flex-direction:column;gap:11px}
.lst__item{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:var(--tr);
}
.lst__item:hover{border-color:var(--blue-300);box-shadow:var(--sh-2)}
.lst__ico{
  width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-700);
}
.lst__main{flex:1;min-width:0}
.lst__t{font-size:.92rem;font-weight:700;color:var(--blue-900);line-height:1.55;word-break:break-word}
.lst__s{font-size:.78rem;color:var(--muted);font-weight:600;margin-block-start:2px}
.lst__side{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 24. نافذة التفاصيل ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,37,64,.55);backdrop-filter:blur(3px);animation:fade 180ms ease}
.modal__card{
  position:relative;width:100%;max-width:720px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  border:1px solid var(--line);animation:pop 220ms cubic-bezier(.2,.9,.3,1.2);
}
/* رأس النافذة فاتح حتى تظهر الشعارات الشفافة بألوانها الرسمية دون مربعات */
.modal__head{
  display:flex;align-items:center;gap:15px;padding:15px 22px;
  border-block-end:2px solid var(--gold);background:linear-gradient(135deg,#fff,var(--blue-50));
  flex:none;
}
.modal__brand{display:flex;align-items:center;gap:18px;flex:none;flex-wrap:wrap}
.modal__headtext{flex:1;min-width:0}
.modal__title{font-size:1.08rem;font-weight:800;color:var(--blue-900);line-height:1.5;word-break:break-word}
.modal__sub{margin-block-start:4px;font-size:.79rem;color:var(--muted);line-height:1.7;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.modal__body{padding:22px;overflow-y:auto;flex:1}
.modal__body .info-list__row:first-child{padding-block-start:0}
.modal__text{
  margin-block-start:16px;padding:14px 16px;border-radius:var(--r);
  background:var(--blue-50);border:1px solid var(--line);
  font-size:.89rem;line-height:2;color:var(--ink-2);
}
.modal__text b{color:var(--blue-900)}
.modal__link{display:flex;align-items:center;gap:8px;margin-block-start:14px;font-size:.85rem;word-break:break-all}
.modal__link .ico{width:17px;height:17px;flex:none;color:var(--blue-600)}
.modal__link a{color:var(--blue-600)}
.modal__foot{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding:16px 22px;border-block-start:1px solid var(--line);background:var(--blue-50);flex:none;
}
.modal__foot:empty{display:none}
body.is-modal{overflow:hidden}
.logo-fallback{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;color:var(--blue-800);
  background:var(--blue-50);border:1px dashed var(--blue-200);
}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 25. التنبيه ---------- */
.toast{
  position:fixed;inset-block-end:26px;inset-inline-start:26px;z-index:200;
  display:flex;align-items:center;gap:10px;max-width:400px;
  padding:13px 18px;border-radius:var(--r-md);
  background:var(--blue-900);color:#fff;font-size:.87rem;font-weight:600;
  box-shadow:var(--sh-4);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:var(--tr);
}
.toast.is-on{opacity:1;transform:none}
.toast--ok{background:var(--green-700)}
.toast--warn{background:#8A5A12}
.toast .ico{width:19px;height:19px;flex:none}

/* ---------- 26. استجابة ---------- */
@media (max-width:1180px){
  .phead h1{font-size:1.3rem}
  .hero{padding:28px 26px}
  .hero h1{font-size:1.72rem}
  .top-logo-sjc{width:138px;height:76px}
  .top-logo-tajawob{width:140px!important;max-width:140px!important;max-height:82px!important}
  .top-brand-logos{gap:20px;min-width:300px}
}
@media (max-width:980px){
  :root{--sb-w:262px}
  .sidebar{transform:translateX(102%);transition:transform 240ms cubic-bezier(.4,0,.2,1);box-shadow:var(--sh-4)}
  .sidebar.is-open{transform:none}
  .main{margin-inline-start:0}
  .topbar__burger{display:grid}
  .topbar{gap:11px;padding:12px 18px}
  .topbar__title{display:none}
  .view{padding:20px 18px 34px}
  .footer{padding:14px 18px 20px}
}
@media (max-width:760px){
  .topbar__date{display:none}
  .topbar__search{max-width:none;order:5;flex-basis:100%}
  .topbar{flex-wrap:wrap}
  .topbar__actions{margin-inline-start:auto}
  .hero{padding:24px 20px;border-radius:var(--r-lg)}
  .hero h1{font-size:1.34rem}
  .hero__text{font-size:.93rem;line-height:1.9}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .hero__stats dd{font-size:1.32rem}
  .form{grid-template-columns:1fr}
  .modal{padding:12px}
  .modal__card{max-height:92vh}
  .modal__body{padding:17px}
  .modal__head{padding:14px 16px;gap:11px}
  .modal__brand{gap:12px}
  .modal__brand .logo-sjc{width:110px;height:50px}
  .modal__brand .logo-tajawob{width:105px;height:50px}
  .mcard__body{grid-template-columns:repeat(2,1fr)}
  .mcard__body--simple{grid-template-columns:1fr}
  /* الجوال: شعار المجلس 110px وتجاوب 105px كما هو مطلوب */
  .top-logo-sjc{width:120px;height:66px}
  .top-logo-tajawob{width:124px!important;max-width:124px!important;max-height:72px!important}
  .top-brand-logos{gap:14px;min-width:260px}
  .sidebar-logo-sjc{width:110px;max-height:72px}
  .sidebar-logo-tajawob{width:112px!important;max-width:112px!important;max-height:66px!important}
  .hero__wm{width:250px;max-width:52%;top:-6%;left:-6%}
  .months{gap:5px;height:150px}
  .months__lab{font-size:.64rem}
  .toast{inset-inline:16px;inset-block-end:16px;max-width:none}
}
@media print{
  body{background:#fff}
  .sidebar,.topbar,.footer,.toast,.modal,.scrim,.phead__actions,.filters,.form__actions,.wcard__foot,.tbl__actions,.tabs{display:none !important}
  .main{margin:0}
  .view{padding:0;max-width:none}
  .card,.kpi,.hero,.profile,.wcard,.mcard,.lst__item,.quick__item{box-shadow:none;border:1px solid #D8E1EA;break-inside:avoid}
  .hero{background:#fff !important;color:#16283A !important}
  .hero h1,.hero__text,.hero__stats dd,.hero__stats dt{color:#16283A !important}
  .hero__eyebrow{background:none;border-color:#D8E1EA;color:#33495E}
  .hero__wm,.hero__rings{display:none}
  .profile{background:#fff !important;color:#16283A !important}
  .profile__name{color:#0E3A63 !important}
  .profile__role{background:none;border-color:#D8E1EA;color:#33495E}
  .grid--kpi{grid-template-columns:repeat(4,1fr)}
  .print-head{display:flex !important;align-items:center;gap:18px;padding-block-end:10px;margin-block-end:14px;border-block-end:2px solid #C8A96A}
  .print-head__logos{display:flex;align-items:center;gap:12px;flex:none}
  /* الطباعة: نفس شعارات الواجهة بلا أي ترشيح أو تعتيم */
  .print-head__logos img{
    object-fit:contain;object-position:center;
    opacity:1!important;filter:none!important;mix-blend-mode:normal!important;
    background:none;border:0;padding:0;
  }
  .print-head__logos .logo-sjc{width:110px;height:50px}
  .print-head__logos .logo-tajawob{width:100px;height:50px}
  .print-head__text{flex:1;min-width:0;text-align:center}
  .print-head__t{margin:0;font-size:13pt;font-weight:800;color:#0E3A63}
  .print-head__s{margin:2px 0 0;font-size:9pt;color:#64798E}
  .print-head__d{margin:0;font-size:8.5pt;color:#64798E;white-space:nowrap;flex:none}
  .print-head--modal{justify-content:center;text-align:center}
}

/* ---------- 27. ترويسة الطباعة ---------- */
.print-head{display:none}

/* ================= تنبيه البيانات التجريبية ================= */
.demo-banner{margin:0 0 4px;}
.demo-banner[hidden]{display:none;}
.demo-banner__inner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-radius:12px;
  background:var(--gold-100);
  border:1px solid var(--gold-300);
  border-inline-start:5px solid var(--gold-700);
}
.demo-banner__ico{display:inline-flex;color:var(--gold-700);flex:0 0 auto;}
.demo-banner__ico svg{width:22px;height:22px;}
.demo-banner__text{
  margin:0;flex:1 1 320px;
  font-weight:700;font-size:.94rem;line-height:1.75;color:var(--gold-700);
}
.demo-banner__count{
  font-size:.78rem;font-weight:700;white-space:nowrap;
  padding:4px 10px;border-radius:999px;
  background:#fff;color:var(--gold-700);border:1px solid var(--gold-300);
}
.demo-banner__btn{flex:0 0 auto;}