/* مكوّنات مشتركة عبر صفحات منصة تجويدي — تبني على tokens.css */

/* ===== الهيدر ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:1100px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; color:var(--navy);}
.logo .mark{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--sky-500),var(--navy));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:17px; font-weight:900; box-shadow:var(--shadow-sm);
}
.header-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; transition:var(--dur-base);
}
.icon-btn:hover{border-color:var(--sky-300); transform:translateY(-1px);}
.icon-btn svg{width:19px; height:19px; stroke:var(--navy-2);}
.badge-dot{
  position:absolute; top:-3px; left:-3px; background:var(--danger); color:var(--white);
  font-size:10px; font-weight:800; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--ivory);
}
.avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--pist-500),var(--pist-300));
  color:var(--white); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
nav.site-nav{display:flex; gap:6px;}
nav.site-nav a{
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--muted);
}
nav.site-nav a:hover{color:var(--sky-700); background:var(--sky-50);}
nav.site-nav a.active{color:var(--sky-700); background:var(--sky-50);}

/* ===== حاوية الصفحة ===== */
.wrap{max-width:1100px; margin:0 auto; padding:26px 24px 80px; position:relative; z-index:1;}
.narrow{max-width:760px;}

/* ===== بطاقة عامة ===== */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:20px 22px;
}
.card:hover{box-shadow:var(--shadow-md);}

/* ===== أزرار ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border-radius:999px; padding:10px 22px; font-size:13.5px; font-weight:700;
  border:1.5px solid transparent; transition:var(--dur-base); cursor:pointer;
}
.btn.primary{background:var(--sky-500); color:#fff;}
.btn.primary:hover{background:var(--sky-600);}
.btn.primary:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}
.btn.ghost{background:transparent; border-color:var(--sky-300); color:var(--sky-700);}
.btn.ghost:hover{background:var(--sky-50);}
.btn.success{background:var(--pist-500); color:#fff;}
.btn.success:hover{background:var(--pist-600);}

/* ===== شارات الحالة ===== */
.badge{display:inline-block; font-size:11px; padding:4px 11px; border-radius:999px; font-weight:700;}
.badge.done{background:var(--pist-100); color:var(--pist-700);}
.badge.doing{background:var(--sky-100); color:var(--sky-700);}
.badge.locked{background:var(--ivory); color:var(--muted); border:1px solid var(--line);}
.badge.draft{background:var(--danger-bg); color:var(--danger-700); border:1px dashed var(--danger-100);}

/* ===== تذييل ===== */
footer.site-footer{
  text-align:center; color:var(--muted); font-size:12px; padding:34px 20px; position:relative; z-index:1;
}
footer.site-footer .sig{color:var(--navy); font-weight:700; font-size:13px; margin-bottom:4px;}
footer.site-footer a{color:var(--sky-600); font-weight:700;}

/* ===== شارة "مسودة تحتاج اعتمادًا علميًا" ===== */
.draft-flag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--danger-bg); color:var(--danger-700); border:1px dashed var(--danger-100);
  border-radius:999px; padding:5px 12px; font-size:11px; font-weight:800;
}

/* ===== قائمة الإشعارات (مشتركة) ===== */
.notif-panel{
  position:absolute; left:24px; top:64px; width:340px;
  background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--dur-base); z-index:60;
}
.notif-panel.open{opacity:1; visibility:visible; transform:translateY(0);}
.notif-head{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.notif-head strong{font-size:15px; color:var(--navy);}
.notif-head span{font-size:12px; color:var(--muted);}
.notif-item{display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);}
.notif-item:last-of-type{border-bottom:none;}
.notif-item .ic{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--sky-50);
}
.notif-item .ic svg{width:16px; height:16px; stroke:var(--sky-600);}
.notif-item p{margin:0; font-size:13.5px; color:var(--ink);}
.notif-item time{font-size:11.5px; color:var(--muted);}
.notif-foot{padding:10px 18px; background:var(--ivory); font-size:11.5px; color:var(--muted); text-align:center;}

@media (max-width:640px){
  nav.site-nav{display:none;}
}