/* =============================================================================
   Wakeel Operations Design System (WODS) v1.0
   -----------------------------------------------------------------------------
   مستمد من Fiori (الصفحة حسب الدور) و Fluent 2 (التنقل والأوامر والوصول)
   و ServiceNow (مساحة العمل وقوائم العمل) و Lightning (الجداول عالية الكثافة)
   و Atlassian (وضوح الحالة) — ومطابق لـ WCAG 2.2 AA.
   لا تُنسخ علامة أو مكوّن نظام بعينه؛ الرموز أدناه خاصة بالوكيل.

   القاعدة الحاكمة: ممنوع أن تعيد كل صفحة تعريف الأزرار والبطاقات والجداول
   بألوان وأحجام مختلفة. في النظام القديم كان لكل ملف <style> خاص به.
   ============================================================================= */

:root {
  /* الألوان — القسم 16.3 */
  --c-navy:        #17365E;
  --c-action:      #2D72FF;
  --c-action-dark: #1F5BD4;
  --c-ok:          #168267;
  --c-warn:        #B7791F;
  --c-danger:      #B93645;
  --c-bg:          #F4F7FB;
  --c-surface:     #FFFFFF;
  --c-text:        #17233A;
  --c-muted:       #5A6B85;
  --c-border:      #DCE3ED;
  --c-border-strong:#C2CCDB;

  /* خلفيات الحالات — تباين AA مع نصها */
  --c-ok-bg:     #E7F4F0;
  --c-warn-bg:   #FCF3E3;
  --c-danger-bg: #FBE9EB;
  --c-info-bg:   #E9F0FF;

  /* المسافات — وحدة 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-6: 24px; --s-8: 32px;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow-1:  0 1px 2px rgba(23,35,58,.06);
  --shadow-2:  0 6px 20px rgba(23,35,58,.10);

  /* الأبعاد الإلزامية — القسم 16.2 */
  --topbar-h:   64px;
  --nav-w:      248px;
  --nav-w-min:  72px;
  --ctxhead-h:  84px;
  --panel-w:    400px;
  --content-max:1680px;

  --font: "IBM Plex Sans Arabic", "Tajawal", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* حالة التركيز واضحة دائماً — شرط WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--c-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* تخطي إلى المحتوى — لمستخدمي لوحة المفاتيح وقارئات الشاشة */
.skip-link {
  position: absolute; right: -9999px; top: var(--s-2);
  background: var(--c-navy); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); z-index: 999;
}
.skip-link:focus { right: var(--s-4); }

/* ═══════════════════════════ الهيكل ═══════════════════════════ */

.app { min-height: 100vh; }

.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: var(--topbar-h); z-index: 40;
  background: var(--c-navy); color: #fff;
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: var(--s-4);
}
.topbar__brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.topbar__brand small { display: block; font-size: 11px; opacity: .75; font-weight: 400; }
.topbar__spacer { flex: 1; }

.cmdk {
  flex: 0 1 460px; display: flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 7px var(--s-3);
  color: #fff; cursor: pointer; font-size: 14px;
}
.cmdk kbd {
  margin-inline-start: auto; font-size: 11px; font-family: var(--font);
  background: rgba(255,255,255,.16); border-radius: 4px; padding: 1px 6px;
}

.topbar__chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,.12); white-space: nowrap;
}
.topbar__chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--ok { background: #3ED598; } .dot--warn { background: #F6C544; }
.dot--danger { background: #FF7A85; }

.nav {
  position: fixed; inset-block-start: var(--topbar-h); inset-block-end: 0;
  inset-inline-start: 0; width: var(--nav-w); z-index: 30;
  background: var(--c-surface); border-inline-start: 1px solid var(--c-border);
  overflow-y: auto; padding: var(--s-3) 0;
}
.nav__section { padding: var(--s-2) var(--s-4) var(--s-1); font-size: 11.5px;
                color: var(--c-muted); font-weight: 700; letter-spacing: .2px; }
.nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-4); color: var(--c-text);
  text-decoration: none; font-size: 14px; border-inline-end: 3px solid transparent;
}
.nav__item:hover { background: var(--c-info-bg); }
.nav__item[aria-current="page"] {
  background: var(--c-info-bg); color: var(--c-action-dark);
  font-weight: 700; border-inline-end-color: var(--c-action);
}
.nav__item i { width: 18px; text-align: center; color: var(--c-muted); }
.nav__item[aria-current="page"] i { color: var(--c-action); }
.nav__badge {
  margin-inline-start: auto; background: var(--c-danger); color: #fff;
  font-size: 11px; border-radius: 999px; padding: 1px 7px; font-weight: 700;
}

