@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700;800;900&display=swap');
:root {
  --p1:#394D56; --p2:#2d3e46; --p3:#4a6370;
  --ac:#CEBEA5; --ac2:#b8a48a; --ac3:#f5efe4;
  --tl:#367074; --tl2:#2a5a5e; --tl3:#4a9097;
  --gr:#5a6e4a;
  --bg:#f4f5f4; --bg2:#eaeeed; --card:#fff;
  --c1:#1e2a2f; --c2:#2d3d45; --c3:#7a8f98;
  --sh:0 2px 12px rgba(57,77,86,.10);
  --sh2:0 6px 28px rgba(57,77,86,.18);
  --sh3:0 12px 48px rgba(57,77,86,.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Tajawal',Tahoma,sans-serif;background:var(--bg);color:var(--c1);font-size:16px;line-height:1.85;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* TOPBAR */
/* topbar removed */

/* NAVBAR */
.navbar{background:var(--p1);position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,0,0,.28);border-bottom:3px solid var(--ac);}
.nb-inner{max-width:1260px;margin:0 auto;padding:0 28px;display:flex;align-items:center;}
.nb-brand{display:flex;align-items:center;gap:11px;padding:7px 18px 7px 0;border-left:1px solid rgba(206,190,165,.22);margin-left:6px;text-decoration:none;flex-shrink:0;}
/* Logo in navbar: larger and clearer */
.nb-logo{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;display:block;}
.nb-brand-title{font-size:13px;font-weight:800;color:#fff;display:block;line-height:1.2;}
.nb-brand-sub{font-size:10px;color:var(--ac);display:block;}
.nb-links{display:flex;flex:1;list-style:none;overflow-x:auto;}
.nb-links li a{display:flex;align-items:center;gap:6px;padding:17px 11px;color:rgba(255,255,255,.72);text-decoration:none;font-size:12px;font-weight:600;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap;}
.nb-links li a:hover,.nb-links li a.active{color:#fff;border-bottom-color:var(--ac);background:rgba(206,190,165,.09);}
.nb-num{width:19px;height:19px;background:rgba(206,190,165,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--ac);flex-shrink:0;}

/* HERO */
.hero{background:linear-gradient(135deg,var(--p2) 0%,var(--p1) 45%,var(--tl2) 100%);position:relative;overflow:hidden;}
.hero-arc1{position:absolute;top:-80px;right:-60px;width:400px;height:400px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));opacity:.11;pointer-events:none;}
.hero-arc2{position:absolute;bottom:-100px;left:-60px;width:320px;height:320px;border-radius:50%;background:var(--tl3);opacity:.08;pointer-events:none;}
.hero-dots{position:absolute;top:0;right:0;bottom:0;width:40%;background-image:radial-gradient(rgba(206,190,165,.16) 1.5px,transparent 1.5px);background-size:22px 22px;pointer-events:none;}
.hero-inner{max-width:1260px;margin:0 auto;padding:52px 28px 48px;position:relative;z-index:2;}

/* Logo block — prominent, above title */
.hero-logo-wrap{
  display:flex;align-items:center;gap:18px;
  margin-bottom:24px;
}
/* Large clear logo */
.hero-logo{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;display:block;}
.hero-logo-text{}
.hero-univ-name{
  font-size:22px;font-weight:900;color:#fff;
  display:block;line-height:1.2;margin-bottom:3px;
}
.hero-univ-sub{
  font-size:13px;color:var(--ac);
  display:block;font-weight:600;
}
.hero-logo-divider{
  width:1px;height:70px;
  background:linear-gradient(to bottom,transparent,rgba(206,190,165,.5),transparent);
  flex-shrink:0;
}

.hero-title{font-family:'Cairo',sans-serif;font-size:36px;font-weight:900;color:#fff;line-height:1.2;margin-bottom:8px;}
.hero-title em{color:var(--ac);font-style:normal;}
.hero-sub{font-size:15px;color:rgba(255,255,255,.65);margin-bottom:18px;}
.hero-desc{font-size:13px;color:rgba(255,255,255,.52);line-height:1.9;max-width:640px;border-right:3px solid rgba(206,190,165,.35);padding-right:14px;margin-bottom:26px;}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;}
.hero-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px 13px;cursor:pointer;transition:background .2s;}.hero-pill:hover{background:rgba(255,255,255,.18);}
.pill-num{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;}
.pn1{background:var(--gr);} .pn2{background:var(--tl);} .pn3{background:var(--p3);} .pn4{background:var(--ac2);} .pn5{background:#4a3210;} .pn6{background:#2a5a5e;}
.pill-text{font-size:11.5px;color:rgba(255,255,255,.80);font-weight:600;}

/* STATS */
.stats{background:var(--card);box-shadow:var(--sh);border-bottom:3px solid var(--ac);}
.stats-inner{max-width:1260px;margin:0 auto;padding:0 28px;display:flex;justify-content:center;}
.stat{padding:20px 80px;text-align:center;border-left:1px solid var(--bg2);position:relative;}
.stat:last-child{border-left:none;}
.stat::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:3px;background:var(--p1);transition:width .3s;}
.stat:hover::after{width:55%;}
.stat-num{font-size:34px;font-weight:900;color:var(--p1);line-height:1;margin-bottom:4px;}
.stat-lbl{font-size:12px;color:var(--c3);font-weight:600;}

