/* ═══════════════════════════════════════════════════════════
   بوابة الجدول المؤقت — واجهة المتدرب
   لغة التصميم: **وثيقة رسمية لا تطبيق ملوّن**. ترويسة بيضاء تحمل
   الشعار وخطاً فيروزياً تحتها، وبطاقات بحدود رفيعة لا ظلال ثقيلة.
   السبب: هذه الصفحة تُصوَّر وتُعرض على غيرها — فيجب أن تُقرأ كوثيقة
   صادرة من الكلية، لا كواجهة تطبيق.
   الجوال أولاً: كل المقاسات مبنية على ٣٧٥ بكسل ثم تتسع.
   ═══════════════════════════════════════════════════════════ */

:root{
  --teal:#1F7A72; --teal-d:#14544e; --teal-l:#e9f4f2; --teal-b:#7fc4bb;
  --ink:#152423; --ink-2:#3d4f4d; --dim:#7a8b89; --line:#e2eae8; --line-2:#cfdedb;
  --bg:#f1f5f4; --card:#fff;
  --warn:#8a5a00; --warn-bg:#fff8e8; --warn-b:#f0dcae;
  --red:#a32420; --red-bg:#fdefee; --red-b:#f0cbc9;
  --green:#0b7a41; --green-bg:#eaf7f0; --green-b:#b3e0c6;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(21,36,35,.05), 0 4px 14px rgba(21,36,35,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Tahoma,system-ui,-apple-system,"Noto Naskh Arabic",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-text-size-adjust:100%; font-size:15px;
}
/* على الجوال الصفحة بعرض الشاشة؛ على اللابتوب تصير ورقة وثيقة
   مركزية — انظر استعلام الوسائط في آخر الملف. */
.page{width:100%}

/* ── منع الحفظ والنسخ ─────────────────────────────────────
   طبقة ردع لا طبقة منع: لقطة الشاشة لا يمنعها متصفح. ما تمنعه هذه
   القواعد فعلاً: الحفظ بالضغط المطوّل، وتحديد النص، وقائمة الزر الأيمن. */
.guard,.guard *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-user-drag:none;
}
img{-webkit-user-drag:none; max-width:100%}
.guard img{pointer-events:none}

/* ── الترويسة الرسمية ─────────────────────────────────── */
.head{
  background:var(--card); padding:18px 16px 0; text-align:center;
  border-bottom:3px solid var(--teal);
  box-shadow:0 1px 0 rgba(21,36,35,.04);
}
/* الحجم مقصود: أصغر من هذا يصير اسم الكلية تحت الشعار غير مقروء،
   وهو أهم ما في الترويسة لأن الصفحة تُصوَّر وتُعرض على غير صاحبها. */
.head .logo{height:118px; width:auto; display:inline-block}
.head .org{
  margin:12px 0 0; font-size:12.5px; color:var(--dim); letter-spacing:.2px;
}
.head .rule{
  height:3px; margin:14px -16px 0;
  background:linear-gradient(90deg,var(--teal-b),var(--teal),var(--teal-d));
}
.head.compact{padding-top:14px}
.head.compact .logo{height:88px}

.title{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:14px 16px; text-align:center;
}
.title h1{margin:0; font-size:19px; font-weight:700; letter-spacing:-.2px}
.title .term{font-size:13px; color:var(--dim); margin-top:2px}

