/* ==========================================================================
   نَسَق — منصّة الجداول المدرسية
   ملف المتغيرات والأنماط الأساسية (المصدر الوحيد للألوان والخطوط والمقاسات)
   الاستخدام:  <html lang="ar" dir="rtl" data-theme="petrol">
   الأنظمة:    petrol | green | navy | plum | graphite
   ========================================================================== */


/* ---------- ثوابت لا تتغير بتغير النظام اللوني ---------- */
:root {
  /* الخطوط: الكوفي للعناوين فقط، وIBM Plex للنصوص والجداول والحقول */
  --nasaq-font-display: 'Droid Arabic Kufi', 'Noto Kufi Arabic', sans-serif;
  --nasaq-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* سلّم أحجام الخط */
  --nasaq-text-xs: 13px;
  --nasaq-text-sm: 15px;
  --nasaq-text-base: 17px;
  --nasaq-text-lg: 20px;
  --nasaq-text-xl: 24px;
  --nasaq-text-2xl: 28px;
  --nasaq-text-3xl: 36px;
  --nasaq-leading-display: 1.6;
  --nasaq-leading-body: 1.8;

  /* المسافات (مضاعفات 4) */
  --nasaq-space-1: 4px;
  --nasaq-space-2: 8px;
  --nasaq-space-3: 12px;
  --nasaq-space-4: 16px;
  --nasaq-space-5: 24px;
  --nasaq-space-6: 32px;
  --nasaq-space-7: 48px;
  --nasaq-space-8: 64px;

  /* الزوايا والارتفاعات */
  --nasaq-radius-sm: 6px;   /* خلايا الجدول، الأزرار، الحقول */
  --nasaq-radius: 10px;     /* البطاقات واللوحات */
  --nasaq-control-h: 44px;  /* أقل ارتفاع لأي عنصر يُضغط */
  --nasaq-header-h: 72px;

  /* ألوان الحالات (ثابتة في كل الأنظمة) */
  --nasaq-success: #23704F;
  --nasaq-warning: #8A5A0B;
  --nasaq-danger: #A8362E;   /* تعارض في الجدول، حذف */
  --nasaq-info: #2A5F9E;
  --nasaq-on-primary: #FFFFFF;
  --nasaq-surface: #FFFFFF;
}

/* ---------- 1) البترولي والأبيض (الافتراضي) ---------- */
:root,
[data-theme="petrol"] {
  --nasaq-primary: #0F4C5C;
  --nasaq-primary-hover: #0A3642;
  --nasaq-accent: #7CC0CE;         /* لمسات فقط، وعلى الخلفية الداكنة */
  --nasaq-accent-strong: #0F6072;  /* نص وروابط على الخلفية الفاتحة */
  --nasaq-bg: #F3F7F8;
  --nasaq-border: #CDDCE0;
  --nasaq-text: #0B2A33;
  --nasaq-muted: #4A666E;
}

/* ---------- 2) الأخضر والذهبي النحاسي ---------- */
[data-theme="green"] {
  --nasaq-primary: #0E3B33;
  --nasaq-primary-hover: #092A24;
  --nasaq-accent: #C9A66B;
  --nasaq-accent-strong: #7A5C2E;
  --nasaq-bg: #F3F5F1;
  --nasaq-border: #D2D9D0;
  --nasaq-text: #0C2A25;
  --nasaq-muted: #52635C;
}

/* ---------- 3) الكحلي والنحاسي ---------- */
[data-theme="navy"] {
  --nasaq-primary: #101B33;
  --nasaq-primary-hover: #0A1224;
  --nasaq-accent: #C9A66B;
  --nasaq-accent-strong: #7A5C2E;
  --nasaq-bg: #EEF0F2;
  --nasaq-border: #CBD0D8;
  --nasaq-text: #101B33;
  --nasaq-muted: #5B6577;
}

/* ---------- 4) الباذنجاني والوردي الهادئ ---------- */
[data-theme="plum"] {
  --nasaq-primary: #3D2645;
  --nasaq-primary-hover: #2C1A33;
  --nasaq-accent: #D9A3B4;
  --nasaq-accent-strong: #8A4A62;
  --nasaq-bg: #F6F2F5;
  --nasaq-border: #DCD2DA;
  --nasaq-text: #2A1A30;
  --nasaq-muted: #6A5A70;
}

