/* ==========================================================================
   PUD Design System — طبقة التوكنز الأساسية (Design Tokens Layer)
   منصة قسم هندسة التخطيط والتصميم العمراني — كلية الهندسة — جامعة طنطا

   تُحمَّل هذه الطبقة قبل أي ملف تنسيق آخر. كل قيمة هنا هي "مصدر الحقيقة
   الوحيد" للمسافات والخطوط والزوايا والظلال والحركة وطبقات العمق.
   قاعدة العمل: لا تكتب قيمة px أو hex جديدة داخل المكوّنات — استخدم توكن.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1) سلّم المسافات (4pt scale) — Material/Apple compatible
     ------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* المسافات الدلالية (استخدمها بدل الأرقام المجرّدة) */
  --gap-inline: var(--space-2);      /* بين أيقونة ونص */
  --gap-control: var(--space-3);     /* بين عناصر تحكم متجاورة */
  --gap-card: var(--space-5);        /* بين البطاقات في الشبكة */
  --pad-card: var(--space-5);
  --pad-page-x: var(--space-5);
  --pad-page-y: var(--space-7);

  /* إيقاع الأقسام: المسافة بين أقسام الصفحة هي أقوى أداة لجعل التخطيط
     "يتنفّس". 48px كانت تخنق الصفحة وتخلّي الأقسام تبان كتلة واحدة.
     القيمة المرنة تعطي 56px على الموبايل و112px على الديسكتوب. */
  --gap-section: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --gap-section-lg: clamp(4.5rem, 2.5rem + 7.5vw, 9.5rem);

  /* ------------------------------------------------------------------
     2) سلّم الخطوط (Type scale) + ارتفاعات الأسطر
     ------------------------------------------------------------------ */
  --text-2xs: 0.6875rem;   /* 11px — للوسوم الدقيقة فقط، غير مسموح لنص الجسم */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md: 1rem;         /* 16px — الحد الأدنى لنص الجسم على الموبايل */
  --text-lg: 1.125rem;     /* 18px */

  /* من هنا فما فوق: مقاسات مرنة (clamp) بدل قيم ثابتة.
     الحجم الثابت كان يخلّي عنوان الهيرو 36px على شاشة 1920 — تائه في
     المساحة — و36px نفسها على 390 — مزحوم. المرن يحلّ الاتنين. */
  --text-xl: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);      /* 20 → 24 */
  --text-2xl: clamp(1.5rem, 1.28rem + 0.9vw, 2rem);         /* 24 → 32 */
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);      /* 30 → 46 */
  --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);      /* 36 → 60 */

  /* الخط العربي (Cairo) له نزولات أطول من اللاتيني: 1.25 كان يقصّ
     أطراف الحروف في العناوين. القيم أدناه معايَرة للعربية. */
  --leading-tight: 1.4;
  --leading-snug: 1.5;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* العناوين الضخمة تتحمّل ارتفاع سطر أقلّ من العناوين المتوسطة،
     لكن ليس أقل من 1.25 وإلا تتلامس النزولات العربية. */
  --leading-display: 1.28;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --weight-display: 900;   /* Cairo 900 محمّل محليًا — وزن العرض الأقصى */

  /* ------------------------------------------------------------------
     2b) تتبّع الحروف (Tracking) — لاتيني فقط
     تحذير مهم: letter-spacing على النص العربي يفكّ وصلات الحروف
     المتّصلة ويخلّي الكلمة تبان مكسورة. فممنوع استخدام هذه التوكنز
     على أي عنصر نصّه عربي — استخدمها فقط مع var(--font-latin)
     (الأرقام، الرموز، اللابلات الإنجليزية).
     بديل التتبّع في العربي: الوزن (900) + الحجم + ارتفاع السطر.
     ------------------------------------------------------------------ */
  --track-display: -0.025em;   /* عناوين لاتينية ضخمة */
  --track-tight: -0.015em;
  --track-label: 0.06em;       /* لابلات لاتينية صغيرة */

  /* طول السطر المريح للقراءة (65-75 محرف) */
  --measure: 68ch;
  --measure-narrow: 52ch;

  /* ------------------------------------------------------------------
     3) الزوايا (Radii)
     ------------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* الزوايا المتراكزة (Concentric radii): لما عنصر يقعد جوّه عنصر تاني
     بحشوة p، لازم زاويته الداخلية = الخارجية − p وإلا تبان الزاويتين
     غير متوازيتين. القيم دي تُستخدم في بنية الإطار المزدوج تحت. */
  --bezel-pad: 6px;
  --radius-inner-lg: calc(var(--radius-xl) - var(--bezel-pad));
  --radius-inner-xl: calc(var(--radius-2xl) - var(--bezel-pad));

  /* ------------------------------------------------------------------
     4) أحجام عناصر التحكم — حد اللمس 44px (Apple HIG) / 24px (WCAG 2.2 AA)
     ------------------------------------------------------------------ */
  --control-h-sm: 36px;
  --control-h: 44px;        /* الافتراضي لكل زر/حقل قابل للمس */
  --control-h-lg: 52px;
  --tap-min: 44px;
  --icon-btn: 44px;

  /* ------------------------------------------------------------------
     5) طبقات العمق (z-index scale) — لا تكتب رقمًا خارج هذا السلّم
     ------------------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 100;
  --z-bottom-nav: 110;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ------------------------------------------------------------------
     6) الحركة (Motion tokens) — مدة حسب المسافة، لا مدة واحدة للجميع
     ------------------------------------------------------------------ */
  --dur-instant: 80ms;     /* ردّ فعل الضغط */
  --dur-fast: 140ms;       /* hover / تبديل حالة صغير */
  --dur-base: 220ms;       /* فتح قائمة، تبديل تبويب */
  --dur-slow: 320ms;       /* دخول نافذة / درج جانبي */
  --dur-exit: 160ms;       /* الخروج أسرع من الدخول (~65%) */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* وصول — تباطؤ */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);     /* مغادرة — تسارع */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* انتقالات جاهزة — نحرّك خصائص محدّدة فقط (لا نستخدم all) */
  --t-colors: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  --t-transform: transform var(--dur-fast) var(--ease-out);
  --t-shadow: box-shadow var(--dur-fast) var(--ease-out);
  --t-interactive: color var(--dur-fast) var(--ease-out),
                   background-color var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out),
                   box-shadow var(--dur-fast) var(--ease-out),
                   transform var(--dur-fast) var(--ease-out);

  /* ------------------------------------------------------------------
     7) الشبكة والحاويات
     ------------------------------------------------------------------ */
  --max-width: 1360px;
  --max-width-narrow: 980px;
  --header-height: 68px;
  --topbar-height: 32px;
  --bottom-nav-height: 62px;

  /* نقاط الانكسار المرجعية (للتوثيق — تُستخدم يدويًا في media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ==========================================================================
   8) توكنز دلالية للألوان — النمط الليلي (الافتراضي)
   تصحيحات التباين: كل قيمة نصية هنا تتجاوز 4.5:1 على أسطحها المقصودة.
   ========================================================================== */
