/*
  طبقة التصميم المشتركة للوحات المدرسة.

  **تُحمَّل بعد أنماط كل صفحة لا قبلها.** فلكل لوحة مقدّمةُ أنماطٍ
  خاصّة بها تباعدت عن أخواتها مع الوقت — ثماني نسخ متشابهة لا متطابقة.
  وتبديلُها كلّها يمسّ ثماني صفحات في وقت واحد، وطبقةٌ فوقها تُصلح
  المظهر في ملفّ واحد ولا تمسّ سلوك أيّ صفحة.

  ولذلك **لا تُذكر هنا إلا الأصناف المشتركة**: `btn` و`panel` و`field`
  و`tabs` وأمثالها ممّا يوجد في الصفحات الثمان. أمّا ما يخصّ لوحةً
  بعينها — خانة الجدول، وورقة النتيجة، وشريط التحديث — فيبقى في صفحته،
  وإلّا صار تعديلُ لوحةٍ يكسر أخرى.
*/

/* =========================================================
   ١ — الألوان والمقاسات
   ========================================================= */

:root {
  /*
    الورق أدفأ قليلًا من الأبيض الصافي.

    شاشةٌ يجلس أمامها محاسبٌ ساعات: الأبيض الصافي على خلفية بيضاء يُتعب
    العين ولا يُظهر حدود البطاقات، فتصير الصفحة سطحًا واحدًا.
  */
  --bg: #eef2f6;
  --panel: #ffffff;
  --line: #e2e8f0;
  --line-soft: #eef2f6;

  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;

  --brand: #1d4ed8;
  --brand-ink: #1e3a8a;
  --brand-soft: #eaf0ff;

  --ok: #15803d;
  --ok-soft: #e7f6ec;
  --warn: #b45309;
  --warn-soft: #fdf4e4;
  --danger: #b42318;
  --danger-soft: #fdecea;

  --radius: 14px;
  --radius-sm: 10px;

  /*
    ظلٌّ خفيف يرفع البطاقة عن الورق.

    والحدّ وحده يرسم مربّعًا ولا يرفع شيئًا: تبدو الصفحة رسمًا لا واجهة.
  */
  --lift: 0 1px 2px rgba(15, 23, 42, .04),
          0 4px 12px rgba(15, 23, 42, .045);
  --lift-2: 0 2px 4px rgba(15, 23, 42, .05),
            0 12px 28px rgba(15, 23, 42, .08);

  --ring: 0 0 0 3px rgba(29, 78, 216, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1119;
    --panel: #141c26;
    --line: #243141;
    --line-soft: #1b2531;

    --ink: #e8eef5;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;

    --brand: #60a5fa;
    --brand-ink: #93c5fd;
    --brand-soft: #16233a;

    --ok: #4ade80;
    --ok-soft: #102b1c;
    --warn: #fbbf24;
    --warn-soft: #30230c;
    --danger: #f87171;
    --danger-soft: #331919;

    --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .4);
    --ring: 0 0 0 3px rgba(96, 165, 250, .24);
  }
}

/* =========================================================
   ٢ — الخطّ
   ========================================================= */

/*
  خطٌّ عربيّ مصمَّم للواجهات.

  و«Segoe UI» يرسم العربية رسمًا مقبولًا لا جميلًا: تتساوى فيه سماكات
  الحروف فتبدو الشاشة إداريّةً باردة. ويبقى بديلًا إن تعذّر التحميل —
  فلوحةٌ لا تفتح بلا إنترنت أسوأ من لوحةٍ بخطٍّ أقلّ جمالًا.
*/
body,
button, input, select, textarea {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma,
               system-ui, sans-serif;
}

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

/*
  الأرقام بعرضٍ واحد.

  وبدونها تتراقص خانات المبالغ في عمود الجدول — ٥٠٠٬٠٠٠ فوق ٩٠٠٬٠٠٠
  ولا تستقيم الفواصل، فلا تُقرأ القائمة نظرةً واحدة.
*/
table, .fact, .kpi, .value, .amount, .totals, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =========================================================
   ٣ — الترويسة
   ========================================================= */

@media screen {
  /*
    شريطٌ أبيض يعلو الصفحة ويبقى.

    اللوحة تُمرَّر طويلًا — كشف حضور فيه ثلاثون اسمًا، وقائمة أقساط
    أطول. ومن نزل إلى آخرها فقَدَ اسم المدرسة وزرّ الخروج وزرّ تبديل
    اللوحة، فيرجع إلى الأعلى ليضغط زرًّا ثم ينزل من جديد.
  */
  header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;

    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);

    margin: 0 -18px 20px;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--line);
  }
}