/* ---------- 5) الفحمي والكهرماني ---------- */
[data-theme="graphite"] {
  --nasaq-primary: #2B2F36;
  --nasaq-primary-hover: #1D2025;
  --nasaq-accent: #E0B15E;
  --nasaq-accent-strong: #7D5A16;
  --nasaq-bg: #F3F2EF;
  --nasaq-border: #D6D4CE;
  --nasaq-text: #1E2126;
  --nasaq-muted: #5C6067;
}

/* ==========================================================================
   الأنماط الأساسية
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4, .nasaq-display {
  margin: 0;
  font-family: var(--nasaq-font-display);
  font-weight: 600;
  line-height: var(--nasaq-leading-display);
  color: var(--nasaq-text);
}
h1 { font-size: var(--nasaq-text-3xl); font-weight: 700; }
h2 { font-size: var(--nasaq-text-2xl); }
h3 { font-size: var(--nasaq-text-xl); }
h4 { font-size: var(--nasaq-text-lg); }

a { color: var(--nasaq-accent-strong); text-underline-offset: 4px; }
a:hover { color: var(--nasaq-primary); }

.nasaq-muted { color: var(--nasaq-muted); }

:focus-visible {
  outline: 2px solid var(--nasaq-accent-strong);
  outline-offset: 2px;
}

/* ---------- الشريط العلوي ---------- */
.nasaq-header {
  min-height: var(--nasaq-header-h);
  padding: var(--nasaq-space-3) var(--nasaq-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nasaq-space-4);
  background: var(--nasaq-primary);
  color: var(--nasaq-on-primary);
}
.nasaq-header h1,
.nasaq-header h2,
.nasaq-header .nasaq-display { color: var(--nasaq-on-primary); font-size: var(--nasaq-text-lg); font-weight: 500; }
.nasaq-header .nasaq-muted { color: var(--nasaq-accent); }

/* ---------- الشعار (SVG مضمّن) ---------- */
.nasaq-logo { display: block; height: 40px; width: auto; }
.nasaq-logo__body { fill: var(--nasaq-primary); }
.nasaq-logo__dot { fill: var(--nasaq-accent-strong); }
.nasaq-header .nasaq-logo__body,
.nasaq-logo--on-dark .nasaq-logo__body { fill: var(--nasaq-on-primary); }
.nasaq-header .nasaq-logo__dot,
.nasaq-logo--on-dark .nasaq-logo__dot { fill: var(--nasaq-accent); }

/* ---------- الأزرار ---------- */
.nasaq-btn {
  min-height: var(--nasaq-control-h);
  padding: 0 var(--nasaq-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nasaq-space-2);
  border: 1px solid var(--nasaq-primary);
  border-radius: var(--nasaq-radius-sm);
  background: var(--nasaq-primary);
  color: var(--nasaq-on-primary);
  font-family: var(--nasaq-font-body);
  font-size: var(--nasaq-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.nasaq-btn:hover { background: var(--nasaq-primary-hover); border-color: var(--nasaq-primary-hover); color: var(--nasaq-on-primary); }
.nasaq-btn:disabled { opacity: .5; cursor: not-allowed; }

.nasaq-btn--outline { background: transparent; color: var(--nasaq-primary); }
.nasaq-btn--outline:hover { background: var(--nasaq-primary); color: var(--nasaq-on-primary); }

.nasaq-btn--danger { background: var(--nasaq-danger); border-color: var(--nasaq-danger); }
.nasaq-btn--danger:hover { background: var(--nasaq-danger); border-color: var(--nasaq-danger); filter: brightness(.92); }

/* ---------- البطاقات ---------- */
.nasaq-card {
  padding: var(--nasaq-space-5);
  background: var(--nasaq-surface);
  border: 1px solid var(--nasaq-border);
  border-radius: var(--nasaq-radius);
}

/* ---------- الحقول ---------- */
.nasaq-field { display: flex; flex-direction: column; gap: var(--nasaq-space-2); }
.nasaq-label { font-size: var(--nasaq-text-sm); font-weight: 500; }
.nasaq-input,
.nasaq-select {
  min-height: var(--nasaq-control-h);
  padding: 0 var(--nasaq-space-4);
  background: var(--nasaq-surface);
  border: 1px solid var(--nasaq-border);
  border-radius: var(--nasaq-radius-sm);
  color: var(--nasaq-text);
  font-family: var(--nasaq-font-body);
  font-size: var(--nasaq-text-sm);
}
.nasaq-input:focus,
.nasaq-select:focus { border-color: var(--nasaq-primary); }

/* ---------- الشارات ---------- */
.nasaq-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nasaq-space-2);
  padding: 2px var(--nasaq-space-3);
  border: 1px solid var(--nasaq-border);
  border-radius: var(--nasaq-radius-sm);
  background: var(--nasaq-surface);
  color: var(--nasaq-muted);
  font-size: var(--nasaq-text-xs);
  font-weight: 500;
}
.nasaq-badge--danger { color: var(--nasaq-danger); border-color: var(--nasaq-danger); }
.nasaq-badge--success { color: var(--nasaq-success); border-color: var(--nasaq-success); }