/* INTRO BAR */
.intro-bar{background:linear-gradient(90deg,var(--ac3),#fff);border-bottom:2px solid rgba(206,190,165,.28);}
.intro-inner{max-width:1260px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:12px;}
.intro-ic{width:30px;height:30px;border-radius:8px;background:var(--p1);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.intro-txt{font-size:13.5px;color:var(--c2);line-height:1.6;}
.intro-txt strong{color:var(--p2);font-weight:800;}

/* PAGE LAYOUT */
.page-wrap{max-width:1260px;margin:0 auto;padding:34px 28px 80px;display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:start;}

/* SIDEBAR */
.sidebar{position:sticky;top:56px;}
.sb-card{background:var(--card);border-radius:12px;box-shadow:var(--sh);overflow:hidden;}
.sb-head{background:var(--p1);padding:13px 15px;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--ac);}
.sb-list{list-style:none;}
.sb-list li a{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:12px;color:var(--c2);font-weight:600;text-decoration:none;border-bottom:1px solid var(--bg2);transition:all .2s;line-height:1.4;}
.sb-list li a:hover,.sb-list li a.active{background:var(--ac3);color:var(--p2);padding-right:18px;border-right:3px solid var(--p1);}
.sb-list li:last-child a{border-bottom:none;}
.sb-n{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;}
.sn1{background:var(--gr);} .sn2{background:var(--tl);} .sn3{background:var(--p3);} .sn4{background:var(--ac2);} .sn5{background:#4a3210;} .sn6{background:#2a5a5e;}
.sb-count{margin-right:auto;font-size:10px;color:var(--c3);background:var(--bg2);border-radius:10px;padding:1px 7px;font-weight:700;flex-shrink:0;}

/* MAIN */
.main{min-width:0;}
.axis-sec{margin-bottom:44px;}

/* AXIS BAR */
.ax-bar{border-radius:12px;padding:20px 24px;margin-bottom:16px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;}
.ax-bar::after{content:attr(data-n);position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:84px;font-weight:900;color:rgba(255,255,255,.07);line-height:1;pointer-events:none;}
.ax1{background:linear-gradient(135deg,#2d4a3a,#4a7a5a);}
.ax2{background:linear-gradient(135deg,var(--tl2),var(--tl3));}
.ax3{background:linear-gradient(135deg,var(--p2),var(--p3));}
.ax4{background:linear-gradient(135deg,#4a3d1e,var(--ac2));}

.ax-num{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.24);}
.ax-txt{flex:1;}
.ax-ey{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:2px;display:block;}
.ax-title{font-family:'Cairo',sans-serif;font-size:19px;font-weight:900;color:#fff;line-height:1.3;}
.ax-sub{font-size:11.5px;color:rgba(255,255,255,.52);margin-top:3px;}
.ax-cnt{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 14px;text-align:center;flex-shrink:0;}
.ax-cnt-n{font-size:20px;font-weight:900;color:#fff;line-height:1;}
.ax-cnt-l{font-size:10px;color:rgba(255,255,255,.55);}

/* ══ CARDS GRID — all 3 equal columns, all cards same size ══ */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
  align-items:stretch;
}
/* ax1 cards: equal height columns, bridge hidden by default so heights match */
.cards-grid .fc{
  height:100%;
}
.fc{
  background:var(--card);border-radius:10px;
  overflow:hidden;box-shadow:var(--sh);
  display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s;
  border:1px solid rgba(57,77,86,.05);
}
.fc:hover{transform:translateY(-3px);box-shadow:var(--sh2);}
.fc-bar{height:3px;flex-shrink:0;}
.ax1 .fc-bar{background:linear-gradient(90deg,#2d4a3a,#4a7a5a,#6aa870);}
.ax2 .fc-bar{background:linear-gradient(90deg,var(--tl2),var(--tl),var(--tl3));}
.ax3 .fc-bar{background:linear-gradient(90deg,var(--p2),var(--p1),var(--p3));}
.ax4 .fc-bar{background:linear-gradient(90deg,#4a3d1e,var(--ac2),var(--ac));}
.ax5 .fc-bar{background:linear-gradient(90deg,#1e3a4a,#2a6a7a,#4a9aaa);}
.fc-inner{padding:16px;flex:1;}
.fc-row{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.fc-ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ax1 .fc-ic{background:#e8f4ec;} .ax2 .fc-ic{background:#e0f2f2;} .ax3 .fc-ic{background:#e8eef2;} .ax4 .fc-ic{background:var(--ac3);} .ax5 .fc-ic{background:#e0eef2;}
.fc-tag{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.ax1 .fc-tag{color:#4a7a5a;} .ax2 .fc-tag{color:var(--tl);} .ax3 .fc-tag{color:var(--p3);} .ax4 .fc-tag{color:var(--ac2);} .ax5 .fc-tag{color:#2a6a7a;}

/* ── AX5 (الإرشاد الأكاديمي) — بنفسجي قريب من هوية الموقع ── */
.pn5{background:#4a3210;}
.sn5{background:#4a3210;}
.ax5{background:linear-gradient(135deg,#4a3210,#7a5a18);}
.ax5 .fc-bar{background:linear-gradient(90deg,#4a3210,#7a5a18,#7a5aaa);}
.ax5 .fc-ic{background:#fdf8ee;}
.ax5 .fc-tag{color:#7a5a18;}
/* ── AX6 (الشراكات) — الألوان القديمة لـ ax5 ── */
.pn6{background:#2a5a5e;}
.sn6{background:#2a5a5e;}
.ax6{background:linear-gradient(135deg,#1e3a4a,#2a6a7a);}
.ax6 .fc-bar{background:linear-gradient(90deg,#1e3a4a,#2a6a7a,#4a9aaa);}
.ax6 .fc-ic{background:#e0eef2;}
.ax6 .fc-tag{color:#2a6a7a;}

.fc-title{font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;color:var(--c1);margin-bottom:8px;line-height:1.4;}
.fc-text{font-size:13.5px;color:var(--c2);line-height:1.9;font-weight:400;}
.fc-foot{padding:9px 16px;background:var(--bg);border-top:1px solid var(--bg2);font-size:11px;color:var(--c3);font-weight:600;flex-shrink:0;}

/* ══ LICENSE TOGGLE — compact inside card 3 ══ */
.lic-toggle{margin-top:12px;border-radius:7px;overflow:hidden;border:1px solid rgba(54,112,116,.22);}
.lic-toggle-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;background:linear-gradient(135deg,var(--tl2),var(--tl));
  border:none;cursor:pointer;font-family:inherit;
}
.lic-toggle-btn:hover{opacity:.90;}
.lic-toggle-title{font-size:12px;font-weight:800;color:#fff;display:block;}
.lic-toggle-hint{font-size:9.5px;color:rgba(255,255,255,.60);display:block;margin-top:1px;}
.lic-toggle-meta{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.lic-count-pill{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:800;color:#fff;}
.lic-arrow{font-size:12px;color:#fff;transition:transform .3s;display:inline-block;}
.lic-arrow.open{transform:rotate(180deg);}
.lic-panel{display:none;background:var(--bg);padding:8px;animation:slideDown .25s ease;}
.lic-panel.open{display:block;}
@keyframes slideDown{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}}
.lmc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.lmc{background:#fff;border-radius:7px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:0 1px 5px rgba(57,77,86,.10);border:1px solid rgba(57,77,86,.05);}
.lmc:hover{transform:translateY(-2px);box-shadow:var(--sh2);}
.lmc-top{padding:7px 9px 5px;display:flex;align-items:center;justify-content:space-between;}
.lmc-icon{font-size:16px;}
.lmc-ok{font-size:9px;font-weight:800;color:rgba(255,255,255,.88);background:rgba(255,255,255,.2);border-radius:20px;padding:1px 5px;}
.lmc-body{padding:4px 7px 8px;}
.lmc-name{font-size:10.5px;font-weight:800;color:var(--c1);line-height:1.3;margin-bottom:3px;}
.lmc-num{font-size:8.5px;color:var(--c3);font-family:monospace;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lmc-btn{width:100%;padding:4px 2px;border-radius:4px;background:transparent;border:1px solid var(--c,#394D56);color:var(--c,#394D56);font-family:inherit;font-size:9px;font-weight:700;cursor:pointer;transition:all .18s;}
.lmc-btn:hover{background:var(--c,#394D56);color:#fff;}

/* DIVIDER */
.ax-div{height:1px;background:linear-gradient(90deg,transparent,var(--ac),transparent);margin:40px 0;}

/* MODALS */
.modal-ov{display:none;position:fixed;inset:0;z-index:1000;background:rgba(30,42,47,.70);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px;}
.modal-ov.open{display:flex;}
.modal-box{background:#fff;border-radius:14px;overflow:hidden;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--sh3);animation:mIn .25s ease;}
@keyframes mIn{from{transform:scale(.93);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-x{position:absolute;top:7px;left:10px;z-index:10;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);border:none;color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.modal-x:hover{background:rgba(255,255,255,.38);}
.modal-head{padding:7px 14px 7px 40px;display:flex;align-items:center;gap:10px;}
.modal-eyebrow{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:1px;display:block;}
.modal-htitle{font-size:12px;font-weight:800;color:#fff;}
.modal-hen{font-size:12px;color:rgba(255,255,255,.62);}
.modal-imgwrap{padding:16px;background:var(--bg);display:flex;justify-content:center;}
.modal-img{max-width:100%;border-radius:7px;box-shadow:var(--sh2);}
.modal-foot{padding:12px 16px;background:#fff;border-top:1px solid var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.modal-foot-info{display:flex;gap:14px;flex-wrap:wrap;}
.modal-foot-info span{font-size:12px;color:var(--c3);}
.modal-foot-info strong{color:var(--c1);font-family:monospace;}
.modal-ncel-tag{font-size:11px;font-weight:700;color:var(--tl);background:#e0f2f2;border-radius:20px;padding:3px 11px;}

/* FOOTER */
.footer{background:var(--p2);}
.ft-top{max-width:1260px;margin:0 auto;padding:34px 28px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:26px;border-bottom:1px solid rgba(206,190,165,.14);}
.ft-brand{display:flex;flex-direction:column;gap:9px;}
.ft-logo{width:80px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));}
.ft-name{font-size:14px;font-weight:800;color:#fff;}
.ft-sub{font-size:11px;color:var(--ac);}
.ft-desc{font-size:12px;color:rgba(255,255,255,.46);line-height:1.7;}
.ft-contacts{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.ft-contact{font-size:11.5px;color:rgba(255,255,255,.43);}
.ft-col h4{font-size:11px;font-weight:700;color:var(--ac);margin-bottom:10px;letter-spacing:1px;text-transform:uppercase;}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.ft-col ul li{font-size:11.5px;color:rgba(255,255,255,.50);display:flex;align-items:center;gap:6px;}
.ft-col ul li::before{content:'›';color:var(--ac);font-weight:700;}
.ft-bottom{max-width:1260px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.35);}
.ft-bottom-brand{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.42);}
.ft-bottom-brand img{width:48px;height:auto;}

/* RESPONSIVE */
@media(max-width:1100px){.ft-top{grid-template-columns:1fr 1fr;}}
@media(max-width:1024px){
  .page-wrap{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .cards-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .ft-top{grid-template-columns:1fr;}
  .cards-grid{grid-template-columns:1fr;}
  .lmc-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{padding:36px 20px 32px;}
  .hero-logo{width:100px;}
  .hero-univ-name{font-size:18px;}
}
@media(max-width:640px){
  .topbar{display:none;}
  .hero-title{font-family:'Cairo',sans-serif;font-size:24px;}
  .page-wrap{padding:20px 14px 60px;}
  .ax-bar{padding:14px 16px;}
  .ax-title{font-size:16px;}
  .stat{padding:18px 40px;}
}





/* ══ PARTNERS DROPDOWN ══ */


.partners-btn:hover { opacity: .88; }
.partners-btn-icon { font-size: 15px; }
.partners-btn-title { font-size: 13px; font-weight: 800; color: #fff; flex: 1; text-align: right; }
.partners-btn-count { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 2px 9px; font-size: 10px; font-weight: 700; color: #fff; }
.partners-btn-arrow { font-size: 11px; color: #fff; transition: transform .3s; }
.partners-btn-arrow.open { transform: rotate(180deg); }
.partners-panel { display: none; background: var(--bg); padding: 10px; animation: slideDown .22s ease; }
.partners-panel.open { display: block; }






.partner-name-en { font-size: 10px; color: var(--c3); font-weight: 600; text-align: center; }


/* ══ PARTNERS GRID ══ */






.partner-card:hover 

.partner-name-en {
  font-size: 10px;
  color: var(--c3);
  text-align: center;
  font-weight: 600;
}

/* ══ BRIDGE PROGRAM CARDS ══ */
.prog-bridge-cards {
  margin-top: 12px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(42,122,82,.22);
}
.bridge-toggle-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #2d4a3a, #4a7a5a);
  border: none; cursor: pointer; font-family: inherit;
  transition: opacity .2s;
}
.bridge-toggle-btn:hover { opacity: .90; }
.bridge-toggle-title { font-size: 12px; font-weight: 800; color: #fff; flex: 1; text-align: right; }
.bridge-toggle-count { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 2px 9px; font-size: 10px; font-weight: 800; color: #fff; }
.bridge-toggle-arrow { font-size: 11px; color: #fff; transition: transform .3s; }
.bridge-toggle-arrow.open { transform: rotate(180deg); }
.bridge-panel { display: none; background: var(--bg); padding: 8px; animation: slideDown .22s ease; }
.bridge-panel.open { display: block; }
.bridge-prog-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.bridge-prog-item {
  background: #fff; border-radius: 6px;
  border: 1px solid rgba(57,77,86,.07);
  box-shadow: 0 1px 4px rgba(57,77,86,.07);
  cursor: pointer; transition: box-shadow .18s;
  overflow: hidden;
}
.bridge-prog-item:hover { box-shadow: var(--sh2); }
.bridge-prog-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
}
.bridge-prog-ic {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.bridge-prog-name-txt { font-size: 12px; font-weight: 800; color: var(--c1); flex: 1; text-align: right; }
.bridge-prog-total { font-size: 11px; font-weight: 700; color: var(--c3); white-space: nowrap; }
.bridge-prog-arrow { font-size: 10px; color: var(--c3); transition: transform .25s; flex-shrink: 0; }
.bridge-prog-arrow.open { transform: rotate(180deg); }
.bridge-stats-row {
  display: none;
  padding: 0 10px 9px;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-end;
  animation: slideDown .2s ease;
}
.bridge-stats-row.open { display: flex; }
.bsr-item { display: flex; align-items: center; gap: 5px; }
.bsr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bsr-dot.male { background: #1e4d7d; }
.bsr-dot.female { background: #2a5a5e; }
.bsr-dot.total { background: var(--gr); }
.bsr-label { font-size: 11px; color: var(--c3); font-weight: 600; }
.bsr-num { font-size: 13px; font-weight: 900; color: var(--c1); }
.bsr-sep { color: var(--bg2); font-size: 14px; }


/* Program dropdowns inside field card 2 *//* Program dropdowns inside field card 2 */
.prog-toggles { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.prog-toggle-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 7px;
  background: linear-gradient(135deg, #2d4a3a, #4a7a5a);
  border: none; cursor: pointer; font-family: inherit;
  color: #fff; font-size: 12px; font-weight: 700;
  transition: opacity .2s;
}
.prog-toggle-btn:hover { opacity: .88; }
.prog-toggle-btn span:first-child { flex: 1; text-align: right; }
.prog-count {
  background: rgba(255,255,255,.2); border-radius: 20px;
  padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.prog-arrow { font-size: 11px; transition: transform .3s; }
.prog-arrow.open { transform: rotate(180deg); }
.prog-panel {
  display: none; background: var(--bg);
  border-radius: 0 0 7px 7px;
  border: 1px solid rgba(42,122,82,.2);
  border-top: none;
  animation: slideDown .22s ease;
}
.prog-panel.open { display: block; }
.prog-list {
  list-style: none; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.prog-list li {
  font-size: 11.5px; color: var(--c2);
  padding: 4px 0;
  border-bottom: 1px solid var(--bg2);
  display: flex; align-items: center; gap: 6px;
}
.prog-list li::before { content: '◈'; color: var(--gr); font-size: 9px; flex-shrink: 0; }
.prog-list li:last-child { border-bottom: none; }

/* Seer link button inside field card */
.fc-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--p2), var(--p1));
  color: #fff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 2px 8px rgba(57,77,86,.25);
}
.fc-link-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Footer dynamic links */
.ft-link {
  color: rgba(255,255,255,.52);
  text-decoration: none;
  transition: color .2s;
  display: inline;
}
.ft-link:hover { color: var(--ac); text-decoration: underline; }
.ft-link-ext { color: rgba(255,255,255,.60) !important; }
.ft-link-ext:hover { color: var(--tl3) !important; }

/* Force Western Arabic numerals throughout */
* { font-variant-numeric: normal; }
body, .stat-num, .bsr-num, .bridge-prog-total, .lmc-num, 
.modal-foot-info, .lic-count-pill, .prog-count, .bridge-toggle-count,
.sb-count, .ax-cnt-n { 
  font-feature-settings: normal;
}

/* ══ PARTNER LIST (35 شركاء) ══ */
.partner-list { list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:0; }
.partner-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid rgba(57,77,86,.08); transition:background .15s; }
.partner-row:last-child { border-bottom:none; }
.partner-row:hover { background:rgba(54,112,116,.06); border-radius:6px; }
.partner-ic { border-radius:6px; background:rgba(255,255,255,.7); padding:3px; }
.partner-row-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.partner-row-name { font-size:12px; font-weight:700; color:var(--c1); line-height:1.3; }


/* Revenue Cards */
.rev-list{display:flex;flex-direction:column;gap:8px;padding:10px 12px;}
.rev-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:10px 12px;border:1px solid rgba(54,112,116,.15);box-shadow:0 1px 4px rgba(0,0,0,.06);}
.rev-num{width:24px;height:24px;border-radius:50%;background:var(--p1);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rev-info{flex:1;display:flex;flex-direction:column;gap:2px;}
.rev-name{font-size:13px;font-weight:700;color:var(--c1);}
.rev-partner{font-size:11px;color:var(--tl2);}
.rev-meta{font-size:10.5px;color:#888;}
.rev-amount-badge{background:linear-gradient(135deg,var(--tl2),var(--tl));color:#fff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:800;white-space:nowrap;flex-shrink:0;}
.rev-total-row{display:flex;align-items:center;justify-content:space-between;background:rgba(54,112,116,.08);border-radius:8px;padding:10px 14px;margin-top:4px;font-size:12px;font-weight:700;color:var(--tl2);}
.rev-total-amount{color:var(--ac);font-size:14px;font-weight:800;}

/* ===== ADDITIONAL STYLES ===== */

#partnershipsDBModal {
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(30,42,47,.72);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:20px;
  overflow-y:auto;
}
#partnershipsDBModal.open { display:flex; }
.pdb-shell {
  background:#fff;border-radius:16px;width:100%;max-width:1180px;
  box-shadow:0 20px 80px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  min-height:90vh;margin:auto;
  overflow:hidden;
  animation:pdbSlideIn .28s cubic-bezier(.22,.68,0,1.2);
}
@keyframes pdbSlideIn {
  from{opacity:0;transform:translateY(-24px) scale(.97);}
  to{opacity:1;transform:none;}
}
.pdb-topbar {
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#0f6e56,#367074);
  padding:14px 22px;flex-shrink:0;
}
.pdb-topbar-title {
  display:flex;align-items:center;gap:10px;
  color:#fff;font-family:'Tajawal',Tahoma,sans-serif;
  font-size:16px;font-weight:800;
}
.pdb-topbar-title span.pdb-icon {
  width:36px;height:36px;background:rgba(255,255,255,.18);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.pdb-close-btn {
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:20px;width:36px;height:36px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;font-family:sans-serif;
}
.pdb-close-btn:hover{background:rgba(255,255,255,.28);}
.pdb-body {
  flex:1;overflow:auto;
  background:#f7f6f3;
}
.pdb-body iframe {
  width:100%;border:none;display:block;
  height:calc(90vh - 64px);
}

/* ===== ADDITIONAL STYLES ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f7f6f3; --surface: #ffffff; --surface2: #f1f0ec;
    --border: rgba(0,0,0,0.1); --border2: rgba(0,0,0,0.18);
    --text: #1a1a18; --text2: #6b6b68; --text3: #9a9a96;
    --primary: #0f6e56; --primary-light: #e1f5ee;
    --gov: #185fa5; --gov-light: #e6f1fb;
    --priv: #854f0b; --priv-light: #faeeda;
    --active: #3b6d11; --active-light: #eaf3de;
    --expired: #a32d2d; --expired-light: #fcebeb;
    --new-c: #534ab7; --new-light: #eeedfe;
    --radius: 10px; --radius-sm: 6px;
  }
  body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; direction: rtl; }
  .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
  .kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-bottom: 1.2rem; }
  .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; position: relative; overflow: hidden; }
  .kpi-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--accent, var(--primary)); border-radius: 0 var(--radius) var(--radius) 0; }
  .kpi-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
  .kpi-value { font-size: 24px; font-weight: 700; color: var(--accent, var(--primary)); }
  .toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
  .toolbar input, .toolbar select { font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: var(--bg); color: var(--text); direction: rtl; outline: none; }
  .toolbar input { flex: 1; min-width: 160px; }
  .toolbar input:focus, .toolbar select:focus { border-color: var(--primary); }
  .toolbar label { font-size: 12px; color: var(--text2); white-space: nowrap; }
  .charts-row { display: grid; grid-template-columns: 300px 1fr; gap: 10px; margin-bottom: 1.2rem; }
  .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
  .chart-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
  .chart-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text2); }
  .legend-item { display: flex; align-items: center; gap: 4px; }
  .legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
  .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.2rem; }
  .table-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
  .table-header h3 { font-size: 13px; font-weight: 600; }
  .table-header .count { font-size: 12px; color: var(--text2); }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  thead th { padding: 9px 12px; text-align: right; font-weight: 600; font-size: 11px; color: var(--text2); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
  tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--surface2); }
  tbody tr.selected { background: #e8f4f1; }
  td { padding: 10px 12px; vertical-align: middle; }
  .td-name { font-weight: 500; }
  .td-num { text-align: center; font-weight: 600; }
  .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
  .detail-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 1.2rem; display: none; }
  .detail-panel.show { display: block; }
  .detail-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .detail-meta { font-size: 12px; color: var(--text2); margin-bottom: 12px; }
  .detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
  .detail-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; }
  .detail-stat-label { font-size: 11px; color: var(--text2); margin-bottom: 3px; }
  .detail-stat-val { font-size: 16px; font-weight: 700; color: var(--text); }
  .detail-section { margin-bottom: 10px; }
  .detail-section-title { font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
  .detail-section-body { font-size: 13px; line-height: 1.6; color: var(--text); background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; }
  .close-detail-btn { background: none; border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--text2); }
  .close-detail-btn:hover { background: var(--surface2); }
  @media(max-width:700px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.charts-row{grid-template-columns:1fr;}.detail-stats{grid-template-columns:repeat(2,1fr);}}
<\/style>
<\/head>
<body>
<div class="container">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
    <div>
      <h1 style="font-size:18px;font-weight:800;color:var(--primary);">🔗 قاعدة بيانات شراكات الكلية التطبيقية</h1>
      <p style="font-size:12px;color:var(--text2);margin-top:3px;">الكلية التطبيقية — جامعة المجمعة · المحور الخامس / المجال الأول</p>
    </div>
  </div>

  <div class="kpi-grid" id="kpiGrid"></div>

  <div class="toolbar">
    <input type="search" id="search" placeholder="🔍  ابحث عن شريك..." oninput="applyFilters()">
    <label>الحالة</label>
    <select id="statusFilter" onchange="applyFilters()">
      <option value="">الكل</option>
      <option>سارية</option><option>منتهية</option><option>جديدة</option>
    </select>
    <label>القطاع</label>
    <select id="sectorFilter" onchange="applyFilters()">
      <option value="">الكل</option>
      <option>حكومي</option><option>غير حكومي</option>
    </select>
  </div>

  <div class="charts-row">
    <div class="chart-card">
      <h3>توزيع حالات الاتفاقيات</h3>
      <div style="height:160px;"><canvas id="statusChart"></canvas></div>
      <div class="chart-legend" id="statusLegend"></div>
    </div>
    <div class="chart-card">
      <h3>أعلى الشركاء تأثيراً (تدريب + توظيف)</h3>
      <div style="height:180px;"><canvas id="topChart"></canvas></div>
    </div>
  </div>

  <div id="detailPanel" class="detail-panel">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;">
      <div>
        <p class="detail-name" id="dName"></p>
        <p class="detail-meta" id="dMeta"></p>
      </div>
      <button class="close-detail-btn" onclick="closeDetail()">✕ إغلاق</button>
    </div>
    <div class="detail-stats" id="dStats"></div>
    <div class="detail-section" id="dBenWrap"><p class="detail-section-title">المنافع والإنجازات</p><p class="detail-section-body" id="dBen"></p></div>
    <div class="detail-section" id="dEvWrap"><p class="detail-section-title">الفعاليات المشتركة</p><p class="detail-section-body" id="dEv"></p></div>
  </div>

  <div class="table-card">
    <div class="table-header">
      <h3>قائمة الاتفاقيات</h3>
      <span class="count" id="countLabel"></span>
    </div>
    <div style="overflow-x:auto;">
      <table><thead><tr>
        <th>#</th><th>اسم الجهة</th><th>القطاع</th><th>تاريخ التوقيع</th><th>تاريخ الانتهاء</th><th>الحالة</th><th>مستفيدو التدريب</th><th>مستفيدو التوظيف</th>
      </tr></thead>
      <tbody id="tableBody"></tbody></table>
    </div>
  </div>
</div>
<script>
const DB=[
  {id:1,name:'الغرفة التجارية بالمجمعة',sector:'حكومي',signed:'2019-12-09',end:'2022-12-08',status:'منتهية',training:325,employment:10,benefits:'تدريب عدد 325 طالب وطالبة من الكلية، وتوظيف 10 خريجين.',events:''},
  {id:2,name:'مستشفى الملك سعود بالمجمعة',sector:'حكومي',signed:'2021-05-10',end:'2024-05-09',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:3,name:'مستشفى قوى الأمن بالمجمعة',sector:'حكومي',signed:'2021-06-01',end:'2024-05-31',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:4,name:'شركة التنمية المعلوماتية',sector:'غير حكومي',signed:'2023-05-16',end:'2026-05-15',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:5,name:'الغرفة التجارية بالمجمعة (تجديد)',sector:'حكومي',signed:'2023-05-30',end:'2026-05-29',status:'سارية',training:275,employment:0,benefits:'تدريب ميداني لعدد 275 طالباً وطالبة.',events:''},
  {id:6,name:'مستشفى الأمل للصحة النفسية بالرياض',sector:'حكومي',signed:'2023-06-21',end:'2026-06-20',status:'سارية',training:15,employment:0,benefits:'تدريب 15 طالبة في مجال الخدمة النفسية والاجتماعية.',events:''},
  {id:7,name:'الجمعية السعودية لطب الأسرة والمجتمع',sector:'غير حكومي',signed:'2023-08-14',end:'2026-08-13',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:8,name:'إمارة منطقة الرياض — محافظة المجمعة',sector:'حكومي',signed:'2023-09-20',end:'2026-09-19',status:'سارية',training:0,employment:0,benefits:'',events:'إقامة ورشة عمل استراتيجية مشتركة.'},
  {id:9,name:'مدارس الرواد الأهلية',sector:'غير حكومي',signed:'2024-01-14',end:'2027-01-13',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:10,name:'الكلية التطبيقية بجامعة جدة',sector:'حكومي',signed:'2024-02-19',end:'2025-02-18',status:'منتهية',training:0,employment:0,benefits:'',events:''},
  {id:11,name:'شركة أسواق عبدالله العثيم',sector:'غير حكومي',signed:'2024-06-03',end:'2026-07-03',status:'منتهية',training:70,employment:7,benefits:'',events:''},
  {id:12,name:'شركة الاختيار الآمن للخدمات اللوجستية',sector:'غير حكومي',signed:'2024-04-17',end:'2027-06-16',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:13,name:'الاتحاد السعودي للثقافة الرياضية',sector:'حكومي',signed:'2024-05-13',end:'2027-12-05',status:'سارية',training:22,employment:0,benefits:'تنفيذ برنامج دبلوم الثقافة الرياضية ودبلوم الإدارة الرياضية والترويحية لعدد 37 مستفيداً.',events:''},
  {id:14,name:'شركة نمو العالي للتدريب والتعليم',sector:'غير حكومي',signed:'2024-06-03',end:'2026-02-06',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:15,name:'المركز الوطني لتنمية القطاع غير الربحي',sector:'غير حكومي',signed:'2024-09-04',end:'2027-09-03',status:'سارية',training:0,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم إدارة المنظمات غير الربحية لعدد 40 مستفيداً.',events:''},
  {id:16,name:'شركة صفا للاستثمار',sector:'غير حكومي',signed:'2024-11-11',end:'2027-10-11',status:'سارية',training:8,employment:0,benefits:'تدريب وتوظيف عدد من طلاب الكلية لعدد 8 مستفيدين.',events:''},
  {id:17,name:'المركز الوطني لتنمية الغطاء النباتي ومكافحة التصحر',sector:'حكومي',signed:'2024-12-05',end:'2027-12-04',status:'سارية',training:0,employment:0,benefits:'المشاركة في الفعاليات لعدد 470 مستفيداً.',events:''},
  {id:18,name:'مؤسسة سعي الوقفية لتأهيل وتوظيف الأشخاص ذوي الإعاقة',sector:'غير حكومي',signed:'2025-02-05',end:'2027-04-12',status:'سارية',training:0,employment:0,benefits:'الموافقة على تدريب طلاب دبلوم الإدارة لذوي الإعاقة لعدد 25 مستفيداً. جاري تنفيذ دبلوم الإدارة لذوي الإعاقة.',events:'المشاركة في ملتقى شركاء النجاح.'},
  {id:19,name:'مركز عبدالرحمن السديري الثقافي',sector:'غير حكومي',signed:'2025-04-23',end:'2028-04-22',status:'سارية',training:70,employment:0,benefits:'تنفيذ دورة اللغة الإنجليزية بالصيف للذكور والإناث بعدد 30 ساعة تدريبية لعدد 70 مستفيداً.',events:''},
  {id:20,name:'المعهد الوطني للتدريب الصناعي',sector:'حكومي',signed:'2025-06-24',end:'2028-06-23',status:'سارية',training:0,employment:0,benefits:'المشاركة في تنفيذ برنامج دبلوم تقنية الهندسة الصناعية.',events:''},
  {id:21,name:'الأكاديمية الوطنية للطاقة',sector:'حكومي',signed:'2025-06-24',end:'2028-06-23',status:'سارية',training:0,employment:0,benefits:'المشاركة في تنفيذ برنامج دبلوم تقنية الهندسة الصناعية.',events:''},
  {id:22,name:'شركة الدواء للخدمات الطبية',sector:'غير حكومي',signed:'2025-10-13',end:'2028-12-10',status:'سارية',training:0,employment:0,benefits:'',events:''},
  {id:23,name:'نادي الفيحاء الرياضي',sector:'غير حكومي',signed:'2025-10-20',end:'2028-10-09',status:'سارية',training:33,employment:0,benefits:'تنفيذ ورشة الحوكمة في القطاع الرياضي لعدد 15 مستفيداً. ورشة تحسين كفاءة الأداء الوظيفي لعدد 18 مستفيداً.',events:''},
  {id:24,name:'جمعية سواعد بالمجمعة',sector:'غير حكومي',signed:'2025-10-20',end:'2028-10-09',status:'سارية',training:40,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم تنمية الموارد المالية للمنظمات غير الربحية لعدد 40 مستفيداً.',events:''},
  {id:25,name:'شركة تنمية الإنسان',sector:'غير حكومي',signed:'2025-11-02',end:'2028-11-01',status:'سارية',training:100,employment:0,benefits:'جاري العمل على تنفيذ برنامج دبلوم الإدارة لذوي الإعاقة لعدد 100 مستفيداً.',events:''},
  {id:26,name:'الغرفة التجارية بالزلفي',sector:'حكومي',signed:'2025-11-05',end:'2028-11-04',status:'سارية',training:0,employment:0,benefits:'تدريب طلبة الكلية 75 حالياً و250 سابقاً. ورشة بوابتك نحو العمل التجاري. ورشة الاستعداد للمقابلة الشخصية. ورشة الإتيكيت والبروتوكول السعودي.',events:''},
  {id:27,name:'شركة نشرة محاسبون ومراجعون قانونيون',sector:'غير حكومي',signed:'2025-12-11',end:'2028-11-11',status:'جديدة',training:0,employment:0,benefits:'',events:''},
  {id:28,name:'شركة المتكاملة لصناعة الكابل والألياف البصرية',sector:'غير حكومي',signed:'2025-12-08',end:'2028-12-07',status:'جديدة',training:0,employment:0,benefits:'',events:''},
  {id:29,name:'شركة كومل',sector:'غير حكومي',signed:'2025-12-08',end:'2028-12-07',status:'جديدة',training:0,employment:0,benefits:'توقيع اتفاقية تدريب وفرص توظيف مشروطة لطلبة الكلية بعد التخرج لعدد 26 مستفيداً.',events:''},
];
let filtered=[...DB],selectedId=null,statusChart=null,topChart=null;
function fmtDate(s){if(!s)return'—';const d=new Date(s);if(isNaN(d))return s;return d.toLocaleDateString('ar-SA-u-nu-latn',{year:'numeric',month:'2-digit',day:'2-digit'});}
function statusBadge(s){const m={سارية:{bg:'#eaf3de',c:'#3b6d11'},منتهية:{bg:'#fcebeb',c:'#a32d2d'},جديدة:{bg:'#eeedfe',c:'#534ab7'}};const{bg,c}=m[s]||{bg:'#eee',c:'#888'};return\`<span class="badge" style="background:\${bg};color:\${c};">\${s}<\/span>\`;}
function sectorBadge(s){const g=s==='حكومي';return\`<span class="badge" style="background:\${g?'#e6f1fb':'#faeeda'};color:\${g?'#185fa5':'#854f0b'};">\${s}<\/span>\`;}
function renderKPIs(){const t=filtered.length,a=filtered.filter(d=>d.status==='سارية').length,e=filtered.filter(d=>d.status==='منتهية').length,tr=filtered.reduce((a,d)=>a+d.training,0),em=filtered.reduce((a,d)=>a+d.employment,0);document.getElementById('kpiGrid').innerHTML=[{label:'إجمالي الاتفاقيات',val:t,color:'#0f6e56'},{label:'اتفاقيات سارية',val:a,color:'#3b6d11'},{label:'اتفاقيات منتهية',val:e,color:'#a32d2d'},{label:'مستفيدو التدريب',val:tr,color:'#185fa5'},{label:'مستفيدو التوظيف',val:em,color:'#854f0b'}].map(k=>\`<div class="kpi-card" style="--accent:\${k.color}"><p class="kpi-label">\${k.label}<\/p><p class="kpi-value">\${k.val}<\/p><\/div>\`).join('');}
function renderTable(){document.getElementById('countLabel').textContent=\`\${filtered.length} اتفاقية\`;document.getElementById('tableBody').innerHTML=filtered.map(d=>\`<tr onclick="showDetail(\${d.id})" class="\${selectedId===d.id?'selected':''}"><td style="color:#9a9a96;font-size:11px;">\${d.id}<\/td><td class="td-name">\${d.name}<\/td><td>\${sectorBadge(d.sector)}<\/td><td style="color:#6b6b68;font-size:11px;">\${fmtDate(d.signed)}<\/td><td style="color:#6b6b68;font-size:11px;">\${fmtDate(d.end)}<\/td><td>\${statusBadge(d.status)}<\/td><td class="td-num" style="color:#185fa5;">\${d.training||'—'}<\/td><td class="td-num" style="color:#3b6d11;">\${d.employment||'—'}<\/td><\/tr>\`).join('');}
function renderCharts(){const sc={سارية:0,منتهية:0,جديدة:0};filtered.forEach(d=>sc[d.status]++);if(statusChart)statusChart.destroy();statusChart=new Chart(document.getElementById('statusChart'),{type:'doughnut',data:{labels:['سارية','منتهية','جديدة'],datasets:[{data:[sc.سارية,sc.منتهية,sc.جديدة],backgroundColor:['#3b6d11','#a32d2d','#534ab7'],borderWidth:2,borderColor:'#fff'}]},options:{responsive:true,maintainAspectRatio:false,cutout:'65%',plugins:{legend:{display:false}}}});document.getElementById('statusLegend').innerHTML=[{l:\`سارية: \${sc.سارية}\`,c:'#3b6d11'},{l:\`منتهية: \${sc.منتهية}\`,c:'#a32d2d'},{l:\`جديدة: \${sc.جديدة}\`,c:'#534ab7'}].map(x=>\`<div class="legend-item"><div class="legend-dot" style="background:\${x.c};"><\/div>\${x.l}<\/div>\`).join('');const top5=[...filtered].sort((a,b)=>(b.training+b.employment)-(a.training+a.employment)).slice(0,5);if(topChart)topChart.destroy();topChart=new Chart(document.getElementById('topChart'),{type:'bar',data:{labels:top5.map(d=>d.name.length>12?d.name.slice(0,12)+'…':d.name),datasets:[{label:'تدريب',data:top5.map(d=>d.training),backgroundColor:'#185fa5',borderRadius:4},{label:'توظيف',data:top5.map(d=>d.employment),backgroundColor:'#3b6d11',borderRadius:4}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{font:{size:10},color:'#6b6b68'},grid:{display:false}},y:{ticks:{font:{size:10},color:'#6b6b68'},grid:{color:'rgba(0,0,0,0.06)'}}}}});}
function applyFilters(){const s=document.getElementById('search').value.toLowerCase(),st=document.getElementById('statusFilter').value,se=document.getElementById('sectorFilter').value;filtered=DB.filter(d=>(!s||d.name.toLowerCase().includes(s))&&(!st||d.status===st)&&(!se||d.sector===se));selectedId=null;closeDetail();renderKPIs();renderTable();renderCharts();}
function showDetail(id){const d=DB.find(x=>x.id===id);if(!d)return;selectedId=id;document.getElementById('dName').textContent=d.name;document.getElementById('dMeta').textContent=\`\${d.sector} · اتفاقية رقم \${d.id} · \${statusLabels(d.status)}\`;document.getElementById('dStats').innerHTML=[{label:'تاريخ التوقيع',val:fmtDate(d.signed)},{label:'تاريخ الانتهاء',val:fmtDate(d.end)},{label:'مستفيدو التدريب',val:d.training},{label:'مستفيدو التوظيف',val:d.employment}].map(s=>\`<div class="detail-stat"><p class="detail-stat-label">\${s.label}<\/p><p class="detail-stat-val">\${s.val}<\/p><\/div>\`).join('');const bw=document.getElementById('dBenWrap');if(d.benefits){bw.style.display='block';document.getElementById('dBen').textContent=d.benefits;}else bw.style.display='none';const ew=document.getElementById('dEvWrap');if(d.events){ew.style.display='block';document.getElementById('dEv').textContent=d.events;}else ew.style.display='none';const p=document.getElementById('detailPanel');p.classList.add('show');p.scrollIntoView({behavior:'smooth',block:'nearest'});renderTable();}
function statusLabels(s){return{سارية:'الاتفاقية سارية',منتهية:'الاتفاقية منتهية',جديدة:'اتفاقية جديدة'}[s]||s;}
function closeDetail(){document.getElementById('detailPanel').classList.remove('show');selectedId=null;renderTable();}
renderKPIs();renderTable();renderCharts();
<\/script>
<\/body>
<\/html>`;
</script>

<!-- ===== NATGEO PUBLISHER MODAL ===== -->
<style>
#natGeoModal {
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:20px;
}
#natGeoModal.open { display:flex; }
.natgeo-shell {
  background:#111;border-radius:16px;max-width:640px;width:100%;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
  overflow:hidden;
  animation:pdbSlideIn .28s cubic-bezier(.22,.68,0,1.2);
}
.natgeo-topbar {
  display:flex;align-items:center;justify-content:space-between;
  background:#FFD700;padding:14px 20px;
}
.natgeo-topbar-title {
  font-family:'Tajawal',Tahoma,sans-serif;font-size:15px;font-weight:800;color:#111;
  display:flex;align-items:center;gap:8px;
}
.natgeo-close-btn {
  background:rgba(0,0,0,.15);border:none;color:#111;font-size:20px;
  width:34px;height:34px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.natgeo-close-btn:hover{background:rgba(0,0,0,.25);}
.natgeo-body {
  padding:24px;text-align:center;
}
.natgeo-img-wrap {
  background:#fff;border-radius:10px;padding:20px 30px;margin-bottom:16px;
  display:inline-block;
}
.natgeo-img {
  max-width:320px;width:100%;display:block;
}
.natgeo-desc {
  font-family:'Tajawal',Tahoma,sans-serif;color:#ccc;font-size:14px;line-height:1.7;margin-bottom:6px;
}

/* ===== ADDITIONAL STYLES ===== */

#vocabGateModal {
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:20px;
}
#vocabGateModal.open { display:flex; }
.vocabgate-shell {
  background:#0a0f2e;border-radius:16px;max-width:480px;width:100%;
  box-shadow:0 20px 80px rgba(0,0,0,.6);overflow:hidden;
  animation:pdbSlideIn .28s cubic-bezier(.22,.68,0,1.2);
}
.vocabgate-topbar {
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#2c7be5,#1a5cbf);padding:14px 20px;
}
.vocabgate-topbar-title {
  font-family:'Tajawal',Tahoma,sans-serif;font-size:15px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.vocabgate-close-btn {
  background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;
  width:34px;height:34px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vocabgate-close-btn:hover{background:rgba(255,255,255,.25);}
.vocabgate-body {
  padding:28px 24px;text-align:center;
}
.vocabgate-icon {
  font-size:64px;margin-bottom:12px;display:block;
}
.vocabgate-name {
  font-family:'Tajawal',Tahoma,sans-serif;color:#fff;font-size:22px;font-weight:800;margin-bottom:8px;
}
.vocabgate-desc {
  font-family:'Tajawal',Tahoma,sans-serif;color:#aac4f0;font-size:14px;line-height:1.7;margin-bottom:20px;
}
.vocabgate-btn {
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#2c7be5,#1a5cbf);
  color:#fff;border:none;border-radius:12px;padding:14px 28px;
  font-family:'Tajawal',Tahoma,sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 16px rgba(44,123,229,.5);
  transition:all .2s;
}
.vocabgate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(44,123,229,.6);}
/* ══ PARTNER ROW ══ */
.partner-list{list-style:none;display:flex;flex-direction:column;gap:3px;}
.partner-row{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#fff;border-radius:6px;border:1px solid rgba(57,77,86,.07);transition:background .18s;}
.partner-row:hover{background:var(--ac3);}
.partner-row img{width:32px;height:32px;object-fit:contain;border-radius:4px;flex-shrink:0;border:1px solid rgba(57,77,86,.07);}
.partner-row-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.partner-row-name{font-size:10.5px;font-weight:700;color:var(--c1);line-height:1.3;}
.partner-row-meta{font-size:9px;color:var(--c3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Typography Enhancements ── */
h2.ax-title,.ax-title{letter-spacing:-.01em;}
.fc-title{letter-spacing:-.005em;}
.hero-title{font-family:'Cairo',sans-serif;font-family:'Cairo',sans-serif;letter-spacing:-.02em;}
.sb-head,.nb-brand,.stat-lbl{font-family:'Cairo',sans-serif;}

/* ══ Pillars row — ركائز وتوجهات التطوير ══ */
.hero-pillars-wrap{
  margin:20px 0 4px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-pillars-label{
  font-size:9.5px;font-weight:900;
  color:var(--ac);letter-spacing:.18em;
  text-transform:uppercase;opacity:.9;
  font-family:'Cairo',sans-serif;
}
.hero-pillars-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.hero-pillar{
  display:flex;align-items:center;gap:8px;
  border-radius:30px;padding:8px 18px;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  cursor:default;
}
.hero-pillar:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.28);}
/* الركيزة 1: ذهبي — رؤية 2030 */
.hp1{
  background:linear-gradient(135deg,#8a6200,#c8a840);
  border:1px solid rgba(255,220,100,.35);
}
/* الركيزة 2: أزرق فيروزي — ريادة الجامعات */
.hp2{
  background:linear-gradient(135deg,#0d5a5e,#1a9da0);
  border:1px solid rgba(80,220,220,.25);
}
/* الركيزة 3: أخضر داكن — الخطة التفصيلية */
.hp3{
  background:linear-gradient(135deg,#1e4a2a,#2e8044);
  border:1px solid rgba(80,200,100,.22);
}
/* الركيزة 4: بنفسجي — الخطة الاستراتيجية */
.hp4{
  background:linear-gradient(135deg,#3a1a5a,#6a3a9a);
  border:1px solid rgba(160,100,220,.28);
}
.hero-pillar-ic{
  font-size:16px;line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
.hero-pillar-txt{
  font-size:11.5px;font-weight:800;color:#fff;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.25);
  font-family:'Tajawal',sans-serif;
}
@media(max-width:640px){
  .hero-pillar-txt{font-size:10px;}
  .hero-pillar{padding:6px 12px;gap:6px;}
  .hero-pillar-ic{font-size:14px;}
}

/* ══════════════════════════════════════════════════
   HERO SPLIT — ثنائي العمود (إنفوجراف + محتوى)
══════════════════════════════════════════════════ */
.hero-split{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;direction:rtl;}
.hero-infograph{position:relative;padding:14px 0 14px 10px;display:flex;flex-direction:column;gap:0;}
.hig-label{font-family:'Cairo',sans-serif;font-size:10px;font-weight:900;color:var(--ac);letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:16px;text-align:center;}
.hig-spine{position:absolute;right:22px;top:46px;bottom:22px;width:2px;background:linear-gradient(180deg,rgba(200,168,75,.8) 0%,rgba(26,157,160,.7) 33%,rgba(46,128,68,.7) 66%,rgba(106,58,154,.8) 100%);border-radius:2px;}
.hig-item{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;direction:rtl;}
.hig-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.6);z-index:1;position:relative;}
.hig-c1 .hig-dot{background:#c8a840;box-shadow:0 0 8px rgba(200,168,75,.5);}
.hig-c2 .hig-dot{background:#1a9da0;box-shadow:0 0 8px rgba(26,157,160,.5);}
.hig-c3 .hig-dot{background:#2e8044;box-shadow:0 0 8px rgba(46,128,68,.5);}
.hig-c4 .hig-dot{background:#6a3a9a;box-shadow:0 0 8px rgba(138,104,32,.5);}
.hig-card{flex:1;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 13px;transition:background .2s,transform .2s;backdrop-filter:blur(4px);}
.hig-card:hover{background:rgba(255,255,255,.16);transform:translateX(-3px);}
.hig-c1 .hig-card{border-right:3px solid #c8a840;}
.hig-c2 .hig-card{border-right:3px solid #1a9da0;}
.hig-c3 .hig-card{border-right:3px solid #2e8044;}
.hig-c4 .hig-card{border-right:3px solid #6a3a9a;}
.hig-icon{font-size:20px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));flex-shrink:0;}
.hig-body{flex:1;}
.hig-title{font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;color:#fff;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.hig-sub{font-size:9.5px;color:rgba(255,255,255,.6);margin-top:2px;line-height:1.4;}
.hero-main-col{}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;direction:rtl;}
  .hero-infograph{order:2;padding:0;}
  .hero-main-col{order:1;}
  .hig-spine{display:none;}
  .hig-item{margin-bottom:10px;}
}
@media(max-width:600px){.hig-title{font-size:10.5px;}.hig-icon{font-size:17px;}}