header h1 {
  font-size: 19px !important;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.3;
}

/*
  خيطٌ ملوّن قبل اسم المدرسة.

  ثلاث لوحاتٍ تُفتح على الجهاز نفسه في غرفة الإدارة، وترويساتها
  متشابهة. فعلامةٌ صغيرة تُميّز الصفحة قبل أن يُقرأ عنوانها.
*/
header h1::before {
  content: "";
  display: inline-block;
  inline-size: 4px;
  block-size: 1.05em;
  margin-inline-end: 10px;
  vertical-align: -.14em;
  border-radius: 99px;
  background: linear-gradient(var(--brand), var(--brand-ink));
}

header .sub {
  font-size: 12.5px !important;
  color: var(--muted);
}

/* =========================================================
   ٤ — البطاقات
   ========================================================= */

.panel {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--lift);
  margin-bottom: 18px !important;
}

.panel > h2 {
  padding: 13px 16px !important;
  font-size: 14.5px !important;
  font-weight: 700;
  letter-spacing: -.1px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 42%, var(--panel)),
    var(--panel)
  );
  border-bottom: 1px solid var(--line) !important;
}

.panel .body { padding: 16px !important; }

/*
  لوحةٌ جسمُها مطويّ لا تُرسم خطًّا تحت عنوانها.

  «إضافة طالب وفتح قسطه» و«قسط كل صفّ» عنوانٌ وزرٌّ وجسمٌ مخفيّ ينتظر
  الضغط. والخطّ تحته يجعلهما صندوقين فارغين يفصلان القائمة عن أرقامها
  بلا سبب.

  و`hidden` لا تُخرج العنصر من الشجرة — فـ`:last-child` لا تكفي،
  و`:has` هي التي تسأل عمّا بعده.
*/
.panel > h2:only-child,
.panel > h2:last-child,
.panel:has(> .body[hidden]:last-child) > h2 { border-bottom: 0 !important; }

/*
  حقلٌ في ترويسة اللوحة — بحثٌ أو منتقٍ.

  وهي موضوعةٌ بأنماطٍ سطريّة في الصفحات، تُلوّنها بلون الورق فتبدو
  محفورةً في الترويسة لا حقلًا يُكتب فيه.
*/
.panel > h2 input,
.panel > h2 select {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  color: var(--ink) !important;
  font-weight: 400;
}

.panel > h2 input:focus,
.panel > h2 select:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: var(--ring);
}

.note {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.7;
}

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/*
  رابطٌ يُنسخ ويُرسل.

  وهو غير السرّ الذي يُقرأ مرّةً: ذاك يُحاط بالبرتقاليّ ليُنتبه إليه
  قبل أن يُغلق، وهذا يُنشر — فيُعرض هادئًا ومعه زرّ نسخ، لأنّ من
  يختاره بالفأرة على هاتفٍ يأخذ نصفه.
*/
.linkbox {
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.linkbox .label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 7px;
}

.linkbox .row { align-items: center; gap: 8px !important; }

.linkbox .value {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  color: var(--ink);
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}

.linkbox .btn { flex: 0 0 auto; }

/* =========================================================
   ٥ — الأرقام في الأعلى
   ========================================================= */

.facts, .kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.fact, .kpi {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 15px 16px 16px !important;
  overflow: hidden;
}

/*
  خيطٌ ملوّن أعلى البطاقة.

  أربع بطاقاتٍ بيضاء متطابقة لا يُفرَّق بينها إلا بقراءة عناوينها كلها —
  واللون يُغني عن القراءة: الواصل أخضر، والمصروف برتقالي، والمستحق أحمر.
*/
.fact::before, .kpi::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--brand);
  opacity: .85;
}

.fact.ok::before, .kpi.ok::before { background: var(--ok); }
.fact.warn::before, .kpi.warn::before { background: var(--warn); }
.fact.danger::before, .kpi.danger::before { background: var(--danger); }

/*
  ويُؤخذ اللون من الرقم نفسه.

  فالصنف موضوعٌ على الرقم لا على البطاقة (`value ok`)، والبطاقات تُبنى
  في النصّ البرمجيّ — فاشتراط صنفٍ عليها يعني تعديل كل موضعٍ تُبنى فيه
  في ثماني لوحات. و`:has` تقرأ ما هو مكتوبٌ أصلًا.
*/
.fact:has(.value.ok)::before, .kpi:has(.value.ok)::before {
  background: var(--ok);
}
.fact:has(.value.warn)::before, .kpi:has(.value.warn)::before {
  background: var(--warn);
}
.fact:has(.value.danger)::before, .kpi:has(.value.danger)::before {
  background: var(--danger);
}