:root {
  /* نص متوافق مع WCAG AA — كان #64748b بتباين 3.48:1 على البطاقات (راسب) */
  --text-muted: #94a3b8;            /* 6.47:1 على bg-card */
  --text-faint: #7d8aa0;            /* للنصوص غير الأساسية على الخلفية الداكنة فقط */

  /* ألوان قابلة للاستخدام كنص (مصححة التباين) */
  --on-surface-primary: #38bdf8;    /* 7.74:1 */
  --on-surface-accent: #fbbf24;     /* 9.9:1 */
  --on-surface-success: #34d399;
  --on-surface-danger: #fb7185;     /* 6.16:1 — كان #f43f5e */
  --on-surface-info: #a78bfa;       /* 6.09:1 — كان #8b5cf6 (3.92 راسب) */

  /* تعبئة الأزرار الصلبة (تباين النص الأبيض عليها ≥ 4.5:1) */
  --fill-primary: #0369a1;          /* أبيض عليه = 5.93:1 (كان #0284c7 = 4.1 راسب) */
  --fill-primary-hover: #075985;    /* 7.56:1 */
  --fill-danger: #be123c;
  --fill-success: #15803d;
  --fill-neutral: var(--bg-elevated);

  /* حلقة التركيز (Focus ring) — عنصر إتاحة إلزامي */
  --focus-ring-color: #38bdf8;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--bg-dark),
                       0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* طبقات التراكب — تتبدّل مع النمط بدل الأبيض/الأسود الثابت
     (كان الأبيض الشفاف يختفي تمامًا على خلفية النمط النهاري الفاتحة) */
  --overlay-1: rgba(255, 255, 255, 0.04);
  --overlay-2: rgba(255, 255, 255, 0.07);
  --overlay-3: rgba(255, 255, 255, 0.12);
  --scrim-1: rgba(0, 0, 0, 0.20);
  --scrim-2: rgba(0, 0, 0, 0.35);
  --scrim-3: rgba(0, 0, 0, 0.55);

  /* سلّم الارتفاع (Elevation).
     الظل الأسود الصافي فوق خلفية مزرقّة (#070c18) بيطلع رمادي ميت —
     ده أوضح فرق بين الواجهة "الرخيصة" و"الغالية". الظلال هنا مصبوغة
     بلون الخلفية (كحلي)، ومكوّنة من طبقتين: طبقة تلامس ضيّقة + طبقة
     انتشار واسعة، زي الضوء الحقيقي. */
  --shadow-hue: 218 70% 4%;
  --elev-0: none;
  --elev-1: 0 1px 2px hsl(var(--shadow-hue) / 0.34);
  --elev-2: 0 1px 2px hsl(var(--shadow-hue) / 0.30),
            0 3px 10px hsl(var(--shadow-hue) / 0.28);
  --elev-3: 0 1px 2px hsl(var(--shadow-hue) / 0.32),
            0 10px 28px hsl(var(--shadow-hue) / 0.36);
  --elev-4: 0 2px 4px hsl(var(--shadow-hue) / 0.36),
            0 18px 44px hsl(var(--shadow-hue) / 0.48);
  --elev-5: 0 2px 6px hsl(var(--shadow-hue) / 0.40),
            0 28px 70px hsl(var(--shadow-hue) / 0.60);

  /* حافة علوية لامعة — تحاكي الضوء وهو يمسك حرف السطح.
     تُضاف مع الظل على الأسطح المرفوعة (inset shadow). */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   9) توكنز دلالية للألوان — النمط النهاري (بني وبيج معماري)
   ========================================================================== */