/* ---------- جدول الحصص ----------
   شبكة CSS: عمود للأيام ثم الحصص. عمود الفسحة يُضاف في grid-template-columns
   حسب إعدادات المدرسة. مثال لست حصص وفسحة بعد الثالثة:
   style="grid-template-columns: 112px repeat(3, minmax(0,1fr)) 56px repeat(3, minmax(0,1fr))"
*/
.nasaq-timetable-wrap { overflow-x: auto; }
.nasaq-timetable {
  min-width: 760px;
  display: grid;
  gap: var(--nasaq-space-2);
  font-size: var(--nasaq-text-sm);
  text-align: center;
}
.nasaq-tt-head {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
  color: var(--nasaq-muted);
  font-size: var(--nasaq-text-xs);
  font-weight: 500;
}
.nasaq-tt-day {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nasaq-font-display);
  font-size: var(--nasaq-text-sm);
  font-weight: 600;
}
.nasaq-cell {
  min-height: 64px;
  padding: var(--nasaq-space-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: var(--nasaq-surface);
  border: 1px solid transparent;
  border-radius: var(--nasaq-radius-sm);
}
.nasaq-cell__sub { color: var(--nasaq-muted); font-size: var(--nasaq-text-xs); }

/* الحصة الحالية: خلفية أساسية + مربع صغير باللون المميّز (نقطة النون في الشعار) */
.nasaq-cell--current { background: var(--nasaq-primary); color: var(--nasaq-on-primary); font-weight: 500; }
.nasaq-cell--current .nasaq-cell__sub { color: var(--nasaq-accent); }
.nasaq-cell--current::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--nasaq-accent);
}

.nasaq-cell--empty { background: transparent; border: 1px dashed var(--nasaq-border); color: var(--nasaq-muted); }
.nasaq-cell--conflict { border-color: var(--nasaq-danger); color: var(--nasaq-danger); }
.nasaq-cell--break {
  background: var(--nasaq-border);
  color: var(--nasaq-muted);
  font-family: var(--nasaq-font-display);
  font-size: var(--nasaq-text-sm);
  font-weight: 500;
  writing-mode: vertical-rl;
}

/* ---------- الواجهة الإنجليزية ----------
   <html lang="en" dir="ltr"> أو أي عنصر يحمل lang="en".
   يتبدل الخطان إلى IBM Plex Sans، وتبقى الألوان والمقاسات كما هي.
   الاتجاه ينعكس وحده لأن الأنماط مكتوبة بالخصائص المنطقية. */
:root { --nasaq-font-latin: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; }

[lang|="en"] {
  --nasaq-font-display: var(--nasaq-font-latin);
  --nasaq-font-body: var(--nasaq-font-latin);
  --nasaq-leading-display: 1.25;
  --nasaq-leading-body: 1.6;
  font-family: var(--nasaq-font-body);
  line-height: var(--nasaq-leading-body);
}
[lang|="ar"] {
  --nasaq-font-display: 'Droid Arabic Kufi', 'Noto Kufi Arabic', sans-serif;
  --nasaq-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --nasaq-leading-display: 1.6;
  --nasaq-leading-body: 1.8;
  font-family: var(--nasaq-font-body);
  line-height: var(--nasaq-leading-body);
}
/* الشعار الإنجليزي أعرض وأقصر من العربي */
.nasaq-logo--en { height: 24px; }
[lang|="en"] .nasaq-cell--break { letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- الطباعة ---------- */
@media print {
  body { background: #FFFFFF; }
  .nasaq-cell { border-color: var(--nasaq-border); }
  .nasaq-header, .nasaq-cell--current, .nasaq-cell--break { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}