.fact .label, .kpi .label {
  font-size: 12.5px !important;
  color: var(--muted);
  font-weight: 500;
}

.fact .value, .kpi .value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.35;
}

/* =========================================================
   ٦ — الأزرار
   ========================================================= */

.btn {
  border-radius: var(--radius-sm) !important;
  padding: 9px 16px !important;
  font-weight: 500;
  line-height: 1.5;
  transition: background .15s, border-color .15s, color .15s,
              box-shadow .15s, transform .06s;
}

.btn:hover { box-shadow: var(--lift); }
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn.primary {
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .28);
}
.btn.primary:hover {
  filter: none;
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  box-shadow: 0 3px 10px rgba(29, 78, 216, .3);
}

.btn.ok { font-weight: 600; }
.btn.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn.big { padding: 12px 22px !important; font-size: 15.5px !important; }

.btn:disabled {
  opacity: .45;
  box-shadow: none;
  transform: none;
}

/* =========================================================
   ٧ — التبويبات
   ========================================================= */

/*
  كل تبويب زرٌّ له سطحٌ وحدّ.

  **جرّبتُ المفتاح المقسوم أوّلًا** — مسارٌ رماديّ وأزرارٌ بلا حدود
  داخله. وهو أنيقٌ لثلاثة تبويبات؛ ولوحةُ الإدارة عشرة: انكسر السطر،
  وبقي «الغياب والحضور» وحده في صفٍّ ثانٍ داخل المسار الرمادي، وصار
  غيرُ المفتوح كلامًا مكتوبًا على رماديّ لا زرًّا يُضغط.

  فلا مسار ولا خلفية: لكلّ تبويب سطحٌ أبيض وحدّ، فيُعرف أنّه يُضغط قبل
  أن يُجرَّب. والانكسار إلى سطرين يصير مقصودًا لا مكسورًا.
*/
.tabs {
  display: flex;
  gap: 8px !important;
  flex-wrap: wrap;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
}

.tabs button {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  padding: 9px 16px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14.5px !important;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: background .15s, color .15s, border-color .15s,
              box-shadow .15s, transform .06s;
}

.tabs button:hover {
  border-color: var(--brand) !important;
  color: var(--brand-ink) !important;
}

.tabs button:active { transform: translateY(1px); }

.tabs button:focus-visible { outline: none; box-shadow: var(--ring); }

/*
  والمفتوح مملوءٌ لا مُحاطًا.

  تمييزُه بلونِ نصٍّ أو حدٍّ وحده لا يُرى في صفٍّ فيه عشرة، فيبقى
  صاحب الشاشة لا يعرف أين هو.
*/
.tabs button.on {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(29, 78, 216, .28);
}

.tabs button.on:hover {
  background: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
  color: #fff !important;
}

/* =========================================================
   ٨ — الحقول
   ========================================================= */

.field label {
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px !important;
}

.field input,
.field select,
.field textarea {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #cbd5e1; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: var(--ring);
}