:root[data-theme="light"],
html[data-theme="light"] {
  --text-muted: #6B5A4C;            /* 6.58:1 على الأبيض، 4.95:1 على أغمق سطح */
  --text-faint: #7A6857;

  --on-surface-primary: #5C3A21;    /* 10.09:1 */
  --on-surface-accent: #8A5310;     /* 5.30:1 — الأصلي #B87326 كان 3.81 راسب كنص */
  --on-surface-success: #1F6B2B;
  --on-surface-danger: #A32D1E;
  --on-surface-info: #5A4060;

  --fill-primary: #5C3A21;
  --fill-primary-hover: #452A17;
  --fill-danger: #A32D1E;
  --fill-success: #1F6B2B;
  --fill-neutral: var(--bg-elevated);

  --focus-ring-color: #5C3A21;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--bg-dark),
                       0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  --overlay-1: rgba(92, 58, 33, 0.04);
  --overlay-2: rgba(92, 58, 33, 0.07);
  --overlay-3: rgba(92, 58, 33, 0.11);
  --scrim-1: rgba(92, 58, 33, 0.06);
  --scrim-2: rgba(92, 58, 33, 0.10);
  --scrim-3: rgba(92, 58, 33, 0.16);

  /* النمط النهاري: الظل مصبوغ ببنّي دافئ بدل الأسود، فيذوب في الورق
     البيج بدل ما يعمل هالة رمادية حواليه. */
  --shadow-hue: 24 34% 22%;
  --elev-0: none;
  --elev-1: 0 1px 2px hsl(var(--shadow-hue) / 0.07);
  --elev-2: 0 1px 2px hsl(var(--shadow-hue) / 0.06),
            0 3px 10px hsl(var(--shadow-hue) / 0.07);
  --elev-3: 0 1px 2px hsl(var(--shadow-hue) / 0.06),
            0 10px 28px hsl(var(--shadow-hue) / 0.10);
  --elev-4: 0 2px 4px hsl(var(--shadow-hue) / 0.08),
            0 18px 44px hsl(var(--shadow-hue) / 0.13);
  --elev-5: 0 2px 6px hsl(var(--shadow-hue) / 0.10),
            0 28px 70px hsl(var(--shadow-hue) / 0.18);

  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   10) قواعد إتاحة عامة (Global accessibility base)
   ========================================================================== */

/* حلقة تركيز واضحة على كل عنصر تفاعلي — لا نحذف outline أبدًا */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: var(--z-raised);
}

/* المتصفحات التي لا تدعم :focus-visible تعود للسلوك الافتراضي */
@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea):focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}

/* احترام تفضيل تقليل الحركة — إلزامي (WCAG 2.3.3 / Apple HIG) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* تقليل زمن استجابة اللمس على الموبايل */
:where(a, button, [role="button"], input, select, textarea, label) {
  touch-action: manipulation;
}

/* ==========================================================================
   10b) سلوك اللمس — الفروق اللي بتفرّق بين "موقع في متصفح" و"تطبيق"
   ========================================================================== */

/* 1) الوميض الرمادي عند اللمس: iOS Safari و Android Chrome بيرسموا
      طبقة تظليل فوق أي عنصر له onclick. ده أعلى صوت "دي صفحة ويب"،
      وبيتخانق مع ردّ فعل الضغط اللي إحنا مصمّمينه (scale 0.97). */
html {
  -webkit-tap-highlight-color: transparent;
}

