/* =========================================================================
   app.css
   إضافات المرحلة البرمجية فوق الهوية البصرية الأصلية (style.css)
   لا يُعدَّل أي شيء في style.css — هذا الملف للإضافات فقط.
   ========================================================================= */

/* ---------- ألوان حالات المستندات (Document Workflow) ---------- */
.status-draft        { background:#EEF1F5; color:var(--gray-600); }
.status-under_review  { background:#FBEBD6; color:var(--warning); }
.status-needs_changes { background:#F9E4E1; color:var(--danger); }
.status-approved      { background:#E4F5EC; color:var(--success); }
.status-archived      { background:var(--navy-100); color:var(--navy-800); }

/* ---------- ألوان حالات المهام (Tasks) ---------- */
.task-pending    { background:#EEF1F5; color:var(--gray-600); }
.task-in_progress{ background:#FBEBD6; color:var(--warning); }
.task-completed  { background:#E4F5EC; color:var(--success); }
.task-overdue    { background:#F9E4E1; color:var(--danger); }

/* شارة موحدة تُستخدم مع الأصناف أعلاه */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
}

/* ---------- حاوية الرسوم البيانية ---------- */
.chart-card{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:18px; min-height:0;
}
.chart-card__canvas-wrap{
  position:relative; width:100%;
  aspect-ratio:16/9;
  max-height:320px;
}
.chart-card__canvas-wrap canvas{ width:100% !important; height:100% !important; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:12px; color:var(--gray-600); }
.chart-legend__dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-inline-end:6px; }

/* ---------- مؤشر جاهزية الاعتماد (Accreditation Readiness Index) ---------- */
.readiness-gauge{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.readiness-gauge__ring{ position:relative; width:120px; height:120px; flex:none; }
.readiness-gauge__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.readiness-gauge__ring circle{ fill:none; stroke-width:10; }
.readiness-gauge__track{ stroke:var(--gray-100); }
.readiness-gauge__value{ stroke:var(--gold-600); stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease); }
.readiness-gauge__label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.readiness-gauge__label strong{ font-size:22px; color:var(--navy-900); }
.readiness-gauge__label small{ font-size:11px; color:var(--gray-600); }
.readiness-status{ font-weight:800; font-size:15px; padding:6px 16px; border-radius:999px; display:inline-block; }
.readiness-status--ready{ background:#E4F5EC; color:var(--success); }
.readiness-status--needs_improvement{ background:#FBEBD6; color:var(--warning); }
.readiness-status--not_ready{ background:#F9E4E1; color:var(--danger); }

/* ---------- صفحة تسجيل الدخول ---------- */
.auth-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 140% at 100% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  padding:20px;
}
.auth-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:420px; padding:clamp(24px,5vw,40px);
}
.auth-card__logos{ display:flex; justify-content:center; gap:14px; margin-bottom:18px; }
.auth-card h1{ font-family:var(--font-display); font-size:clamp(18px,3vw,22px); color:var(--navy-900); text-align:center; margin-bottom:4px; }
.auth-card p.subtitle{ text-align:center; color:var(--gray-600); font-size:13px; margin-bottom:24px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; font-weight:700; color:var(--navy-800); margin-bottom:6px; }
.form-control{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; transition:border-color var(--t-fast) var(--ease);
}
.form-control:focus{ border-color:var(--gold-600); outline:none; }
.btn-block{ width:100%; justify-content:center; }
.form-error{ background:#F9E4E1; color:var(--danger); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:16px; }
.form-success{ background:#E4F5EC; color:var(--success); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:16px; }
.form-warning{ background:#FBEBD6; color:var(--warning); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:16px; }

/* ---------- خلايا إحصائيات المؤشر: فاصل جانبي في التخطيط ثلاثي الأعمدة (شاشات أوسع) ---------- */
@media (min-width:769px){
  .indicator-stat-cell{
    border-bottom:none !important; margin-bottom:0;
    border-left:1px solid var(--gray-200); padding-bottom:16px !important;
  }
}

/* ---------- عدّادات متحركة (Counters) ---------- */
.counter{ font-variant-numeric:tabular-nums; }

/* ---------- حركات خفيفة إضافية ---------- */
@media (prefers-reduced-motion: no-preference){
  .fade-in{ animation:fadeSlide var(--t-med) var(--ease); }
}

/* ---------- Responsive Tables (تتحول لبطاقات على الهاتف) ---------- */
@media (max-width:640px){
  .table-wrap.responsive-stack table,
  .table-wrap.responsive-stack thead,
  .table-wrap.responsive-stack tbody,
  .table-wrap.responsive-stack th,
  .table-wrap.responsive-stack td,
  .table-wrap.responsive-stack tr{ display:block; width:100%; }
  .table-wrap.responsive-stack thead{ display:none; }
  .table-wrap.responsive-stack tr{ border-bottom:1px solid var(--gray-200); padding:10px 4px; }
  .table-wrap.responsive-stack td{
    display:flex; justify-content:space-between; gap:10px; padding:6px 10px; font-size:13px; text-align:left;
  }
  .table-wrap.responsive-stack td::before{
    content:attr(data-label); font-weight:700; color:var(--navy-800); text-align:right;
  }
}

.status-draft        { background:#EEF1F5; color:var(--gray-600); }
.status-active       { background:#E4F5EC; color:var(--success); }
.status-closed       { background:#FBEBD6; color:var(--warning); }
.status-published    { background:#E4F5EC; color:var(--success); } /* احتياطي */