/* =====================================================================
   تطبيق الترحيل والانصراف — واجهة الجوال
   مقاسات اللمس كبيرة عمداً: مسؤول الانصراف يستخدم الجهاز واقفاً في
   الساحة، بيد واحدة، وتحت ضوء الشمس. التباين مرفوع لنفس السبب.
   ===================================================================== */
/* الرموز كلها في shared/tokens.css — مصدر واحد للواجهتين. يُربط قبل هذا
   الملف في index.html، والأسماء القديمة تبقى عاملة من هناك. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font);
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.55;
  /* الاتجاه من سمة dir على <html> — تضبطها وحدة اللغة */
  overscroll-behavior-y: contain;
}
button, input, select, textarea { font: inherit; color: inherit; }

.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.small { font-size: 14px; }
[hidden] { display: none !important; }

/* الأيقونة خطٌّ مرسوم لا رمزٌ تعبيري: الرمز التعبيري يختلف شكله بين
   الأجهزة، ويكبر ويصغر بلا ضابط، ولا يأخذ لون الواجهة. */
.icon-btn svg { width: 20px; height: 20px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- شريط الشبكة ---------- */
.netbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px; font-size: 13.5px; font-weight: 600;
  background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--c-warn-fg);
}
.netbar.off { background: var(--danger-bg); color: var(--danger); border-bottom-color: var(--c-bad-fg); }
.netbar.ok { background: var(--green-bg); color: var(--green); border-bottom-color: #c5e5c7; }
.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* ---------- الدخول ---------- */
.screen {
  min-height: 100vh; display: grid; place-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
#login { background: linear-gradient(165deg, var(--c-info-bg) 0%, var(--bg) 60%, var(--c-ok-bg) 100%); }
/* أثناء الإقلاع تبقى الخلفية ويختفي ما فوقها: visibility لا display كي لا
   تُحسب الصفحة مرتين فتقفز عند الظهور. انظر السكربت في index.html */
.booting #login > * { visibility: hidden; }
.login-card {
  width: min(400px, 100%); background: var(--card); border-radius: 16px;
  box-shadow: var(--shadow); padding: 30px 24px; text-align: center;
}
.login-card img { object-fit: contain; }
.login-card h1 { font-size: 21px; margin: 12px 0 2px; color: var(--fg-strong); }
.login-card .sub { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.field { text-align: start; margin-bottom: 14px; }
label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=tel], input[type=date],
input[type=time], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 12px; min-height: var(--tap);
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,120,220,.15);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 11px 18px; border: 1px solid transparent;
  border-radius: var(--r-sm); background: var(--accent-solid); color: var(--on-accent); font-weight: 700;
  cursor: pointer; font-size: 15.5px;
}
.btn:active { background: var(--blue-dark); }
.btn:disabled { opacity: .5; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--surface); color: var(--fg-strong); border-color: var(--line); }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--green); }
/* إعادة النداء: لا هي فعل عادي ولا خطر — لونها يقول إن شيئاً تأخّر */
.btn.warn { background: var(--warn); }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }

.msg { display: none; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; text-align: start; }
.msg.on { display: block; }
.msg.err { background: var(--danger-bg); color: var(--danger); }
.msg.ok { background: var(--green-bg); color: var(--green); }

/* ---------- الهيكل ---------- */
.clockbar {
  background: var(--surface); border-bottom: 1px solid var(--line); color: var(--muted);
  font-size: 12.5px; font-weight: 600; text-align: center; padding: 5px 10px;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.clockline { margin: -12px 0 18px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

#topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  /* المسافة العليا تُضاف لشريط حالة الآيفون: التطبيق المثبَّت على الشاشة
     الرئيسية يمتدّ تحته (viewport-fit=cover مع شريط حالة شفاف)، وبدونها
     تقع أزرار القائمة والإشعارات تحت ساعة النظام وبطاريته فيصعب لمسها. */
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--navy); color: #fff;
}

/* حين يظهر شريط الشبكة فهو الأعلى في الصفحة، فالمسافة له وحده لا لاثنين */
#netbar:not([hidden]) ~ #app #topbar { padding-top: 10px; }
#topbar .titles { flex: 1; min-width: 0; line-height: 1.25; }
/* عنوان الشاشة h1 لا b: الشاشة يجب أن تحمل عنواناً في ترتيب المستندات،
   لا نصّاً عريضاً. والحجم يُضبط هنا — h1 بلا حجم يأخذ 2em ويكسر الشريط. */
#topbar .titles h1 {
  margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.25;
}
#topbar .titles span { color: #b8cde0 !important; }
.icon-btn {
  position: relative; width: var(--tap); height: var(--tap); flex: none;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  border-radius: 10px; font-size: 19px; cursor: pointer;
}
.dot {
  position: absolute; top: 6px; inset-inline-start: 6px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--yellow);
}

#tabs { display: flex; gap: var(--sp-4); padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
/* خطٌّ تحتيّ لا حبّة ممتلئة: الحبّات المستديرة الملوّنة صارت علامة على
   واجهةٍ مولّدة، والخطّ التحتي يقول «أنت هنا» بحبرٍ لا بلون. */