/* 2) الـ hover العالق: على أجهزة اللمس، أول لمسة بتفعّل :hover وتسيبه
      مفعّل لحد ما المستخدم يلمس حاجة تانية — فالكارت بيفضل مرفوع.
      بدل ما نطارد كل قاعدة hover، نخلّي مقدار الرفع توكن ونصفّره على
      اللمس. القيمة دي مستخدمة في كل قواعد الرفع تحت. */
:root { --lift: -2px; --lift-lg: -4px; }

@media (hover: none), (pointer: coarse) {
  :root { --lift: 0px; --lift-lg: 0px; }
}

/* 3) شبكة أمان: أي عنصر تفاعلي فاتنا وبيرفع نفسه على hover — نلغي
      الحركة على اللمس فقط، ونسيب تغيّر اللون (مفيد كردّ فعل). */
@media (hover: none) {
  :where(a, button, [role="button"], .card, [class*="-card"]):hover {
    transform: none;
  }
}

/* 4) نص الأزرار مش محتوى: الضغط المطوّل عليه ما يحدّدش النص ولا يفتح
      قائمة النسخ. النص العادي (فقرات، أرقام، عناوين) يفضل قابل للتحديد. */
:where(button, [role="button"], .btn, .tab, .chip, .badge, .hub-card-go) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* مؤشر اليد على كل ما هو قابل للنقر */
:where(button, [role="button"], summary, label[for]) {
  cursor: pointer;
}

/* مربّعات الاختيار وأزرار الراديو الأصلية بتطلع 13×13 بكسل — أقل من
   الحد الأدنى 24×24 (WCAG 2.2 AA) وصعبة على الإصبع. التكبير هنا
   بيتم على كل الموقع مرة واحدة، وبيحافظ على مظهر المتصفح الأصلي. */
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--fill-primary);
  flex-shrink: 0;
}

/* اللابل هو منطقة اللمس الحقيقية لمربّع الاختيار (الضغط عليه بيبدّل
   الحالة)، فلازم هو كمان يعدّي 24px — كان 19px. */
:where(label:not([class])):has(> input[type="checkbox"], > input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  cursor: pointer;
}

/* الروابط النصّية جوّه الفقرات: الحشوة العمودية بتوسّع منطقة اللمس
   من غير ما تزوّد ارتفاع السطر (العنصر inline) — فمافيش إزاحة تخطيط. */
:where(p, li, td, dd, .field-hint) a:not(.btn) {
  padding-block: 3px;
}

/* الحالة المعطّلة: شفافية + مؤشر + دلالة (Material) */
:where(button, input, select, textarea, a)[disabled],
:where(button, input, select, textarea, a)[aria-disabled="true"],
.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* السمة hidden لازم تكسب.
   قاعدة المتصفح الافتراضية [hidden]{display:none} ضعيفة جدًا: أي كلاس
   بيحدّد display (زي .hub-card{display:flex}) بيتغلّب عليها، فالعنصر
   المفروض يكون مخفي بيفضل ظاهر. ده كان بيخلّي كارت "لوحة التحكم"
   يبان للطلاب في الصفحة الرئيسية رغم إنه متعلّم hidden. */
[hidden] { display: none !important; }

/* نص مخفي بصريًا لكن متاح لقارئ الشاشة */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* رابط "تخطَّ إلى المحتوى" — أول عنصر في تسلسل التاب */
.skip-to-content {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-tooltip);
  transform: translateY(-200%);
  background: var(--fill-primary);
  color: #fff;
  font-family: var(--font-arabic);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--elev-4);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-to-content:focus {
  transform: translateY(0);
}

/* النصوص الطويلة والروابط تنكسر بدل أن تكسر التخطيط */
:where(p, li, dd, td, .wrap-anywhere) {
  overflow-wrap: anywhere;
}

/* أرقام جدولية في الجداول والإحصاءات لمنع اهتزاز التخطيط */
:where(.stat-number, .dash-kpi-value, td[data-numeric], .tabular) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* الصور لا تتجاوز حاويتها أبدًا */
img, svg, video, canvas {
  max-width: 100%;
}

/* ==========================================================================
   أيقونات Lucide — المكتبة تستبدل <i> بـ <svg> فتُطبَّق القياسات على الاثنين
   ========================================================================== */
.lucide {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
  vertical-align: -0.18em;
}

svg.lucide {
  display: inline-block;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

/* ==========================================================================
   11) أدوات تخطيط مشتركة (Layout utilities)
   ========================================================================== */
.stack > * + * { margin-block-start: var(--space-4); }
.stack-sm > * + * { margin-block-start: var(--space-2); }
.stack-lg > * + * { margin-block-start: var(--space-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-control);
}

.measure { max-width: var(--measure); }

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gap-card);
}

.auto-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}

/* حاوية تمرير أفقي آمنة — الجداول والمخططات فقط */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}