/* ============================================================
   RAYMRK — ورقة أنماط واحدة للموقع واللوحة
   ------------------------------------------------------------
   عربية أولاً: الاتجاه rtl هو الأصل لا استثناء يُعالج لاحقاً،
   ولذلك تُستعمل الخصائص المنطقية (inline-start, margin-inline)
   في كل مكان بدل left/right. هذا ليس تفضيلاً أسلوبياً: كل مرة
   يُكتب فيها `left` في تخطيط عربي، يظهر الخلل في شاشة واحدة
   ويُكتشف بعد أسبوع.

   الخط: IBM Plex Sans Arabic، مستضاف من نفس الخادم لا من CDN.
   هندسيّ وسميك في أوزانه العالية، وهو ما يعطي العناوين ثقلها.

   لماذا الاستضافة الذاتية: نداء إلى نطاق ثالث قبل أول رسم يعني
   بحث DNS ومصافحة TLS إضافيتين على شبكة جوال، ويعني أن الصفحة
   تفقد خطها كلّما حُجب ذلك النطاق — وهو ما يحدث في شبكات شركات
   كثيرة. أربعة أوزان عربية وأربعة لاتينية، 272 كيلوبايت لكل
   الملفات، تُحمَّل عند الحاجة لا دفعةً واحدة.

   `font-display: swap` يرسم النصّ فوراً بخط النظام ثم يستبدله،
   فلا تبقى الصفحة بيضاء بانتظار الخط. وسلسلة الاحتياط وراءه
   حقيقية: لو فشل الملف تبقى الصفحة مقروءة.

   ثيم واحد فاتح: أرض بيضاء، حبر أسود، وبرتقالي واحد للتأكيد.
   لا وضع داكن — ثيم ثانٍ يعني ضعف سطوح الاختبار، وهذه منصة
   تُقرأ نهاراً على مكتب وجوال.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex-ar-400.woff2") format("woff2");
  /* نطاق المحارف العربية: يمنع المتصفّح من تحميل هذا الملف
     لصفحة لا تحتوي عربية. */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plex-ar-500.woff2") format("woff2");
  /* نطاق المحارف العربية: يمنع المتصفّح من تحميل هذا الملف
     لصفحة لا تحتوي عربية. */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plex-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-ar-600.woff2") format("woff2");
  /* نطاق المحارف العربية: يمنع المتصفّح من تحميل هذا الملف
     لصفحة لا تحتوي عربية. */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plex-ar-700.woff2") format("woff2");
  /* نطاق المحارف العربية: يمنع المتصفّح من تحميل هذا الملف
     لصفحة لا تحتوي عربية. */
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plex-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* ---------- الأرض ---------- */
  --bg:        #ffffff;
  --bg-soft:   #faf8f6;   /* رمادي مائل إلى حرارة البرتقالي، لا رمادي محايد */
  --surface:   #ffffff;
  --surface-2: #f5f2ee;
  --line:      #e4ded6;
  --line-soft: #efeae4;

  /* ---------- الحبر ---------- */
  /* كل لون نصّ هنا يجتاز 4.5:1 على الأبيض — فُحص لا خُمّن.
     ‎#1a1a1a ‎17.4:1 · ‎#5c5852 ‎7.1:1 · ‎#6e6a63 ‎5.4:1 */
  --text:      #1a1a1a;
  --muted:     #5c5852;
  --faint:     #6e6a63;

  /* ---------- البرتقالي ---------- */
  /* لونان لا واحد، والسبب تباينٌ لا ذوق: ‎#d97757 يعطي 3.1:1
     على الأبيض — يكفي لمساحة ملوّنة أو عنوان كبير، ولا يكفي
     لنصّ بحجم القراءة. ‎#b0522f يعطي 5.1:1، فهو لون الكلمات
     والروابط والأزرار المصمتة. خلطهما يعني نصّاً برتقالياً
     لا يُقرأ على شاشة في ضوء نهار. */
  --accent:      #d97757;   /* الهوية: تعبئة، حدود، ظلال ملوّنة */
  --accent-ink:  #b0522f;   /* النصّ والأزرار — 5.1:1 على الأبيض */
  --accent-deep: #8f3f22;   /* الضغط والتحويم */
  --accent-dim:  rgba(217, 119, 87, .12);
  --accent-soft: rgba(217, 119, 87, .22);

  /* ---------- الدلالة ---------- */
  /* منفصلة عن لون الهوية عمداً: "خطأ" و"تحذير" يجب أن يُقرآ
     حالةً لا زينة، ولو شاركا البرتقالي لذابا فيه. */
  --green:  #15803d;
  --amber:  #92400e;   /* أعمق مما يبدو لازماً: يُقرأ فوق تظليله هو */
  --rose:   #b91c1c;
  --violet: #6d28d9;

  --radius:    14px;
  --radius-sm: 10px;
  /* ظلّ فاتح: الظلّ الثقيل على أبيض يجعل كل بطاقة تبدو عائمة. */
  --shadow:    0 8px 28px rgba(60, 40, 30, .10);

  --font: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* الحشوات الآمنة. مثبّتة هنا حتى تعمل الصفحة مثبّتةً على
     الجوال حيث لا يوجد شريط متصفّح يحمي المحتوى من الساعة. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-s: env(safe-area-inset-left, 0px);
  --safe-e: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* يمنع السحب الأفقي على أندرويد حين يُدفع عنصر ثابت خارج
     الشاشة بـ transform — وهو ما لا يُعيد إنتاجه متصفّح سطح
     المكتب، فلا يكفي اختباره هناك. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; font-weight: 700; letter-spacing: 0; text-wrap: balance; }