#tabs button {
  flex: none; min-height: var(--tap); padding: 0 var(--sp-3);
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--fg-muted);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
}
#tabs button.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); }

/* هامش 16px لا 12: النصّ لا يلامس حافة الشاشة على الجوّال */
main { padding: var(--sp-4) var(--sp-4) 90px; max-width: 900px; margin: 0 auto; }

/* ---------- بطاقات ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin-bottom: 12px; 
}
.card > h3 { margin: 0 0 10px; font-size: 15.5px; color: var(--fg-strong); }
/* البطاقة الساكنة بحدٍّ لا بظلّ — الظلّ لما يطفو فعلاً: ورقة أو قائمة */
.card.flat { border-color: transparent; background: none; padding-inline: 0; }
/* بطاقة التأخّر: حافة حمراء لأنها الحالة الوحيدة على هذه الشاشة التي
   ثمنها طفل واقف عند البوابة، فلا تُقرأ كبقية البطاقات */
.card.alert { border-color: var(--danger); background: var(--danger-bg); }
.card.alert > h3 { color: var(--danger); }
/* بطاقةٌ داخل بطاقة تُثقل الشاشة: صفوف مقسومة بخطٍّ واحد بدلها */
.card.alert .queue-item {
  border: 0; border-radius: 0; background: none; margin: 0;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-bad-fg);
}
.card.alert .queue-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- تقدّم اليوم ----------
   كانت ثلاث بطاقات بأرقام عارية. النسبة تُرى بلمحة، والجملة تحتها تقول
   ماذا يُفعل الآن. الشريط يحمل تدرّج الطفلين من الشعار: طفلٌ خرج. */
.progress-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.progress-card .row { display: flex; align-items: baseline; gap: 10px; }
.progress-card .lbl { font-size: 13px; color: var(--muted); flex: 1; }
.progress-card b {
  font-size: 22px; color: var(--fg-strong); line-height: 1.15;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.progress-card .bar {
  height: 8px; border-radius: 6px; background: var(--surface-sunk);
  overflow: hidden; margin-top: 9px;
}
/* تدرّج الطفلين من brand/aiks-mark.svg — بيانات لا زينة */
.progress-card .bar i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(160deg, #F2DE45, #8CC63F);
  transition: width .4s ease;
}
.progress-card .finding { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; }
.progress-card .finding .late { color: var(--danger); font-weight: 600; }
.progress-card .finding .ok { color: var(--green); font-weight: 600; }

/* ---------- شريط التسليم ----------
   كل طالب علامة. تُقرأ بلمحة حيث يُقرأ الرقم بالحساب. */
.strip { display: flex; gap: 3px; margin-top: 7px; }
.strip i {
  display: block; width: 7px; height: 16px; border-radius: 2px;
  background: var(--surface-sunk); flex: none;
}
/* فوق أربعٍ وعشرين: نِسَبٌ في سطر واحد بدل علامات تلتفّ على ثلاثة أسطر */
.strip.bar { gap: 2px; max-width: 210px; }
.strip.bar i { width: auto; min-width: 3px; }
/* المتأخّر لا يقلّ عن خمس بكسلات مهما كبرت الحافلة: علامة تُرى أو لا تكون */
.strip.bar i.late { min-width: 5px; }
.strip i.on   { background: linear-gradient(160deg, #F2DE45, #8CC63F); }
.strip i.late { background: var(--danger); }

/* ---------- شارة الحالة: شكلٌ وكلمة ----------
   اللون وحده لا يصل من لا يميّزه، ولا يُقرأ تحت وهج الشمس. النقطة
   تسبق الكلمة فتُعرف الحالة من بعيد قبل أن تُقرأ. */
.pill::before {
  content: ""; display: inline-block; vertical-align: -1px;
  width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px;
  background: currentColor;
}
.pill.wait::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }


/* ---------- الرمز اليومي ---------- */
.code-card {
  background: linear-gradient(150deg, var(--navy), #0a4f8a);
  color: #fff; border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 14px;
}
.code-card .label { font-size: 13px; opacity: .85; }
.code-card .code {
  font-size: 46px; font-weight: 800; letter-spacing: 10px;
  direction: ltr; margin: 6px 0 4px; font-variant-numeric: tabular-nums;
}
.code-card .note { font-size: 12.5px; opacity: .85; }

/* ---------- الطابور والقوائم ---------- */
/* قائمة شروط الإشعارات: الشرط المختلّ وسببه في سطر واحد */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.checklist li:last-child { border-bottom: 0; }
.checklist li.ok b { color: var(--green); }
.checklist li.bad b { color: var(--danger); }
.checklist li span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* نداء البوابة: يُلتقط بلمحة من سائق يفتح جواله في سيارته */
.summon-call {
  background: var(--green-bg); border-color: var(--c-ok-fg); color: var(--green);
  border-inline-start: 5px solid var(--green);
}
.summon-call b { font-size: 16.5px; }

/* الهوية تأخذ سطرها كاملاً والأفعال تنزل تحتها على الشاشة الضيّقة.
   كان زرّ «استدعاء مرة أخرى» الطويل يسحق اسم جهة الاستلام إلى ثلاثة
   أسطر — والهوية لا تُقصّ ليتّسع زرّ. */
.queue-item, .student-row {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); margin-bottom: var(--sp-2); width: 100%; text-align: start; cursor: pointer;
}
.queue-item > .btn { margin-inline-start: auto; }
/* صفّ الطابور: الهوية تملك سطرها. صفّ الطالب يبقى على سطر واحد لأن
   مربّع التحديد يجب أن يحاذي الاسم. */
.queue-item .grow { flex: 1 1 100%; min-width: 0; }
.student-row .grow { flex: 1; min-width: 0; }
.queue-item b, .student-row b { display: block; font-size: 15.5px; }
.queue-item.pressed, .student-row.sel { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0,120,220,.15); }
.student-row.done { background: var(--c-ok-bg); border-color: var(--c-ok-fg); }
.student-row.gone { background: var(--surface-sunk); opacity: .75; }
/* شاشة المعلّم: المستدعى يجب أن يُلتقط بلمحة وسط حصة، لا بقراءة الحالة */
.student-row.calledNow { background: var(--c-info-bg); border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0,120,220,.12); }