/* ── بطاقة هوية المتدرب ───────────────────────────────── */
.who{
  background:var(--card); margin:12px; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:13px 14px;
  display:flex; align-items:center; gap:12px;
}
.who .av{
  width:42px; height:42px; border-radius:12px; background:var(--teal-l);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.who .av img{width:26px; height:auto}
.who .nm{font-weight:700; font-size:15.5px; line-height:1.4}
.who .no{font-size:13px; color:var(--dim); direction:ltr; text-align:right; letter-spacing:.4px}
.who .badge{
  margin-inline-start:auto; background:var(--teal-l); color:var(--teal-d);
  border:1px solid #cfe7e3; border-radius:8px; padding:4px 10px;
  font-size:11px; font-weight:700; text-align:center; max-width:33%; line-height:1.35;
}

/* ── شريط «مؤقت» ──────────────────────────────────────── */
.temp{
  margin:0 12px; background:var(--warn-bg); border:1px solid var(--warn-b);
  color:var(--warn); border-radius:var(--r); padding:12px 14px; font-size:13.5px;
  display:flex; gap:10px; align-items:flex-start;
}
.temp b{display:block; font-size:14.5px; margin-bottom:1px}
.temp .ic{font-size:18px; line-height:1.15}

.stampbar{
  margin:10px 12px 0; display:flex; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--dim);
}
.stampbar span{
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 9px;
}
.stampbar b{color:var(--ink-2); font-weight:600}