/* العربية لا تُقرأ جيداً بتضييق التتبّع — letter-spacing السالب
   يلصق الحروف المتّصلة ببعضها. صفر هو الصحيح هنا. */
h1 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }
p  { margin: 0 0 1em; }
a  { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, canvas { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- تخطيط ---------- */

.wrap {
  width: min(1140px, 100%);
  margin-inline: auto;
  padding-inline: max(20px, var(--safe-s));
}

.stack  { display: grid; gap: 1rem; }
.row    { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow   { flex: 1; min-inline-size: 0; }   /* بلا min-inline-size لا ينكمش العنصر تحت محتواه */

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.muted { color: var(--muted); }
/* كلمة أو جملة بلون الهوية داخل نصّ أسود. تُستعمل بحساب: البرتقالي
   يؤكّد حين يكون نادراً، ويصير ضجيجاً حين يعمّ. */
.hl { color: var(--accent-ink); }
.faint { color: var(--faint); font-size: .85rem; }
.center { text-align: center; }
.mono { font-family: var(--mono); font-size: .85em; direction: ltr; unicode-bidi: embed; }
.nowrap { white-space: nowrap; }

/* ---------- أزرار ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent-ink);
  color: #ffffff;
  font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
  text-decoration: none;
  min-height: 44px;   /* هدف لمس مقبول على الجوال */
}
.btn:hover { background: var(--accent-deep); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .55; cursor: default; pointer-events: none; }

.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.quiet { background: var(--surface-2); color: var(--text); }
.btn.quiet:hover { background: var(--line); }
.btn.danger { background: transparent; border-color: #f0c9c9; color: var(--rose); }
.btn.danger:hover { background: rgba(185, 28, 28, .07); }
.btn.sm { padding: .4rem .8rem; font-size: .85rem; min-height: 34px; }
.btn.block { width: 100%; }

/* ---------- بطاقات ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.3rem;
  min-inline-size: 0;
}
.card.pad-sm { padding: 1rem; }
.card h3 { margin-top: 0; }

.tile {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  min-inline-size: 0;
}
.tile .value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile .label { color: var(--muted); font-size: .85rem; }

/* ---------- نماذج ---------- */

label { display: block; font-size: .88rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }

input, textarea, select {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .7rem .85rem;
  font: inherit; font-size: .95rem;
  min-inline-size: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
select { cursor: pointer; }

.field { margin-bottom: 1rem; }
.hint { font-size: .8rem; color: var(--faint); margin-top: .3rem; }

.check { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.check input { width: auto; margin: 0; accent-color: var(--accent); }
.check span { color: var(--text); font-size: .92rem; }

/* ---------- شارات ورسائل ---------- */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
  white-space: nowrap;
}
.badge.ok    { background: rgba(21, 128, 61, .10); color: var(--green); }
.badge.warn  { background: rgba(180, 83, 9, .10); color: var(--amber); }
.badge.bad   { background: rgba(185, 28, 28, .10); color: var(--rose); }
.badge.info  { background: var(--accent-dim); color: var(--accent-deep); }

.note {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-soft);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .9rem;
  color: var(--muted);
}
.note.warn { border-inline-start-color: var(--amber); }
.note.bad  { border-inline-start-color: var(--rose); background: rgba(185, 28, 28, .05); color: #7f1d1d; }

.empty {
  text-align: center;
  color: var(--faint);
  padding: 3rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* ---------- جداول ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: start; padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); }
th { color: var(--muted); font-weight: 600; font-size: .82rem; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-soft); }

/* ---------- دوّار التحميل ---------- */

.spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(26, 26, 26, .18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}