/* ===== نظام الجداول المدرسية — 1B Software =====
   لوحة: بترولي عميق للهيكل، أخضر مزرق للفعل، عنبري للتحذير.
   الخط: Rubik للعناوين، IBM Plex Sans Arabic للنص والأرقام. */

:root{
  --ink:#0F2A38; --ink-2:#173C4E; --ink-3:#22536A;
  --bg:#EFF2F1; --card:#FFFFFF; --line:#DCE3E2;
  --teal:#157A6E; --teal-2:#0F5C53; --teal-soft:#E4F0EE;
  --amber:#B7622C; --amber-soft:#FBEDE2;
  --red:#A33A3A; --red-soft:#F8E7E7;
  --green:#2E8B3D; --green-2:#256B32; --green-soft:#E6F3E4;
  --text:#12262F; --muted:#5E7280; --faint:#8A9BA5;
  --r:10px; --shadow:0 1px 2px rgba(15,42,56,.06),0 8px 24px rgba(15,42,56,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.65;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,.display{font-family:"Rubik",sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
a{color:var(--teal-2);text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- الهيكل ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:232px;flex:0 0 232px;background:#0F2A38;color:#CFE0E6;
  padding:28px 22px;position:sticky;top:0;height:100vh;overflow:auto;
  display:flex;flex-direction:column;
}
/* ---------- الشعار: عمودي على الكمبيوتر، أفقي على الجوال ---------- */
.brand{
  padding:0 2px 30px;display:flex;flex-direction:column;align-items:center;
  gap:9px;text-decoration:none;
}
.brand__mark{display:block;flex-shrink:0}
.brand__txt{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand__name{
  font-family:"El Messiri","Rubik",sans-serif;color:#fff;
  font-size:23px;font-weight:800;letter-spacing:.01em;
}
.brand__by{font-size:9px;color:rgba(255,255,255,.34);letter-spacing:.08em;margin-top:5px}
.nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none}
.nav-backdrop{display:none}
.nav-more{display:none}
.nav-drawer{display:contents}
.nav a{
  display:flex;align-items:center;padding:0 4px;min-height:38px;
  color:rgba(255,255,255,.52);font-size:13.5px;border-right:2px solid transparent;
  transition:color .15s ease;
}
.nav a:hover{color:rgba(255,255,255,.85)}
.nav a.on{color:#fff;border-right-color:#2C9587;font-weight:500}
.nav .sep{font-size:10px;color:rgba(255,255,255,.28);padding:22px 4px 8px;
  letter-spacing:.1em}
.side-foot{margin-top:auto;padding-top:20px}
.school-mini{font-size:11.5px;color:rgba(255,255,255,.3);line-height:1.8}
.school-mini a{color:rgba(255,255,255,.45)}

.main{flex:1;min-width:0;padding:26px 30px 60px}
.top{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap}
.top h1{font-size:23px}
.top p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

/* ---------- عناصر ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h2{font-size:16px;margin-bottom:2px}
.card .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>*{flex:1;min-width:210px}
.tbl-scroll{overflow-x:auto;max-width:100%}
.tbl-scroll table{width:max-content;min-width:100%}
.scroll-hint{display:none}
@media(max-width:820px){.scroll-hint{display:inline-block;color:var(--teal-2);
  font-size:11.5px;margin-inline-start:6px}}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)}
.kpi .n{font-family:"Rubik";font-size:27px;font-weight:600;line-height:1.15}
.kpi .l{color:var(--muted);font-size:12.5px;margin-top:2px}
.kpi.accent{background:var(--ink);border-color:var(--ink)}
.kpi.accent .n{color:#fff} .kpi.accent .l{color:#9FBECB}

.btn{display:inline-flex;align-items:center;gap:7px;background:var(--teal);
  color:#fff;border:0;border-radius:8px;padding:9px 16px;font:inherit;
  font-weight:500;cursor:pointer}
.btn:hover{background:var(--teal-2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F5F8F7}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:var(--ink-2)}
.btn.sm{padding:6px 12px;font-size:13px}

input,select,textarea{font:inherit;padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--text);width:100%}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:right;font-weight:600;color:var(--muted);font-size:12px;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #EEF2F1}
tbody tr:hover{background:#F7FAF9}

.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:500;white-space:nowrap}
.tag.ok{background:var(--teal-soft);color:var(--teal-2)}
.tag.warn{background:var(--amber-soft);color:var(--amber)}
.tag.bad{background:var(--red-soft);color:var(--red)}
.tag.mute{background:#EDF1F0;color:var(--muted)}

.flash{padding:11px 15px;border-radius:8px;margin-bottom:16px;font-size:13.5px}
.flash.ok{background:var(--green-soft);color:var(--green-2)}
.flash.error{background:var(--red-soft);color:var(--red)}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty h3{font-size:16px;margin-bottom:6px;color:var(--text)}

/* ---------- شبكة الجدول (العنصر المميّز) ----------
   حافة اليوم متدرّجة: الخانات خارج دوام الشعبة تُرسم مشطّبة،
   فيظهر اختلاف أطوال الأيام بالعين مباشرة. */
.tt{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
.tt th{background:transparent;text-align:center;font-size:12px;color:var(--muted);
  padding:4px;border:0}
.tt .pn{width:52px;color:var(--faint);font-size:11.5px;text-align:center;
  font-family:"Rubik"}
.tt td{padding:0;border:0}
.cell{border-radius:8px;padding:8px 7px;min-height:52px;background:#fff;
  border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;
  justify-content:center}
.cell b{font-size:13px;font-weight:600;line-height:1.3}
.cell small{color:var(--muted);font-size:11px;line-height:1.3}
.cell.free{background:#F6F8F8;border-style:dashed}
.cell.off{
  background:repeating-linear-gradient(135deg,#E8EDEC 0 6px,#EFF2F1 6px 12px);
  border-color:transparent;min-height:52px}
.cell.act{background:var(--amber-soft);border-color:#EBD5C4}
.cell.act b{color:var(--amber)}

/* ------------------------------------------------- تثبيت التطبيق (PWA) */
.install-banner{width:100%;justify-content:center;margin:0 0 16px;font-size:14px;
  padding:12px 16px}

/* --------------------------------------- صفحة "جدولي" — جدول بالجوال */
.day-tabs{display:flex;gap:6px;overflow-x:auto;margin:12px 0 14px;padding-bottom:2px}
.day-tab{flex:0 0 auto;background:#F6F8F8;border:1px solid var(--line);color:var(--muted);
  padding:8px 16px;border-radius:20px;font-size:13.5px;font-weight:500;cursor:pointer;
  white-space:nowrap}
.day-tab.on{background:var(--teal);border-color:var(--teal);color:#fff}
.day-panel{display:flex;flex-direction:column;gap:8px}
.day-panel[hidden]{display:none}
.period-row{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-height:52px}
.period-row.is-free{background:#F6F8F8;border-style:dashed}
.period-row.is-duty{background:var(--amber-soft);border-color:#EBD5C4}
.period-num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--teal-soft);
  color:var(--teal-2);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;font-family:"Rubik"}
.period-row.is-duty .period-num{background:#EBD5C4;color:var(--amber)}
.period-body{display:flex;flex-direction:column;gap:2px}
.period-body b{font-size:14px;font-weight:600;line-height:1.3}
.period-body small{color:var(--muted);font-size:12px;line-height:1.3}
.period-body.faint{color:var(--faint);font-size:13px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  margin-top:14px}
.legend i{width:13px;height:13px;border-radius:4px;display:inline-block;
  vertical-align:-2px;margin-left:5px}

.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border-radius:8px;font-size:13.5px;color:var(--muted);
  border:1px solid transparent}
.tabs a.on{background:#fff;border-color:var(--line);color:var(--ink);font-weight:500}

/* ---------- صفوف معلمين قابلة للطي (بديل الجدول العادي) ---------- */
.trow{display:flex;align-items:center;gap:6px;padding:9px 6px;font-size:13px}
.trow.thead{color:var(--muted);font-size:11.5px;font-weight:600;border-bottom:1px solid var(--line)}
.trow .c-name{flex:1 1 180px;min-width:120px;font-weight:500;color:var(--text)}
.trow .c-sm{flex:0 0 90px;text-align:center}
.trow .c-xs{flex:0 0 40px;text-align:center}
.trow.thead .c-name{font-weight:600}
.trow-details{border-bottom:1px solid #EEF2F1}
.trow-details summary{cursor:pointer;list-style:none}
.trow-details summary::-webkit-details-marker{display:none}
.trow-details summary:hover{background:#F7FAF9}
.trow-details[open] summary{background:var(--teal-soft)}
.trow-body{padding:14px 10px 20px;background:#FBFCFC;border-top:1px dashed var(--line)}
@media(max-width:820px){
  .trow .c-sm, .trow .c-xs{display:none}
  .trow .c-name{flex:1}
}

/* ---------- شبكة أزرار اختيار (شعب، حصص محمية...) بدل كتابة نص بفواصل ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chk-btn{position:relative;cursor:pointer}
.chk-btn input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.chk-btn span{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:7px 12px;border-radius:9px;border:1.5px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);background:#fff;
  transition:.12s}
.chk-btn input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff}
.chk-btn input:focus-visible + span{outline:2px solid var(--teal-2);outline-offset:1px}
.chk-btn:hover span{border-color:var(--teal-2)}

/* ---------- لوحة رئيسية/تفصيل: قائمة يسار وتفاصيل يمين، بلا تنقّل ---------- */
.split{display:flex;gap:16px;align-items:flex-start}
.split-list{flex:1 1 380px;min-width:300px;max-height:calc(100vh - 220px);overflow:auto}
.split-detail{flex:2 1 480px;min-width:320px;position:sticky;top:20px}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:#F7FAF9}
.active-row{background:var(--teal-soft)!important}
@media(max-width:900px){
  .split{flex-direction:column}
  .split-list{max-height:none;max-width:none}
  .split-detail{position:static}
}

/* ---------- شارات مواد ملوّنة + صور دائرية للمعلمين ---------- */
.subj-chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;
  font-size:12.5px;font-weight:600;white-space:nowrap}
.subj-chip.c0{background:#E4F0EE;color:#0F5C53}
.subj-chip.c1{background:#FBEDE2;color:#9A4E1F}
.subj-chip.c2{background:#E8ECFB;color:#3B4FA8}
.subj-chip.c3{background:#F8E7E7;color:#9A3A3A}
.subj-chip.c4{background:#EFE7F8;color:#6B3FA8}
.subj-chip.c5{background:#E7F5F8;color:#1F7A9A}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--ink-3);color:#fff;font-size:12.5px;font-weight:600;
  flex:0 0 28px}

/* ---------- لوحة تفاصيل معلم: رأس + إحصاءات مصغّرة (صفحة البيانات ولوحة التكليفات) ---------- */
.detail-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:14px;flex-wrap:wrap}
.detail-person{display:flex;align-items:center;gap:11px}
.detail-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:13px;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Rubik";font-weight:700;font-size:15px}
.detail-person strong{display:block;font-family:"Rubik";font-size:15px}
.detail-person span{color:var(--muted);font-size:12px}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mini-stat{border:1px solid var(--line);border-radius:10px;padding:10px;
  background:#FAFBFB;text-align:center}
.mini-stat small{display:block;color:var(--muted);font-size:10.5px}
.mini-stat strong{display:block;margin-top:3px;font-family:"Rubik";font-size:16px;color:var(--ink)}

/* ---------- شبكة ٣ أعمدة: بطاقة صغيرة عمودية لكل تكليف ---------- */
.rowlist{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}
.ritem{display:flex;flex-direction:column;gap:7px;padding:10px 12px;background:#fff;
  border:1px solid var(--line);border-radius:8px}
.ritem .r-subj{width:100%}
.ritem .r-teacher{width:100%;display:flex;align-items:center;gap:7px;
  color:var(--text);font-size:12.5px}
.ritem .r-nums{display:flex;gap:8px;align-items:center;width:100%;
  padding-top:6px;border-top:1px solid #EEF2F1}
.ritem .r-nums .field-mini{display:flex;flex-direction:row-reverse;gap:4px;align-items:center}
.ritem .r-nums .field-mini label{font-size:10.5px;color:var(--faint);margin:0;white-space:nowrap}
.ritem .r-nums input{width:38px;text-align:center;padding:3px;font-size:12.5px}
.ritem .r-nums{flex-wrap:wrap}
.ritem .r-nums button{margin-inline-start:auto;padding:4px 9px;font-size:12px}
.ritem-official{background:#F6FBFA;border-style:dashed}
.ritem-official .r-badge{background:var(--teal);color:#fff;border-radius:6px;
  padding:3px 9px;font-size:12px;font-weight:600;align-self:flex-start}
.ritem-official .r-teacher-input{width:100%}
.avatar.sm{width:22px;height:22px;flex:0 0 22px;font-size:11px}
@media(max-width:820px){
  .rowlist{grid-template-columns:1fr}
}

/* ---------- الجدول الرئيسي: أسماء كاملة، عرض تلقائي حسب المحتوى ---------- */
.mtable{border-collapse:collapse;font-size:13px;table-layout:auto}
.mtable th{background:var(--ink);color:#fff;padding:5px 8px;font-weight:500;
  position:sticky;top:0;z-index:2;border:1px solid #0A1F2A;white-space:nowrap}
.mtable .mday{text-align:center;font-size:13.5px}
.mtable .mper{font-size:11.5px;color:#B9D0D9;text-align:center;padding:3px}
.mtable .mcorner{background:var(--ink);position:sticky;right:0;z-index:3}
.mtable .mlabel{position:sticky;right:0;background:#fff;z-index:1;font-weight:700;
  padding:5px 14px;border:1px solid var(--line);white-space:nowrap;text-align:center;
  font-size:13px}
.mtable td{padding:0;border:0;line-height:0}
.mcell{min-width:54px;height:48px;padding:0 10px;display:flex;align-items:center;
  justify-content:center;white-space:nowrap;cursor:pointer;font-weight:700;font-size:12.5px}
.mcell.moff{background:#E4E8E7;cursor:default;min-width:54px}
.mcell.mfree{background:#F6F8F8;cursor:default;min-width:54px}
/* خانة إشغال بعد ما تخلص الشعبة دوامها — تشبه خانة مادة عادية بألوانها
   بس بنقشة مخطّطة خفيفة تميّزها، بلا أي كلمة توحي بالانصراف ("خارج
   الدوام") — المعلم لسا مطلوب فعلياً بالمدرسة. */
.mcell.mduty{cursor:default;min-width:54px;height:48px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;line-height:1.15;
  background:repeating-linear-gradient(135deg,#FBEDE2,#FBEDE2 6px,#F5E2D3 6px,#F5E2D3 12px);
  color:#9A4E1F}
.mcell.mduty b{font-size:12px}
.mcell.mduty small{font-weight:500;font-size:10px;opacity:.85}
/* داخل الجدول الرئيسي: نلغي شكل الشارة البيضوي (subj-chip) ونخلي اللون
   يعبّي المربّع بالكامل، لا شكلاً بيضوياً بمنتصف خانة فاضية.
   عمودي: المادة فوق واسم المعلم تحتها بخط أصغر. */
.mcell.subj-chip{border-radius:0;height:48px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;line-height:1.15}
.mcell.subj-chip b{font-size:12px}
.mcell.subj-chip small{font-weight:500;font-size:10px;opacity:.85}

/* فاصل واضح بين الأيام: خط أغمق عند أول عمود كل يوم */
.mtable th.mday-start,.mtable td.mday-start{border-right:3px solid var(--ink)}
/* تعارض: كل حصة ببلوك مستقل واضح جنب التانية، لا تنضغط ببعض */
.mconflict{display:flex;flex-direction:row;height:40px;border:2px solid var(--red);
  animation:conflictGlow 1.1s ease-in-out infinite;position:relative;z-index:1}
@keyframes conflictGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(200,40,40,.55)}
  50%{box-shadow:0 0 9px 3px rgba(200,40,40,.75)}
}
.mconflict-part{display:flex;align-items:center;justify-content:center;
  padding:0 8px;white-space:nowrap;font-size:12px;font-weight:700;cursor:grab;
  border-left:2px solid rgba(255,255,255,.6)}
.mconflict-part:first-child{border-left:0}
.mcell.mconflict-single{outline:3px solid var(--red);outline-offset:-2px;
  animation:conflictGlow 1.1s ease-in-out infinite;position:relative;z-index:1}

/* ---------- رف الحصص غير الموزّعة ---------- */
.tray{display:flex;flex-wrap:wrap;gap:8px;min-height:56px;padding:10px;
  border:2px dashed var(--line);border-radius:10px;background:#FAFBFB}
.tray-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;
  cursor:grab;font-weight:700;font-size:13px}
.tray-chip small{font-weight:500;opacity:.85;font-size:11px}
.tray-chip:active{cursor:grabbing}
.mcell[draggable="true"]{cursor:grab}
.mcell[draggable="true"]:active{cursor:grabbing}
.mcell.drop-bad{outline:2px solid var(--red);animation:shake .4s}
.mcell.drop-ok{outline:2px solid var(--teal)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

.row-flash{animation:row-flash 2.5s ease-out}
@keyframes row-flash{
  0%,60%{background:var(--red-soft)}
  100%{background:transparent}
}

.cell.swap-selected,.mcell.swap-selected{outline:3px solid var(--ink-3);outline-offset:-2px}
.cell.swap-target,.mcell.swap-target{
  outline:3px solid #F5C518;outline-offset:-2px;cursor:pointer;
  animation:swapPulse 1.1s ease-in-out infinite;
}
.cell.swap-none,.mcell.swap-none{outline:2px solid var(--red);animation:shake .4s}
@keyframes swapPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,197,24,.6)}
  50%{box-shadow:0 0 0 5px rgba(245,197,24,0)}
}

.bar{height:6px;background:#EDF1F0;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal)}

.login{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
.login .box{background:#fff;padding:34px;border-radius:14px;width:340px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* ---------- جدول الإشغال بالجوال: كرت لكل حصة، الأيام تحت بعض بعرض كامل ---------- */
@media(max-width:820px){
  .tt-duty thead{display:none}
  .tt-duty,.tt-duty tbody,.tt-duty tr,.tt-duty td{display:block;width:100%}
  .tt-duty{border-spacing:0}
  .tt-duty tr{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;
    overflow:hidden;background:#fff;box-shadow:var(--shadow)}
  .tt-duty td.pn{background:var(--ink);color:#fff;padding:9px 14px;font-size:14px;
    text-align:start;width:auto}
  .tt-duty td:not(.pn){padding:8px 14px;border-top:1px solid var(--line)}
  .tt-duty td:not(.pn)::before{content:attr(data-label);display:block;color:var(--muted);
    font-size:11.5px;margin-bottom:4px}
  .tt-duty .cell{min-height:0}
  .tt-duty select{width:auto;flex:1;min-width:0;font-size:13px!important}
  .tt-duty .cell form{flex-wrap:nowrap}
}
/* ---------- تبويبات صفحة الغياب واليوم بالجوال: خطوة بخطوة بدل صفحة
   طويلة واحدة — التسجيل، الخطة، الجدول الكامل. بالديسكتوب الكل ظاهر
   سوا زي ما كان (التبويبات نفسها مخفية). ---------- */
.dflow-tabs{position:relative}
.dflow-tab-radio{position:absolute;top:0;right:0;opacity:0;pointer-events:none}
.dflow-tab-bar{display:none}
@media(max-width:820px){
  .dflow-tab-bar{display:flex;gap:6px;position:sticky;top:0;z-index:6;
    background:var(--bg);padding:10px 0;margin:-4px 0 14px}
  .dflow-tab-bar label{flex:1;text-align:center;padding:10px 6px;border-radius:9px;
    background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;
    color:var(--muted);cursor:pointer}
  .dflow-tab-count{display:inline-flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:var(--red);
    color:#fff;font-size:10px;font-weight:700;margin-inline-start:2px}
  .dflow-tab-count.ok{background:var(--teal)}
  .dflow-panel{display:none}
  #dtab-1:checked ~ .dflow-tab-bar label[for="dtab-1"],
  #dtab-2:checked ~ .dflow-tab-bar label[for="dtab-2"],
  #dtab-3:checked ~ .dflow-tab-bar label[for="dtab-3"]{
    background:var(--ink);color:#fff;border-color:var(--ink)}
  #dtab-1:checked ~ [data-p="1"]{display:block}
  #dtab-2:checked ~ [data-p="2"]{display:block}
  #dtab-3:checked ~ [data-p="3"]{display:block}
}

/* ---------- جدول اليوم كامل بالجوال: كرت لكل شعبة بدل جدول عريض ---------- */
@media(max-width:820px){
  .mtable-day{width:100%}
  .mtable-day thead{display:none}
  .mtable-day, .mtable-day tbody, .mtable-day tr, .mtable-day td{display:block;width:100%}
  .mtable-day tr{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;
    overflow:hidden;background:#fff;box-shadow:var(--shadow)}
  .mtable-day td{border:0}
  .mtable-day td.mlabel{position:static;background:var(--ink);color:#fff;
    padding:10px 14px;font-size:15px;text-align:start}
  .mtable-day td:not(.mlabel){display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:9px 14px;border-top:1px solid var(--line)}
  .mtable-day td:not(.mlabel)::before{content:"حصة " attr(data-label);color:var(--muted);
    font-size:12px;flex:0 0 auto}
  .mtable-day td:has(.mfree){display:none}
  .mtable-day .mcell,.mtable-day .mcell.subj-chip,.mtable-day .mcell.mduty{
    height:auto;min-width:0;flex:1;flex-direction:row;
    justify-content:flex-start;gap:8px;padding:6px 12px;border-radius:8px}
  .mtable-day .mcell.moff{flex:1;border-radius:8px}
  .mtable-day .mcell b,.mtable-day .mcell small{font-size:13px}
}
.brand-logout{display:none}
@media(max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%;max-width:100%;min-width:0;height:auto;position:static;
    flex:none;overflow:visible;padding:0;box-sizing:border-box}
  .topbar{display:flex;align-items:center;justify-content:space-between;min-width:0;
    padding:0 17px}
  .side .brand{
    padding:0;min-width:0;
    flex-direction:row;align-items:center;gap:9px;
  }
  .side .brand__mark{width:32px;height:32px}
  .side .brand__txt{align-items:flex-start}
  .side .brand__name{font-size:19px}
  .side .brand__by{font-size:8px;margin-top:3px}
  .brand-logout{display:inline-flex;color:#9FBECB;font-size:12.5px}
  .nav-burger{display:none}
  .side-foot{display:none}
  .main{padding:0 14px 28px;min-width:0}

  /* ---------- الشريط السفلي: 4 روابط أساسية + "المزيد" ---------- */
  .nav-drawer{display:none}
  .nav{
    position:fixed;z-index:100;bottom:10px;left:10px;right:10px;
    height:56px;padding:5px;display:flex;gap:2px;align-items:stretch;
    background:#0F2A38;border-radius:16px;
    box-shadow:0 12px 28px rgba(15,42,56,.22);overflow:visible;margin:0
  }
  .nav a,.nav-more{
    flex:1;min-width:0;margin:0;padding:0 3px;border:0;border-radius:11px;
    color:rgba(255,255,255,.5);font-size:11.5px;display:flex;
    align-items:center;justify-content:center;text-align:center;cursor:pointer
  }
  .nav a.on{background:rgba(255,255,255,.1);color:#fff}

  /* لمّا "المزيد" تنفتح: باقي الروابط تطلع كـbottom sheet فوق الشريط */
  .nav-toggle-input:checked ~ .nav .nav-more{background:rgba(255,255,255,.12);color:#fff}
  .nav-toggle-input:checked ~ .nav .nav-drawer{
    display:flex;flex-direction:column;gap:1px;position:fixed;right:10px;left:10px;
    bottom:86px;z-index:99;background:#fff;border-radius:18px;overflow:hidden;
    box-shadow:0 12px 36px rgba(15,42,56,.15);max-height:60vh;overflow-y:auto
  }
  .nav-drawer a{
    display:flex;justify-content:flex-start;text-align:start;color:var(--ink);
    font-size:14px;font-weight:500;padding:13px 16px;border-radius:0
  }
  .nav-drawer a.on{color:var(--teal-2);background:var(--teal-soft)}
  .nav-drawer .sep{color:var(--muted);font-size:11px;font-weight:600;padding:10px 16px 4px}
  .nav-toggle-input:checked ~ .nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(15,42,56,.35);z-index:98}
}
@media print{
  .side,.top .btn,.tabs,.no-print{display:none!important}
  .main{padding:0} body{background:#fff}
  .card{border:0;box-shadow:none;page-break-inside:avoid}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================
   MOBILE REDESIGN — لمسة نهائية على واجهة الجوال: أحجام لمس
   أكبر (42px)، ظلال وزوايا أنعم متل تطبيق حقيقي، صفوف كروت
   أوضح. ما بيلمس آلية فتح/سكر القائمة (checkbox) ولا side-foot —
   هدول محلولين فوق ومضبوطين. ========================================================= */
@media (max-width:820px){
  :root{
    --mobile-radius:16px;
    --mobile-shadow:0 4px 18px rgba(15,42,56,.07);
  }

  html{scroll-behavior:smooth}
  html,body{overflow-x:hidden;max-width:100%}
  body{padding-bottom:86px}

  .side{position:sticky;top:0;z-index:30;background:rgba(15,42,56,.97);
    border-bottom:1px solid rgba(255,255,255,.08)}
  .topbar{min-height:50px}
  .brand b{font-size:16px}.brand span{font-size:10px}

  .nav a{font-size:14px;padding:10px 12px;border-radius:11px;transition:transform .14s,background .14s}
  .nav a:active{transform:scale(.97)}

  .main{padding:16px 13px 34px}
  .top{align-items:flex-start;gap:10px;margin-bottom:15px}
  .top h1{font-size:21px;line-height:1.25}
  .top p{font-size:12px;margin-top:3px}

  /* الكروت والـKPI: ملمس تطبيق حقيقي */
  .card,.kpi{border-radius:var(--mobile-radius);box-shadow:var(--mobile-shadow);
    margin-bottom:12px;padding:15px;border-color:#E3E9E7}
  .card h2{font-size:15px}.card .sub{font-size:12px;margin-bottom:11px}

  .row{gap:9px}
  .row>.kpi{flex:1 1 calc(50% - 5px);min-width:0}
  .kpi{padding:13px 12px;min-height:88px}
  .kpi .n{font-size:23px}.kpi .l{font-size:11.5px}

  /* أهداف لمس أكبر (42px) على كل عناصر التحكم */
  .btn{min-height:42px;padding:9px 14px;border-radius:11px;transition:transform .14s}
  .btn:active{transform:scale(.97)}
  .btn.sm{min-height:36px;padding:7px 11px;border-radius:10px}
  input,select,textarea{min-height:42px;border-radius:10px;padding:9px 11px}
  label{font-size:11.5px}

  .tabs,.day-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:3px;margin-bottom:12px}
  .tabs::-webkit-scrollbar,.day-tabs::-webkit-scrollbar{display:none}
  .tabs a,.day-tab{flex:0 0 auto;border-radius:11px;font-size:12px;padding:8px 12px;
    transition:transform .14s}
  .tabs a:active,.day-tab:active{transform:scale(.97)}

  .tt{border-spacing:0;width:100%}
  .tt th{font-size:11px;padding:5px 3px}
  .tt .pn{width:38px;font-size:10px}
  .cell{min-height:58px;padding:8px 6px;border-radius:10px}
  .cell b{font-size:12px}.cell small{font-size:10px}

  .period-row{min-height:58px;border-radius:13px;padding:10px 11px;gap:10px;
    box-shadow:0 2px 9px rgba(15,42,56,.035)}
  .period-num{width:30px;height:30px;flex-basis:30px;font-size:12px}
  .period-body b{font-size:13px}.period-body small{font-size:11px}

  .grid2{grid-template-columns:1fr;gap:9px}
  .rowlist{grid-template-columns:1fr;gap:9px}
  .ritem{border-radius:13px;padding:11px 12px}

  .tbl-scroll{margin-inline:-15px;padding-inline:15px}
  table{font-size:12.5px}
  th{font-size:11px;padding:8px 7px}
  td{padding:9px 7px}

  .split{gap:10px}
  .split-list,.split-detail{min-width:0;width:100%}

  .detail-head{margin-bottom:11px;gap:8px}
  .detail-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:11px;font-size:13px}
  .detail-person strong{font-size:13.5px}
  .detail-person span{font-size:11px}
  .detail-stats{gap:6px;margin-bottom:11px}
  .mini-stat{padding:8px;border-radius:9px}
  .mini-stat small{font-size:9.5px}
  .mini-stat strong{font-size:14px;margin-top:2px}

  .trow{min-height:48px;padding:9px 4px}
  .trow .c-name{font-size:13px}

  .mtable-day tr{border-radius:14px;box-shadow:var(--mobile-shadow);margin-bottom:10px}
  .mtable-day td.mlabel{font-size:14px;padding:11px 13px}
  .mtable-day td:not(.mlabel){padding:8px 11px}
  .mtable-day .mcell,.mtable-day .mcell.subj-chip,.mtable-day .mcell.mduty{
    border-radius:9px;padding:7px 10px;font-size:12px}

  .dflow-tab-bar{padding:8px 0;margin:-2px 0 12px;background:rgba(239,242,241,.94);
    backdrop-filter:blur(10px)}
  .dflow-tab-bar label{padding:9px 5px;border-radius:11px;font-size:11.5px;
    transition:transform .14s}

  .install-banner{border-radius:12px!important;margin-bottom:12px!important}

  .clickable-row,.chk-btn span{transition:transform .14s,background .14s}
  .chk-btn span:active{transform:scale(.97)}

  img,svg,video{max-width:100%;height:auto}
  pre,code{max-width:100%;overflow-x:auto}
}

@media(max-width:340px){
  .main{padding-inline:10px}
  .brand{padding-inline:12px}
  .row>.kpi{flex-basis:100%}
  .kpi{min-height:76px}
  .kpi .n{font-size:21px}
  .top h1{font-size:19px}
}