/* ==========================================================================
   Base — إعدادات عامة على مستوى الصفحة
   قاعدة: نستخدم الخصائص المنطقية (margin-inline-start بدل margin-left)
   عشان نفس الكود يشتغل RTL و LTR.
   ========================================================================== */

/* الحجم الأساسي يكبر مع عرض الشاشة، وكل المقاسات بـ rem فتكبر معه بنفس النسبة:
   16px لين 1440 تقريباً ← 18px على 1920 ← حد أقصى 19px على الشاشات الكبيرة جداً */
:root {
  font-size: 1rem;
}

/* على الشاشات الكبيرة: الواجهة كلها تتكبّر بنسبة الشاشة إلى إطار فيجما (1440×930)
   مثل تكبير صورة — 16px على 1440×930، وتكبر بلا حد على الشاشات الأكبر.
   النسبة = الأصغر بين (العرض ÷ 1440) و(الارتفاع ÷ 930) عشان الصفحة تدخل دائماً.
   1.111vw = 16/1440 ، 1.72vh = 16/930 ، والحد الأدنى 13px للقراءة. */
@media (min-width: 1200px) {
  :root {
    font-size: max(13px, min(1.111vw, 1.72vh));
  }
}

/* الشاشات القصيرة: الصفحة تتمرر بدل ما تملا الشاشة، فالحجم يتبع العرض بس */
@media (min-width: 1200px) and (max-height: 699.98px) {
  :root {
    font-size: max(13px, 1.111vw);
  }
}

/* اللغة تحدد ترتيب الخطوط */
:root:lang(ar),
:root:lang(ur) {
  --font-sans: var(--font-ar);
}

:root:lang(en) {
  --font-sans: var(--font-en);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0 var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* مؤقت — نطابقه مع مقاسات العناوين من فيجما */
h1 { font-size: var(--text-2xl);  line-height: var(--leading-2xl); }
h2 { font-size: var(--text-xl);   line-height: var(--leading-xl); }
h3 { font-size: var(--text-lg);   line-height: var(--leading-lg); }
h4 { font-size: var(--text-base); line-height: var(--leading-base); }
h5 { font-size: var(--text-sm);   line-height: var(--leading-sm); }
h6 { font-size: var(--text-xs);   line-height: var(--leading-xs); }

/* ---------- أدوار النصوص (Typography roles) ----------
   مقدّرة من صورة الداشبورد ومقرّبة لشبكة الـ 8.
   الصفحات تستخدم الدور (عنوان كارت، وصف...) مو المقاس مباشرة،
   فلو تغير مقاس دور نعدله هنا مرة وحدة. */
.ui-page-title    { font-size: var(--text-2xl);  line-height: var(--leading-2xl);  font-weight: var(--weight-bold);     color: var(--color-text); }
.ui-page-subtitle { font-size: var(--text-sm);   line-height: var(--leading-sm);   font-weight: var(--weight-regular);  color: var(--color-text-muted); }
.ui-card-title    { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-bold);     color: var(--color-text); }
.ui-stat-title    { font-size: var(--text-sm);   line-height: var(--leading-sm);   font-weight: var(--weight-bold);     color: var(--color-text); }
.ui-body          { font-size: var(--text-sm);   line-height: var(--leading-sm);   font-weight: var(--weight-medium); }
.ui-caption       { font-size: var(--text-xs);   line-height: var(--leading-xs);   color: var(--color-text-muted); }
.ui-nav-label     { font-size: var(--text-xs);   line-height: var(--leading-xs);   font-weight: var(--weight-medium);   color: var(--color-text-inverse-muted); }
.ui-nav-text      { font-size: var(--text-sm);   line-height: var(--leading-sm);   font-weight: var(--weight-regular); }
.ui-pill-text     { font-size: var(--text-xs);   line-height: var(--leading-xs);   font-weight: var(--weight-semibold); }

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

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

/* الأيقونات: تاخذ لون النص وحجمه تلقائياً */
.ui-icon {
  display: inline-flex;
  inline-size: 1.25em;
  block-size: 1.25em;
  flex-shrink: 0;
  vertical-align: middle;
}

.ui-icon > svg {
  inline-size: 100%;
  block-size: 100%;
}

.ui-icon--sm { inline-size: 1em;   block-size: 1em; }
.ui-icon--lg { inline-size: 1.5em; block-size: 1.5em; }

/* أيقونات الاتجاه (أسهم، رجوع) تنقلب في RTL */
[dir="rtl"] .ui-icon--flip-rtl {
  transform: scaleX(-1);
}

/* ---------- مساعدات محاذاة صغيرة ---------- */
.ui-text-center { text-align: center; }

.ui-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* عنصر عليه hidden يختفي دائماً حتى لو كلاسه يعطيه display (grid/flex) — يعتمد عليه
   الإظهار الشرطي في ui/js/forms.js وأي سكربت يستخدم el.hidden */
[hidden] { display: none !important; }