/* ============================================================
   الخطوط — IBM Plex Sans Arabic + Mono (محلية، تُرفع مع النشر)
   لا تعتمد على ما هو مثبّت لدى المستخدم — تظهر موحّدة للجميع.
   ============================================================ */
@font-face{
  font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;
  font-display:swap;src:url('/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;
  font-display:swap;src:url('/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;
  font-display:swap;src:url('/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:700;
  font-display:swap;src:url('/fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

/* ============================================================
   نظام التصميم — الإدارة العامة للأمن الجنائي والمنافذ
   الرموز التصميمية (Design Tokens)
   ------------------------------------------------------------
   الألوان مستخرجة من ملف الشعار المتجهي مباشرةً:
     #9C8F80  إكليل الغار  → الأساسي
     #43784B  سعف النخلة   → الاعتماد حصراً
     #845B31  جذع النخلة   → التأخير
   القاعدة: اللون يحمل معنى واحداً لا اثنين. لا لون للزينة.
   ------------------------------------------------------------
   المرجع الكامل: نظام التصميم - شرطة الشارقة.html
   ============================================================ */

/* ---------- 1. الرموز التصميمية (Design Tokens) ---------- */
:root{
  /* الهوية — من الشعار */
  --brand-taupe:#9C8F80;
  --brand-taupe-deep:#7D7266;
  --brand-taupe-pale:#C0B6A9;
  --brand-palm:#43784B;
  --brand-trunk:#845B31;

  /* الأدوار الدلالية */
  --primary:#7D7266;
  --primary-hover:#635A50;
  --primary-weak:#EDEAE5;
  --primary-ink:#635A50;   /* نص على --primary-weak — 5.63:1 */
  --on-primary:#FFFFFF;

  --ok:#2F5A36;           /* اعتماد / إغلاق */
  --ok-weak:#E6EDE7;
  --warn:#7A5228;         /* تأخير / إعادة */
  --warn-weak:#F3EBE2;
  --danger:#8C2F2F;       /* إلغاء / سحب */
  --danger-weak:#F5E8E8;
  --info:#3A5A6E;         /* مشاهدة */
  --info-weak:#E7EDF1;

  /* المؤرشفة — كانت #f0e6d6/#8a6d3b ثابتة خارج الرموز، فلا تنقلب
     مع الوضع الداكن. الآن رمزان: 6.25:1 محسوبة. */
  --arch:#5F5138;
  --arch-weak:#F0E6D6;

  /* نصّ فوق سطح دلالي مصمَت (شارة الجرس، عدّاد التبويب).
     في الفاتح أبيض؛ وفي الداكن حبر داكن — لأن الأسطح الدلالية
     هناك فاتحة، والأبيض عليها يعطي 2.64:1 وهو سقوط. */
  --on-status:#FFFFFF;

  /* الأسطح */
  --bg:#F5F3EF;
  --surface:#FFFFFF;
  --surface-sunk:#EFEDE8;
  --line:#DDD8D0;
  --line-strong:#BFB8AD;

  /* النص — كلها ≥ 4.5:1 على --surface */
  --ink:#1C1917;
  --ink-2:#57504A;
  --ink-3:#6B645C;

  /* المقاييس */
  --u:4px;
  --r:2px;                /* زوايا شبه حادة — سياق نظامي */
  --tap:44px;             /* الحد الأدنى للمس */
  --rail:18px;            /* عرض قضيب السلسلة */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.18s;

  /* الطباعة */
  --f-ui:'IBM Plex Sans Arabic','Dubai','Noto Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;
}

[data-mode="dark"]{
  --primary:#B8AEA1;
  --primary-hover:#CFC6BA;
  --primary-weak:#2A2724;
  --primary-ink:#B8AEA1;   /* 6.79:1 على --primary-weak */
  --on-primary:#17150F;

  --ok:#7FB187;    --ok-weak:#1B2A1D;
  --warn:#C79A6B;  --warn-weak:#2B211A;
  --danger:#D98A8A;--danger-weak:#2C1C1C;
  --info:#8FB3C7;  --info-weak:#1A242B;
  --arch:#CFBE99;  --arch-weak:#2A2318;   /* 8.49:1 محسوبة */
  --on-status:#17150F;   /* على danger/warn الداكنَين: 6.91 و7.18 */

  --bg:#141210;
  --surface:#1D1A17;
  --surface-sunk:#171512;
  --line:#332F2A;
  --line-strong:#4A443C;

  --ink:#EDE8E1;
  --ink-2:#B5ADA3;
  --ink-3:#9B9389;
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-ui);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}

/* ---------- الشعار — SVG متجهي، حادّ على كل الكثافات ---------- */
.logo{display:block;height:auto;flex-shrink:0}
.logo-head{width:190px}
.logo-bar{width:104px}
.logo-foot{width:128px;opacity:.7}
.logo-crest{width:156px;margin:0 auto 30px}
/* على السطح الداكن: الشعار الرسمي لا يُعاد تلوينه — تُخفَّف حدّته قليلاً فقط */
[data-mode="dark"] .logo{filter:saturate(.9) brightness(1.06)}
@media(max-width:600px){.logo-head{width:150px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* الأرقام: لاتينية دائماً، عرض ثابت — الرقم المرجعي يُقارَن بالعين */
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}