.field input::placeholder,
.field textarea::placeholder { color: #a3b1c2; }

.row { gap: 12px !important; }

/*
  زرُّ الصفّ يأخذ قياس كلمته لا قياس حقل.

  الحقول في الصفّ تتقاسم العرض بالتساوي، والزرّ واحدٌ منها — فيخرج
  «إضافة» كتلةً زرقاء بعرض ثلاثمئة بكسل بجانب ثلاثة حقول، أثقل ما في
  الصفّ وأقلّه كلامًا.

  والعرض مكتوبٌ سطريًّا في الصفحات (`width:100%`)، فلا يُزاح إلا
  بـ`!important`.
*/
.row > .field:has(> .btn:only-child) { flex: 0 0 auto; }

.row > .field > .btn:only-child {
  width: auto !important;
  min-width: 120px;
}

/* =========================================================
   ٩ — الجداول
   ========================================================= */

/*
  **جداول الشاشة وحدها.**

  فالأوراق المطبوعة — الجدول العام، وجدول الشعبة، وورقة النتيجة —
  جداولٌ أيضًا، ومقاساتُها محسوبةٌ بالمليمتر لتسع الورقة. وقاعدةٌ عامّة
  هنا تُصيب منها ما لم يُصرَّح له بحشوة:

  خانةُ رقم الحصة (`mper`) لا حشوة لها في صفحتها، فأخذت ١١ بكسل من
  `table td` أعلاه — فارتفع سطرُ الجدول من ٢٩ بكسل إلى ٤١، وصارت
  الورقة ٣٧١ مم بعد ٢٦٦، وخرج «الجدول العام» على ورقتين.

  ولم يظهر ذلك على الشاشة أبدًا: الطابعة وحدها أرَتْه.
*/
@media screen {
  table {
    width: 100%;
    border-collapse: collapse;
  }

  table th {
    text-align: start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    padding: 11px 14px;
    background: color-mix(in srgb, var(--bg) 55%, var(--panel));
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }

  table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }

  table tbody tr:last-child td { border-bottom: 0; }

  table tbody tr { transition: background .12s; }
  table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 4%, transparent);
  }

  /*
    أزرار السطر أصغر وأهدأ.

    قائمة المواد ثمانيةٌ في ستّة صفوف = ثمانٍ وأربعون سطرًا، في كلٍّ
    منها زرّان بقياس أزرار النماذج. فتصير الصفحة صفًّا من الأزرار
    وبينها بياناتٌ لا تكاد تُرى.
  */
  table .btn {
    padding: 5px 12px !important;
    font-size: 13px !important;
    box-shadow: none;
  }

  table .btn:hover { box-shadow: var(--lift); }

  /*
    والأحمر يُحجز لما لا رجعة فيه.

    ثمانيةٌ وأربعون زرًّا أحمر في صفحةٍ واحدة تُفقد اللون معناه: من
    يراه في كل سطر لا يتوقّف عنده حين يقع على حذفٍ حقيقي. فيبقى الحدّ
    هادئًا ويظهر الأحمر عند اللمس وحده.
  */
  table .btn.danger {
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }

  table .btn.danger:hover {
    background: var(--danger-soft) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
  }

  /* وخلايا الإجراءات لا تُباعد أزرارها */
  table td:has(> .btn), table td:has(> .btn + .btn) { white-space: nowrap; }
  table td > .btn + .btn { margin-inline-start: 6px; }
}

/* =========================================================
   ١٠ — الشارات والرسائل
   ========================================================= */

.pill {
  font-size: 12px !important;
  font-weight: 600;
  padding: 3px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

.error, .success {
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}
.error { border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.success { border-color: color-mix(in srgb, var(--ok) 22%, transparent); }

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

/* =========================================================
   ١١ — الدخول
   ========================================================= */

/*
  أوّل ما يراه صاحب النظام.

  وهي الآن نموذجٌ عائم في أعلى صفحةٍ فارغة: لا بطاقة تحيطه ولا شيء
  يقول أيّ لوحةٍ هذه قبل قراءة عنوانها الصغير. ومن يبيع نظامًا يُحكم
  عليه من هذه الشاشة قبل غيرها.
*/
@media screen {
  body:has(#loginView:not([hidden])) { background: var(--bg); }

  .login {
    max-width: 400px !important;
    margin: 0 auto !important;
    margin-block-start: 9vh !important;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--lift-2);
    padding: 30px 28px 26px;
  }

  .login h1 {
    font-size: 22px !important;
    font-weight: 700;
    margin-block-end: 2px !important;
  }

  /* العلامة نفسها التي في الترويسة، أكبر ومتوسّطة */
  .login h1::before {
    content: "";
    display: block;
    inline-size: 44px;
    block-size: 44px;
    margin: 0 auto 14px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--brand), var(--brand-ink));
    box-shadow: 0 6px 16px rgba(29, 78, 216, .26);
  }

  .login p { font-size: 13.5px !important; margin-bottom: 22px !important; }

  .login .field input { padding: 11px 13px !important; }
}

/* =========================================================
   ١٢ — الهاتف
   ========================================================= */

@media (max-width: 760px) {
  header { margin-inline: -12px; padding-inline: 12px !important; }
  header h1 { font-size: 17px !important; }

  .tabs { gap: 3px !important; padding: 4px; }
  .tabs button { padding: 8px 13px !important; font-size: 13.5px !important; }

  .facts, .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .fact .value, .kpi .value { font-size: 19px; }

  .panel { border-radius: 12px !important; }
  .login { margin-block-start: 5vh !important; padding: 24px 20px; }
}