/* ── تنبيه التغيير ────────────────────────────────────── */
.changed{
  margin:12px; background:var(--card); border:1px solid var(--green-b);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
.changed .h{
  background:var(--green); color:#fff; padding:11px 14px; font-weight:700; font-size:14.5px;
  display:flex; align-items:center; gap:8px;
}
.changed .b{padding:12px 14px; font-size:13.5px}
.chg{border-inline-start:3px solid var(--line-2); padding:8px 11px; margin:9px 0; border-radius:0 8px 8px 0}
.chg.add{border-color:var(--green); background:var(--green-bg)}
.chg.del{border-color:var(--red); background:var(--red-bg)}
.chg.mv{border-color:var(--warn); background:var(--warn-bg)}
.chg .lab{font-size:11px; font-weight:800; opacity:.75; display:block; letter-spacing:.3px}
.chg .ln{font-size:13px}
.chg .old{text-decoration:line-through; opacity:.6}
.ackbtn{
  display:block; width:100%; margin-top:12px; background:var(--green); color:#fff;
  border:0; border-radius:11px; padding:13px; font:inherit; font-weight:700;
  font-size:15px; cursor:pointer;
}

/* ── الجدول ───────────────────────────────────────────── */
.sheet{margin:6px 12px 0; position:relative}
.day{
  margin:18px 0 9px; display:flex; align-items:center; gap:10px;
}
.day span{
  background:var(--teal); color:#fff; font-size:12.5px; font-weight:700;
  border-radius:7px; padding:3px 12px; letter-spacing:.2px;
}
.day::after{content:""; flex:1; height:1px; background:var(--line-2)}

.lec{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:0; margin-bottom:9px; display:flex; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.lec::before{content:""; width:4px; background:var(--line-2); flex:0 0 auto}
.lec.prac::before{background:var(--teal)}
.lec.new{border-color:var(--green-b)}
.lec.new::before{background:var(--green)}
.lec .tm{
  flex:0 0 66px; text-align:center; direction:ltr; padding:11px 4px;
  background:#fafcfb; border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.lec .tm b{display:block; font-size:15.5px; font-weight:700; color:var(--teal-d); letter-spacing:-.3px}
.lec .tm i{display:block; width:14px; height:1px; background:var(--line-2); margin:3px auto}
.lec .tm span{display:block; font-size:12px; color:var(--dim)}
.lec .gw{flex:1; min-width:0; padding:11px 12px}
.lec .ttl{font-weight:700; font-size:14.5px; line-height:1.45}
.lec .mt{font-size:12.5px; color:var(--dim); margin-top:3px}
.lec .mt b{color:var(--ink-2); font-weight:600}
.lec .rm{
  display:inline-block; background:var(--teal-l); color:var(--teal-d);
  border-radius:6px; padding:1px 8px; font-size:12px; font-weight:700; margin-top:4px;
}
.lec .tag{
  position:absolute; inset-inline-end:0; top:0; background:var(--green);
  color:#fff; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:0 0 0 9px;
}

.totals{
  margin:16px 12px 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); display:flex; overflow:hidden; box-shadow:var(--shadow);
}
.totals div{flex:1; padding:12px 6px; text-align:center}
.totals div+div{border-inline-start:1px solid var(--line)}
.totals span{display:block; font-size:11.5px; color:var(--dim)}
.totals b{font-size:20px; color:var(--teal-d); font-weight:700}

.card{
  margin:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow);
}
.card .lab{font-size:11.5px; color:var(--dim)}
.card .nm{font-weight:700; font-size:15px}
.card.dim{color:var(--dim); text-align:center}

/* ── العلامة المائية ──────────────────────────────────────
   ثابتة على النافذة لا على الصفحة: أي لقطة تلتقط ما في النافذة،
   فيلزم أن تكون حاضرة فيها مهما كان موضع التمرير. */
.wm{
  position:fixed; inset:-30%; z-index:9; pointer-events:none;
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center;
  gap:26px 34px; transform:rotate(-26deg); opacity:.10; overflow:hidden;
}
.wm span{font-size:13px; font-weight:800; color:#0d4f4a; white-space:nowrap; letter-spacing:.3px}
@media (min-width:700px){ .wm span{font-size:15px} .wm{gap:34px 46px} }

/* ── الأزرار والذيل ───────────────────────────────────── */
.btn{
  display:block; margin:12px; background:var(--teal); color:#fff;
  text-decoration:none; text-align:center; border-radius:12px; padding:14px;
  font-weight:700; font-size:15px; border:0; cursor:pointer; width:calc(100% - 24px);
}
.btn:active{background:var(--teal-d)}
/* الواتساب مسار ثانوي — يبقى ظاهراً ولا يزاحم زر «عرض جدولي» */
.btn.g{background:var(--card); color:#0f7a3d; border:1.5px solid #a8ddbe;
       font-size:14px; padding:12px}
.btn.o{background:var(--card); color:var(--teal-d); border:1.5px solid var(--teal-b)}
.btn.full{width:100%; margin-inline:0}

.notice{
  margin:16px 12px 0; text-align:center; color:var(--red); font-weight:600;
  font-size:14.5px; line-height:1.85; background:var(--red-bg);
  border:1px solid var(--red-b); border-radius:var(--r); padding:12px 14px;
}
.notice b{font-weight:800}

.foot{
  margin:16px 12px 34px; text-align:center; font-size:12px; color:var(--dim); line-height:1.9;
}
.foot a{color:var(--teal-d)}
.foot .sep{margin:0 6px; opacity:.5}

/* ── شاشة الدخول ──────────────────────────────────────── */
.enter{max-width:430px; margin:0 auto; padding:0 14px 40px}
.enter .box{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:20px 18px; margin-top:18px; box-shadow:var(--shadow);
}
.enter h2{margin:0 0 4px; font-size:17px; text-align:center}
.enter .lead{
  margin:0 0 6px; text-align:center; font-size:13px; color:var(--dim);
}
label{display:block; font-size:13.5px; font-weight:600; margin:14px 0 6px}
input[type=text],input[type=password],input[type=tel]{
  width:100%; padding:13px 14px; border:1.5px solid var(--line-2); border-radius:11px;
  /* ١٦ بكسل بالضبط: أقل منها يجعل iOS يكبّر الصفحة عند التركيز */
  font-size:16px; font-family:inherit; background:#fbfdfc; direction:ltr;
  text-align:center; letter-spacing:2px;
}
input:focus{outline:none; border-color:var(--teal); background:#fff;
            box-shadow:0 0 0 3px rgba(31,122,114,.11)}
.hint{font-size:12px; color:var(--dim); margin-top:8px; text-align:center; line-height:1.75}
.err{
  background:var(--red-bg); color:var(--red); border:1px solid var(--red-b);
  border-radius:11px; padding:11px 12px; font-size:13.5px; margin-top:12px;
}
.ok{background:var(--green-bg); color:var(--green); border-color:var(--green-b)}

/* ── لا طباعة ────────────────────────────────────────────
   الطباعة تُخرج ورقة تحمل التنبيه وحده — لا الجدول. */
@media print{
  body *{display:none !important}
  body::after{
    display:block !important;
    content:"هذا الجدول مؤقت ولا يُطبع — الجدول الرسمي في تطبيق رايات";
    font-size:16pt; text-align:center; padding:40pt; font-family:Tahoma,sans-serif;
  }
}

/* إخفاء المحتوى عند مغادرة الصفحة — يُضاف بجافاسكربت */
body.hidden-content .sheet,
body.hidden-content .totals,
body.hidden-content .who,
body.hidden-content .changed{filter:blur(14px); opacity:.3}
.veil{
  position:fixed; inset:0; z-index:40; background:rgba(241,245,244,.97);
  display:none; align-items:center; justify-content:center; text-align:center;
  padding:30px; font-size:15px; color:var(--dim);
}
body.hidden-content .veil{display:flex}


/* ═══════════════════════════════════════════════════════════
   اللابتوب والشاشات الواسعة (≥ ٨٦٠ بكسل)
   المشكلة التي عولجت: الصفحة كانت شريطاً ضيقاً وسط فراغ واسع،
   والعلامة المائية تفترش الشاشة كلها، والبطاقة الواحدة عرضها
   ٨٠٠ بكسل لسطرين نص. الحل: **ورقة وثيقة مركزية** والأسبوع
   في عمودين — وهو أقرب لشكل الجدول الورقي الذي يعرفه المتدرب.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:860px){
  body{background:#e6edec}

  .page{
    max-width:900px; margin:28px auto 44px; background:var(--card);
    border:1px solid var(--line-2); border-radius:20px; overflow:hidden;
    box-shadow:0 2px 6px rgba(21,36,35,.06), 0 18px 46px rgba(21,36,35,.10);
  }
  .head{padding-top:26px; box-shadow:none}
  .head .logo{height:132px}
  .head.compact .logo{height:104px}
  .head .rule{margin-inline:-16px}
  .title{padding:18px 16px; border-bottom:1px solid var(--line)}
  .title h1{font-size:23px}

  .who,.temp,.changed,.card,.totals,.notice{margin-inline:20px}
  .stampbar,.sheet{margin-inline:20px}
  .btn{margin-inline:20px; width:calc(100% - 40px)}
  .foot{margin:20px 20px 26px}

  /* الأسبوع في عمودين — كل يوم كتلة مستقلة لا تنكسر بين العمودين */
  .sheet{
    display:grid; grid-template-columns:1fr 1fr; gap:0 20px; align-items:start;
  }
  .daygroup{min-width:0}
  .daygroup .day{margin-top:14px}
  .lec .gw{padding:12px 14px}
  .lec .tm{flex:0 0 74px}

  .totals div{padding:14px 8px}
  .totals b{font-size:22px}

  /* العلامة المائية تُحصر في عرض الورقة بدل افتراش الشاشة —
     اللقطة تُلتقط للوثيقة، فحضورها فوقها يكفي. */
  /* الحاوية تبقى مستطيلاً محاذياً للمحاور بعرض الورقة، والميلان ينتقل
     إلى النصوص نفسها. تدوير الحاوية كان يُخرج أركانها خارج الورقة
     فتفترش العلامة الرمادي حولها. */
  .wm{
    top:-15%; bottom:-15%; right:auto; left:50%;
    width:900px; margin-inline:0; transform:translateX(-50%);
    opacity:.085; align-content:flex-start; padding-top:6%;
  }
  .wm span{transform:rotate(-26deg); font-size:14px}

  /* شاشة الدخول: البطاقة وحدها تُوسَّط داخل الورقة */
  .enter{max-width:460px; padding-bottom:30px}
}

/* شاشات كبيرة جداً — لا تتمدّد الورقة أكثر */
@media (min-width:1300px){
  .page{max-width:960px}
}