.check {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 15px; color: #fff; background: var(--surface);
}
.check.on { background: var(--blue); border-color: var(--blue); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.ok { background: var(--c-ok-bg); color: var(--c-ok-fg); }
.pill.wait { background: var(--surface-sunk); color: var(--fg-muted); }
.pill.called { background: var(--c-info-bg); color: var(--c-info-fg); }
.pill.bad { background: var(--c-bad-bg); color: var(--c-bad-fg); }
.pill.warn { background: var(--c-warn-bg); color: var(--c-warn-fg); }

.empty { padding: 30px 16px; text-align: center; color: var(--muted); }

/* شريط الإجراءات الثابت أسفل الشاشة */
.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 25;
  display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(7,56,99,.06);
}
.actionbar .btn { flex: 1; }

/* ---------- درج ونافذة ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(7,56,99,.4); display: grid; }
.drawer-card {
  background: var(--surface); width: min(320px, 86%); height: 100%; padding: 16px;
  box-shadow: var(--shadow); overflow-y: auto;
}
.drawer .who { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.row-btn {
  display: block; width: 100%; text-align: start; min-height: var(--tap);
  padding: 11px 12px; margin-bottom: 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 15px;
}
.row-btn.danger { color: var(--danger); border-color: var(--c-bad-fg); }

.sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(7,56,99,.45); display: grid; align-items: end; }
.sheet {
  background: var(--surface); width: 100%; max-height: 90vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
}
.sheet h3 { margin: 0; padding: 16px 18px 12px; font-size: 17px; color: var(--fg-strong); }
.sheet-body { padding: 0 18px 12px; }
.sheet-foot { display: flex; gap: 8px; padding: 12px 18px 18px; }
.sheet-foot .btn { flex: 1; }
@media (min-width: 620px) {
  .sheet-back { align-items: center; justify-items: center; }
  .sheet { width: min(520px, 92%); border-radius: 16px; }
}

/* حقل الرمز — أرقام كبيرة متباعدة */
.code-input {
  width: 100%; text-align: center; font-size: 30px; letter-spacing: 12px;
  direction: ltr; font-weight: 700; padding: 14px; font-variant-numeric: tabular-nums;
}

#toast { position: fixed; inset-inline: 12px; bottom: 78px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
/* التنبيه لا يحجب أزرار الورقة المفتوحة: يُرفع لأعلى الشاشة عند فتحها */
.sheet-back:not([hidden]) ~ #toast { bottom: auto; top: 12px; }
#toast div {
  background: var(--navy); color: #fff; padding: 12px 15px; border-radius: 12px;
  box-shadow: var(--shadow); font-size: 14.5px;
}
#toast div.err { background: var(--danger); }
#toast div.ok { background: var(--green); }

.steps { counter-reset: s; padding: 0; margin: 8px 0; list-style: none; }
.steps li {
  counter-increment: s; position: relative; padding-inline-start: 34px; margin-bottom: 10px; font-size: 14.5px;
}
.steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

/* ---------------- مبدّل اللغة ---------------- */
.lang-row { display: flex; justify-content: center; margin: 10px 0 14px; }
.lang-select {
  appearance: auto; font: inherit; font-size: 13px;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: inherit;
  min-height: 38px; cursor: pointer;
}
#drawerLang { margin: 4px 0 10px; }
#drawerLang .lang-select { width: 100%; min-height: var(--tap); }

/* ---------------- دعوة فتح الجلسة ----------------
   المرحلة التي لم تُفتح جلستها هي الحالة الوحيدة في هذه القائمة التي
   تنتظر فعلاً من المستخدم، فتُعطى لون فعل لا لون حالة. مقاسها بمقاس
   اللمس: الصف كله قابل للضغط، لكن الإصبع يذهب إلى ما يبدو زرّاً. */
.cta-open {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--green); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(46,125,50,.25);
}
.queue-item:active .cta-open { background: #256428; }
.cta-open.off { background: var(--surface-sunk); color: var(--fg-muted); box-shadow: none; }