.main {
  margin-inline-start: var(--nav-w); margin-block-start: var(--topbar-h);
  padding: var(--s-6); max-width: var(--content-max);
}

/* رأس سياقي — الاسم والفترة والنطاق وآخر تحديث والثقة */
.ctxhead {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--s-4) var(--s-6);
  margin-block-end: var(--s-4); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-4);
}
.ctxhead__title { margin: 0; font-size: 24px; font-weight: 700; }
.ctxhead__meta  { color: var(--c-muted); font-size: 13px; margin-block-start: 2px; }
.ctxhead__actions { margin-inline-start: auto; display: flex; gap: var(--s-2); }

/* ═══════════════════════ شريط الثقة ═══════════════════════ */
.trust {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border-radius: 999px; padding: 3px var(--s-3);
  font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
}
.trust--ok     { background: var(--c-ok-bg);     color: var(--c-ok);     border-color: #BFE3D8; }
.trust--warn   { background: var(--c-warn-bg);   color: var(--c-warn);   border-color: #EDD9B0; }
.trust--danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: #EFC2C8; }
/* اللون وحده لا يكفي: كل حالة معها نص وأيقونة — القسم 16.3 */

/* ═══════════════════════ شريط القرار ═══════════════════════ */
/* يظهر فقط عند وجود خلل أو اعتماد أو تأخير — القسم 16.2 بند 4 */
.decisionbar {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--c-danger-bg); border: 1px solid #EFC2C8;
  border-inline-start: 4px solid var(--c-danger);
  border-radius: var(--radius); padding: var(--s-4) var(--s-6);
  margin-block-end: var(--s-4);
}
.decisionbar--warn { background: var(--c-warn-bg); border-color: #EDD9B0;
                     border-inline-start-color: var(--c-warn); }
.decisionbar__body { flex: 1; }
.decisionbar__title { font-weight: 700; margin: 0 0 var(--s-1); }
.decisionbar__facts { font-size: 13px; color: var(--c-muted); display: flex;
                      flex-wrap: wrap; gap: var(--s-4); }
.decisionbar__actions { display: flex; gap: var(--s-2); align-items: center; }

/* ═══════════════════════ الشبكة والبطاقات ═══════════════════════ */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.card__head {
  padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--s-3);
}
.card__title { margin: 0; font-size: 16px; font-weight: 700; }
.card__body { padding: var(--s-4); }

/* MetricCard — القيمة والتعريف والمصدر والفترة والثقة والاتجاه */
.metric { padding: var(--s-4); }
.metric__label { font-size: 13px; color: var(--c-muted); display: flex;
                 align-items: center; gap: var(--s-2); }
.metric__value { font-size: 28px; font-weight: 700; margin-block: var(--s-1);
                 letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.metric__value--unavailable { color: var(--c-muted); font-size: 20px; font-weight: 600; }
.metric__foot { display: flex; align-items: center; gap: var(--s-3);
                font-size: 12px; color: var(--c-muted); flex-wrap: wrap; }
.metric__trend--up   { color: var(--c-ok); }
.metric__trend--down { color: var(--c-danger); }

/* زر «لماذا هذا الرقم؟» — يفتح التعريف والمصدر والاستبعادات */
.metric__why {
  background: none; border: 0; color: var(--c-action); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; padding: 0;
}

/* ═══════════════════════ الأزرار ═══════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px var(--s-4); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; min-height: 38px; white-space: nowrap;
}
.btn--primary { background: var(--c-action); color: #fff; }
.btn--primary:hover { background: var(--c-action-dark); }
.btn--ghost { background: var(--c-surface); color: var(--c-text);
              border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-bg); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--sm { padding: 5px var(--s-3); min-height: 30px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════ الجداول ═══════════════════════ */
.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid-table th {
  text-align: start; font-weight: 700; font-size: 12.5px; color: var(--c-muted);
  padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--c-border-strong);
  background: var(--c-bg); position: sticky; inset-block-start: 0; z-index: 1;
}
.grid-table td { padding: var(--s-3); border-block-end: 1px solid var(--c-border); }
.grid-table tbody tr:hover { background: var(--c-info-bg); }
.grid-table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ═══════════════════════ الشارات وقوائم العمل ═══════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--s-2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700;
}
.badge--ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.badge--warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info   { background: var(--c-info-bg);   color: var(--c-action-dark); }
.badge--muted  { background: var(--c-bg);        color: var(--c-muted); }

.sla { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sla--ok { color: var(--c-ok); } .sla--soon { color: var(--c-warn); }
.sla--late { color: var(--c-danger); }

/* ═══════════════════════ الحالات الإلزامية ═══════════════════════ */
/* كل صفحة تُسلَّم بكل هذه الحالات لا بالحالة المثالية فقط — القسم 16.7 */
.state {
  text-align: center; padding: var(--s-8) var(--s-6); color: var(--c-muted);
}
.state__icon { font-size: 34px; margin-block-end: var(--s-3); opacity: .55; }
.state__title { font-size: 16px; font-weight: 700; color: var(--c-text);
                margin-block-end: var(--s-2); }
.state__hint { font-size: 13.5px; max-width: 52ch; margin-inline: auto; }
.state__actions { margin-block-start: var(--s-4); display: flex;
                  gap: var(--s-2); justify-content: center; }

.skeleton {
  background: linear-gradient(90deg, #EDF1F7 25%, #F6F8FC 37%, #EDF1F7 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite;
  border-radius: var(--radius-sm); height: 14px;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ═══════════════════════ اللوحة السياقية ═══════════════════════ */
.ctxpanel {
  position: fixed; inset-block: var(--topbar-h) 0; inset-inline-end: 0;
  width: var(--panel-w); background: var(--c-surface);
  border-inline-start: 1px solid var(--c-border);
  box-shadow: var(--shadow-2); overflow-y: auto; z-index: 35;
}

/* ═══════════════════════ الاستجابة ═══════════════════════ */
@media (max-width: 1100px) {
  :root { --nav-w: var(--nav-w-min); }
  .nav__item span, .nav__section { display: none; }
  .nav__item { justify-content: center; }
  .main { padding: var(--s-4); }
  .ctxpanel { width: 100%; }
  .col-3, .col-4 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .main { padding: var(--s-3); margin-inline-start: 0; }
  .nav { transform: translateX(100%); transition: transform .18s; }
  .nav.is-open { transform: none; }
  .grid > [class^="col-"] { grid-column: span 12; }
  .cmdk kbd { display: none; }
  /* الجداول تتحول إلى بطاقات على الجوال — القسم 16.3 */
  .grid-table thead { display: none; }
  .grid-table tr { display: block; border: 1px solid var(--c-border);
                   border-radius: var(--radius); margin-block-end: var(--s-3);
                   padding: var(--s-2); background: var(--c-surface); }
  .grid-table td { display: flex; justify-content: space-between;
                   border: 0; padding: 6px var(--s-2); }
  .grid-table td::before { content: attr(data-label); font-weight: 700;
                           color: var(--c-muted); font-size: 12.5px; }
  /* إجراءات المندوب مثبتة أسفل الشاشة */
  .mobile-actions {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    background: var(--c-surface); border-block-start: 1px solid var(--c-border);
    padding: var(--s-2); display: flex; gap: var(--s-2);
    padding-block-end: calc(var(--s-2) + env(safe-area-inset-bottom));
  }
}

@media print {
  .topbar, .nav, .ctxhead__actions, .decisionbar__actions { display: none !important; }
  .main { margin: 0; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* شارة بيئة المعاينة — لا يُخلط الرابط التجريبي بالإنتاج */
.env-ribbon {
  position: fixed; inset-block-end: 0; inset-inline-start: 0; z-index: 60;
  background: var(--c-warn); color: #241B04; font-size: 11.5px; font-weight: 700;
  padding: 3px var(--s-3); border-start-end-radius: var(--radius-sm);
}