/* =====================================================================
   منصة الزبير التعليمية — الإصدار 5.5
   styles.css — جميع التنسيقات (منقولة كما هي من index.html الأصلي)

   ملاحظة معمارية: هذا الملف يحتوي على عدة "طبقات" من القواعد بنفس الأسماء
   (مثل .side و .top و .layout) مكتوبة بترتيب زمني — القواعد المتأخرة في
   الملف تطغى على المتقدمة (سلوك الـ CSS cascade الطبيعي)، وهذا مقصود:
   كل طبقة تمثل تحديثاً تصميمياً لاحقاً (علّق عليه الكود الأصلي بعبارة
   "واجهة الإصدار 5.0"). أبقيت الترتيب والمحتوى كما هو تماماً لضمان عدم
   تغيير أي سلوك ظاهر، وفقط نقلته من داخل <style> إلى هذا الملف المستقل.

   القائمة الجانبية اليمنى على شاشات الكمبيوتر (أكبر من 900px):
   - ثابتة دائماً بلا زر إخفاء/إظهار (position:sticky ضمن الشبكة الرئيسية).
   - زر الهامبرغر (.menu-toggle) مخفي افتراضياً (display:none) ولا يظهر
     إلا داخل @media(max-width:900px) — أي فقط على الجوال والأجهزة الصغيرة.
   ===================================================================== */


:root{--p:#0f766e;--p2:#115e59;--bg:#f4f7f8;--card:#fff;--txt:#183035;--mut:#64777b;--line:#dce7e8;--red:#b42318;--gold:#a16207;--green:#15803d;--shadow:0 10px 28px #1232}
*{box-sizing:border-box}:root{--user-font-scale:1}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{overflow-x:hidden;max-width:100%}body{margin:0;font-family:Tahoma,Arial,"Segoe UI",sans-serif;background:var(--bg);color:var(--txt);font-size:calc(14px * var(--user-font-scale));font-weight:400}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#0f766e,#134e4a)}.login *{font-weight:700}.login input{font-weight:600}.login-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 70px #0005}.brand{text-align:center}.brand h1{margin:8px 0;font-size:27px}.brand p{color:var(--mut)}.logo{width:76px;height:76px;margin:auto;border-radius:24px;background:linear-gradient(145deg,#14b8a6,#0f766e);display:grid;place-items:center;color:white;font-size:36px;overflow:hidden}.logo img{width:100%;height:100%;object-fit:cover}.login-announcements{margin:18px 0;display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto}.announcement-card{background:#f0faf8;border:1px solid #d7ece8;border-radius:14px;padding:12px 14px;text-align:right}.announcement-card h4{margin:0 0 4px;font-size:14px;color:var(--p2)}.announcement-card p{margin:0;font-size:13px;color:var(--txt);line-height:1.6;white-space:pre-wrap}.announcement-card .a-date{font-size:11px;color:var(--mut);margin-top:6px}.field{margin:14px 0}.field label{display:block;margin-bottom:7px;font-weight:700}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.btn{border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:700}.btn.p{background:var(--p);color:#fff}.btn.s{background:#e7f5f3;color:var(--p2)}.btn.d{background:#feeceb;color:var(--red)}.btn.w{background:#fff;border:1px solid var(--line)}.full{width:100%}.note{font-size:12px;color:var(--mut);line-height:1.8}.app{min-height:100vh;min-height:100dvh;overflow-x:hidden}
/* ===== الشريط العلوي (قيمة نهائية واحدة موحّدة بعد دمج كل التحديثات) ===== */
.top{position:sticky;top:0;height:var(--topH);z-index:20;background:#fff;color:var(--txt);padding:0 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);box-shadow:0 2px 12px #16312d12;max-width:100vw;overflow:hidden}.impersonate-banner{position:sticky;top:var(--topH);z-index:19;background:#a16207;color:#fff;padding:9px 18px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:13px}.impersonate-banner button{border:1px solid #fff;background:transparent;color:#fff;border-radius:999px;padding:5px 14px;font-weight:700;cursor:pointer}.impersonate-banner button:hover{background:#ffffff22}
.top h2{margin:0;font-size:20px;flex:1}.top small{opacity:.8}
/* ===== زر القائمة ☰ — مخفي دائماً على الكمبيوتر، يظهر فقط أقل من 900px (ضمن استعلامات الوسائط أدناه) ===== */
.menu-toggle{display:none;width:42px;height:42px;padding:0;font-size:21px}
.side-backdrop{display:none}
/* ===== تخطيط الصفحة والقائمة اليمنى — ثابتة دائماً على الكمبيوتر افتراضياً، بلا حاجة لـ !important ===== */
.navbtn{display:flex;width:100%;border:0;background:transparent;padding:12px;border-radius:12px;margin:4px 0;cursor:pointer;color:var(--txt);font-weight:700}
.main{padding:20px;min-width:0}.filters{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;background:#fff;padding:14px;border-radius:18px;box-shadow:var(--shadow);margin-bottom:16px}#searchFieldWrap{display:none}.filters label{font-size:12px;color:var(--mut);display:block;margin-bottom:4px}.filters select,.filters input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow)}.stat b{font-size:28px;display:block}.stat span{color:var(--mut)}.panel{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px}.panelhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}.panelhead h3{margin:0;flex:1}.tablewrap{overflow:auto;scrollbar-width:auto;padding-bottom:6px}.tablewrap::-webkit-scrollbar{height:12px}.tablewrap::-webkit-scrollbar-track{background:#eef3f3;border-radius:8px}.tablewrap::-webkit-scrollbar-thumb{background:var(--p);border-radius:8px}.tablewrap::-webkit-scrollbar-thumb:hover{background:var(--p2)}.table{width:100%;border-collapse:collapse;min-width:750px}.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:right}.table th{background:#f4f8f8;position:sticky;top:0}.tag{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.tag.good{background:#e9f8ee;color:var(--green)}.tag.low{background:#fff6dc;color:var(--gold)}.tag.bad{background:#feeceb;color:var(--red)}.actions{display:flex;gap:6px;flex-wrap:wrap}.modal{position:fixed;inset:0;background:#0007;z-index:10;display:grid;place-items:center;padding:15px}.modalbox{background:#fff;width:min(760px,100%);max-height:92vh;overflow:auto;border-radius:20px;padding:20px}.modalbox:has(.compact-modal){width:min(620px,100%);padding:16px}.modalbox.compact-box{width:min(620px,100%);padding:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}.tab.active{background:var(--p);color:#fff}.empty{text-align:center;padding:45px;color:var(--mut)}.alert{padding:10px;border-radius:10px;margin:10px 0;background:#fff7df;color:#7c5700}.small{font-size:12px}.score{width:78px;padding:8px;border:1px solid var(--line);border-radius:9px;text-align:center}.avg{font-weight:700;color:var(--p2)}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.home-wrap{text-align:center;padding:10px 0 4px}.home-logo{width:96px;height:96px;margin:0 auto 14px;border-radius:26px;background:linear-gradient(145deg,#14b8a6,#0f766e);display:grid;place-items:center;color:#fff;font-size:44px;overflow:hidden;box-shadow:var(--shadow)}.home-logo img{width:100%;height:100%;object-fit:cover}.home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}.home-stat{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:10px}.home-stat span{color:var(--mut);font-weight:700;font-size:14px}.home-stat b{font-size:24px;color:var(--p2)}.home-stat-link{border:none;font-family:inherit;cursor:pointer;width:100%;text-align:inherit;transition:transform .12s,box-shadow .12s}.home-stat-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0002}.home-stat-link:active{transform:translateY(0)}.home-page-bg{background:linear-gradient(160deg,#14b8a6,#0f766e);border-radius:22px;padding:22px 18px;box-shadow:var(--shadow)}.home-links{margin-top:26px}.home-link-group{margin-bottom:24px}.home-link-group-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px}.home-link-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.home-link-tile{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;font-weight:700;font-size:13.5px;text-align:right;box-shadow:var(--shadow);position:relative;color:var(--txt)}.home-link-tile:hover{background:#eef9f7;border-color:var(--p)}.home-link-icon{font-size:18px}.home-link-tile .badge{position:absolute;top:-6px;left:-6px}.official-stats-wrap{margin-top:22px;background:#ffffff14;border-radius:18px;padding:16px}.official-stats-heading{color:#fff;font-weight:700;font-size:15px;margin-bottom:12px;text-align:center}.official-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.official-stats-col{background:#fff;border-radius:14px;padding:14px}.official-stats-title{font-weight:700;color:var(--p2);font-size:14px;margin-bottom:10px;text-align:center}.official-stats-total{display:flex;justify-content:space-around;margin-bottom:10px}.official-stats-total div{text-align:center}.official-stats-total span{display:block;color:var(--mut);font-size:11.5px;font-weight:700}.official-stats-total b{font-size:19px;color:var(--p2)}.official-stats-table{width:100%;border-collapse:collapse;font-size:12px}.official-stats-table th,.official-stats-table td{padding:6px;border-bottom:1px solid var(--line);text-align:center}.official-stats-table th{color:var(--mut);font-weight:700}.official-stats-table td:first-child{text-align:right;font-weight:700}.compact-modal .field{margin:8px 0}.compact-modal .field label{margin-bottom:3px;font-size:12.5px}.compact-modal .field input,.compact-modal .field select,.compact-modal .field textarea{padding:8px;font-size:13.5px}.compact-modal .panelhead{margin-bottom:6px}.compact-modal .panelhead h3{font-size:16px}.compact-modal .panelhead h4{font-size:13.5px}.compact-modal .row{gap:6px}.compact-modal .alert{padding:8px;margin:6px 0;font-size:13px}.compact-modal .btn{padding:8px 12px;font-size:13px}.compact-modal p.small,.compact-modal .small{font-size:11.5px;margin:5px 0}.compact-modal .grid2{gap:8px}
@media(max-width:560px){.filters,.grid2{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.top h2{font-size:16px}.top small{display:none}.modalbox{padding:14px}}

.msg-layout{display:grid;grid-template-columns:300px 1fr;gap:14px}.msg-list{border-left:1px solid var(--line);max-height:620px;overflow:auto}.msg-item{padding:12px;border-bottom:1px solid var(--line);cursor:pointer}.msg-item:hover,.msg-item.active{background:#eef9f7}.msg-item.unread{border-right:4px solid var(--p);font-weight:700}.msg-body{min-height:420px}.bubble{background:#f1f6f6;border-radius:14px;padding:12px;margin:8px 0;max-width:85%}.bubble.mine{background:#dff4ef;margin-right:auto}.msg-meta{font-size:11px;color:var(--mut);margin-top:6px}.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--red);color:white;font-size:11px}.announce{border-right:5px solid var(--gold);background:#fffaf0}.recipient-chip{display:inline-block;background:#eef5f5;border-radius:999px;padding:5px 9px;margin:3px;font-size:12px}@media(max-width:760px){.msg-layout{grid-template-columns:1fr}.msg-list{border-left:0;max-height:260px}}

/* واجهة الإصدار 5.0 — قائمة جانبية يمينية مستوحاة من تنظيم الأنظمة التعليمية */
:root{--side:#123f3b;--side2:#0d302d;--sideText:#e9fbf7;--sideMuted:#a7d4cc;--accent:#22b8a7;--topH:68px;--sideW:282px}
body{background:#f1f5f6}
.top .top-title{display:flex;align-items:center;gap:12px;min-width:0;flex:1;overflow:hidden}.top .top-title h2{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top .top-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--p),#18a999);color:#fff;display:grid;place-items:center;font-size:22px;overflow:hidden;flex-shrink:0}.top .top-logo img{width:100%;height:100%;object-fit:cover}.top-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}.userchip{background:#e8f5f3;color:var(--p2);font-weight:700;white-space:nowrap;padding:7px 10px;border-radius:999px}.font-size-ctrl{display:flex;gap:4px;flex-shrink:0}.font-size-ctrl button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;font-size:13px}.font-size-ctrl button:hover{background:#eef9f7;border-color:var(--p)}.sync-status{font-size:12px;font-weight:700;white-space:nowrap;padding:6px 10px;border-radius:999px;cursor:default;flex-shrink:0}.sync-status:empty{display:none}.sync-status.sync-ok{background:#e7f5ee;color:#15803d}.sync-status.sync-fail{background:#feeceb;color:var(--red)}.sync-status.sync-pending{background:#fef6e0;color:var(--gold)}.top-actions .btn.w{flex-shrink:0;white-space:nowrap}
/* ===== القيمة الفعلية النهائية للتخطيط والقائمة على الكمبيوتر (بدون !important) ===== */
.layout{display:grid;grid-template-columns:var(--sideW) minmax(0,1fr);min-height:calc(100vh - var(--topH));min-height:calc(100dvh - var(--topH));direction:rtl}
/* على الكمبيوتر: sticky داخل الشبكة. أُضيف align-self:start حتى لا تمتد
   الخلية لكامل ارتفاع المحتوى فيتعطّل الالتصاق ويبدو أن القائمة "تتحرك"
   مع التمرير بدل أن تثبت. */
.side{background:linear-gradient(180deg,var(--side),var(--side2));border:0;padding:0;color:var(--sideText);position:sticky;top:var(--topH);align-self:start;height:calc(100vh - var(--topH));height:calc(100dvh - var(--topH));overflow:hidden;box-shadow:-5px 0 24px #102e2b18;z-index:15;display:flex;flex-direction:column}
.side-inner{display:flex;flex-direction:column;min-height:0;height:100%}
.side-brand{padding:22px 18px 18px;border-bottom:1px solid #ffffff18;text-align:center;flex-shrink:0}.side-brand .school-mark{width:64px;height:64px;margin:0 auto 10px;border-radius:20px;display:grid;place-items:center;background:#ffffff17;border:1px solid #ffffff1f;font-size:30px;overflow:hidden}.side-brand .school-mark img{width:100%;height:100%;object-fit:cover}.side-brand strong{display:block;font-size:16px}.side-brand small{display:block;color:var(--sideMuted);margin-top:5px}
.side-scroll{padding:12px 10px 22px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.nav-group{margin:5px 0}.nav-group-title{width:100%;border:0;background:transparent;color:var(--sideMuted);padding:13px 12px 9px;display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;cursor:pointer;text-align:right}.nav-group-title .chev{margin-right:auto;transition:.2s}.nav-group.collapsed .chev{transform:rotate(90deg)}.nav-group.collapsed .nav-children{display:none}.nav-children{display:grid;gap:3px}
.side-footer{flex-shrink:0;padding:12px 14px;border-top:1px solid #ffffff20;background:#00000014}
.side-logout-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff16;color:#fff;border:1px solid #ffffff33;border-radius:12px;padding:12px;font-weight:700;font-size:14px;cursor:pointer}
.side-logout-btn:hover{background:#ffffff26}
.navbtn{color:var(--sideText);padding:10px 12px;margin:0;border-radius:10px;align-items:center;gap:10px;text-align:right;position:relative;font-size:13px}.navbtn .nav-icon{width:25px;text-align:center;font-size:16px}.navbtn .nav-label{flex:1}.navbtn:hover{background:#ffffff12;color:#fff}.navbtn.active{background:linear-gradient(90deg,#19a998,#168c80);color:#fff;box-shadow:0 7px 18px #001d1a33}.navbtn.active:before{content:"";position:absolute;right:-10px;top:8px;bottom:8px;width:4px;border-radius:4px;background:#7ff3df}.navbtn .badge{margin-right:auto}
.main{padding:22px;direction:rtl}.filters{border:1px solid #e3eded;box-shadow:0 8px 22px #173e3810}.panel,.stat{border:1px solid #e5eeee;box-shadow:0 8px 22px #173e3810}.panelhead h3{font-size:18px}
.page-breadcrumb{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--mut);font-size:13px;margin-bottom:12px;flex-wrap:wrap}.page-breadcrumb b{color:var(--p2)}.breadcrumb-link{cursor:pointer}.breadcrumb-link:hover{color:var(--p2);text-decoration:underline}.breadcrumb-home,.breadcrumb-back{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;font-size:16px;font-weight:700;color:var(--p2);cursor:pointer}.breadcrumb-home:hover,.breadcrumb-back:hover{background:#eef9f7;border-color:var(--p)}.bottom-nav{display:flex;justify-content:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
/* ===== الجوال (900px فأقل): قائمة ثابتة كاملة قابلة للتمرير ===== */
@media(max-width:900px){
  .menu-toggle{display:grid;place-items:center}
  .layout{grid-template-columns:1fr}
  /* v266: الحاوية الخارجية ثابتة بلا transform حتى لا يقصها Safari،
     والجزء الأوسط وحده قابل للتمرير. 100svh يعطي ارتفاعاً ثابتاً لا
     يتغير عند ظهور أشرطة المتصفح في الوضع الأفقي. */
  .app{overflow:visible}
  .side{position:fixed!important;right:0!important;left:auto!important;top:var(--topH)!important;bottom:auto!important;height:calc(100vh - var(--topH))!important;height:calc(100svh - var(--topH))!important;max-height:calc(100svh - var(--topH))!important;width:min(88vw,340px)!important;max-width:calc(100vw - 44px)!important;padding:0 0 env(safe-area-inset-bottom,0)!important;overflow:hidden!important;transform:none!important;transition:opacity .16s ease,visibility 0s linear .16s!important;display:block!important;border:0!important;z-index:1001!important;opacity:0;visibility:hidden;pointer-events:none;overscroll-behavior:contain}
  .side-inner{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  .side-scroll{display:block;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;position:relative}
  .side-footer{margin-top:0}
  .app.side-open .side{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease!important}
  /* طبقة حقيقية قابلة للضغط بدل pseudo-element؛ الضغط خارج القائمة
     يغلقها ولا يمر إلى أزرار الصفحة الموجودة خلفها على Android وiPhone. */
  .side-backdrop{display:block;position:fixed;inset:var(--topH) 0 0;border:0;padding:0;margin:0;background:#0007;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}
  .app.side-open .side-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .app.side-open:after{display:none}
  .main{padding:14px}
  .top .top-title h2 small{display:none}
}

/* v257 — شاشة الانتظارات وتسديد غياب المعلمين */
.employee-cover-page{max-width:1180px;margin-inline:auto}
.employee-cover-help{background:#fff8df;border:1px solid #ecd489;border-right:5px solid #c08b16;border-radius:14px;padding:14px 16px;margin:12px 0;line-height:1.9;color:#654b11}
.employee-cover-stepper{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.employee-cover-stepper b{padding:11px;text-align:center;border-radius:12px;background:#edf2f2;color:var(--mut)}
.employee-cover-stepper b.active{background:var(--p);color:#fff}
.employee-cover-page .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.employee-cover-toolbar{align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.employee-cover-toolbar label{display:flex;align-items:center;gap:8px;font-weight:700}
.employee-cover-stats{grid-template-columns:repeat(4,minmax(120px,1fr))}
.employee-cover-lesson{border:1px solid var(--line);border-radius:16px;padding:14px;margin:14px 0;background:#fff}
.employee-cover-lesson.disabled{opacity:.65;background:#f6f7f7}
.employee-cover-lesson-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.employee-cover-lesson-head h3{margin:0 0 4px;color:var(--p)}
.employee-cover-switch,.employee-cover-no-replacement{display:flex;align-items:center;gap:8px;font-weight:700}
.employee-cover-primary,.employee-cover-swap,.employee-cover-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.employee-cover-primary h4,.employee-cover-swap h4{grid-column:1/-1;margin:4px 0;color:#334155}
.employee-cover-candidate{display:flex;gap:9px;align-items:flex-start;border:1px solid #bfd4d1;border-radius:13px;padding:10px;background:#fbfefd;cursor:pointer;min-width:0}
.employee-cover-candidate.selected{border:2px solid var(--p);background:#eaf7f4;box-shadow:0 0 0 2px rgba(15,118,110,.08)}
.employee-cover-candidate.disabled{cursor:not-allowed;opacity:.62;background:#f3f4f6}
.employee-cover-candidate input{margin-top:5px;flex:0 0 auto}
.employee-cover-candidate-main{min-width:0;width:100%}
.employee-cover-candidate-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.employee-cover-candidate-title b{overflow-wrap:anywhere}
.employee-cover-slots{display:grid;grid-template-columns:repeat(7,minmax(28px,1fr));gap:3px;margin-top:8px;direction:rtl}
.employee-cover-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:38px;border:1px solid #d7e1df;border-radius:6px;font-size:10px;background:#fff;line-height:1.25}
.employee-cover-slot b{font-size:9px;color:var(--mut)}
.employee-cover-slot.is-current{background:#fff0ca;border-color:#e1aa37;color:#8a5700}
.employee-cover-slot.is-busy{background:#edf1f1}
.employee-cover-fallback-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.employee-cover-fallback-head span{font-size:12px;color:var(--mut)}
.employee-cover-no-replacement{padding:10px;border:1px dashed #aab8b6;border-radius:10px;margin:10px 0}
.employee-cover-note{margin-top:10px}
.employee-cover-actions{position:sticky;bottom:8px;z-index:4;display:flex;justify-content:space-between;gap:10px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.employee-cover-record-meta{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;background:#eef8f5;border-right:5px solid var(--p);padding:12px;margin:10px 0;border-radius:10px}

@media(max-width:900px){
  .employee-cover-page .grid3{grid-template-columns:1fr}
  .employee-cover-primary,.employee-cover-swap,.employee-cover-others{grid-template-columns:1fr}
  .employee-cover-stats{grid-template-columns:repeat(2,minmax(110px,1fr))}
  .employee-cover-lesson-head{align-items:flex-start;flex-direction:column}
}

@media print{
  #printRoot .employee-cover-record-meta{border:1px solid #333!important;background:#eef8f5!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printRoot .employee-cover-record table{font-size:10px!important;font-weight:700!important}
}
@media(max-width:560px){.top{padding:0 10px}.top .top-title h2{font-size:14px}.top-logo{display:none!important}.userchip{max-width:128px;overflow:hidden;text-overflow:ellipsis}.top-actions .btn.w{padding:9px}.main{padding:10px}}
@media(max-width:420px){.font-size-ctrl{display:none!important}.sync-status{display:none!important}.userchip{max-width:78px}.top-actions{gap:6px}}
/* ===== الطباعة: تُخفى القائمة والشريط العلوي والفلاتر بالكامل (قاعدة واحدة موحّدة بدل تكرارها مرتين) ===== */
@media print{.top,.side,.menu-toggle,.top-actions,.filters,.actions,.no-print{display:none!important}.layout{display:block;grid-template-columns:1fr}.main{padding:0}.panel{box-shadow:none}.table{min-width:0}}



.followup-toolbar{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:14px}.followup-summary{display:flex;gap:8px;flex-wrap:wrap}.followup-cell{min-width:74px}.followup-cell input{width:70px;padding:7px;border:1px solid var(--line);border-radius:9px;text-align:center}.policy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.policy-row{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:center}.policy-row input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}@media(max-width:900px){.followup-toolbar{grid-template-columns:1fr 1fr}}@media(max-width:560px){.followup-toolbar,.policy-grid{grid-template-columns:1fr}}

/* v271 — كشف المتابعة يتكيف مع عرض الصفحة بدل فرض 1400px وخروجها من الشاشة. */
.followup-page{width:100%;max-width:100%;overflow:hidden}
.followup-actions{max-width:100%}
.followup-actions .btn{flex:1 1 155px;min-width:0}
.followup-screen-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.followup-screen-table{width:100%!important;min-width:0!important;table-layout:fixed;font-size:clamp(9.5px,.78vw,12.5px)!important}
.followup-screen-table col.followup-col-num{width:32px}
.followup-screen-table col.followup-col-student{width:20%}
.followup-screen-table th,.followup-screen-table td{padding:6px 3px!important;text-align:center!important;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.followup-screen-table th:nth-child(2),.followup-screen-table td:nth-child(2){text-align:right!important}
.followup-screen-table .followup-cell{min-width:0!important}
.followup-screen-table .followup-cell input{display:block;width:100%!important;min-width:0;max-width:64px;margin-inline:auto;padding:6px 2px!important;font-size:inherit}
.followup-screen-table td:nth-child(2) .small{font-size:10px}
@media(max-width:720px){
  .followup-page{padding:11px}
  .followup-actions .btn{flex-basis:calc(50% - 6px);padding-inline:7px}
  .followup-screen-table{min-width:860px!important}
}

/* v272 — تدرج الحالة السلوكية والغياب والدرجات (عرض فقط؛ لا يغيّر البيانات). */
.student-status-table tbody tr>td,
.attendance-risk-table tbody tr>td,
.grade-status-table tbody tr>td{transition:background-color .18s ease}
.student-clear-row>td{background:#fff!important}
.student-risk-row>td{background:rgba(220,38,38,var(--risk-alpha,.045))!important}
.student-risk-row:hover>td{box-shadow:inset 0 0 0 999px rgba(255,255,255,.14)}
.student-clear-tag{background:#fff;color:#456;border:1px solid var(--line)}
.student-color-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 12px;padding:8px 10px;background:#f8fbfb;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:700;color:var(--mut)}
.student-color-legend span{display:flex;align-items:center;gap:6px}
.student-color-legend i{display:inline-block;width:22px;height:16px;border:1px solid #d8e1e1;border-radius:5px;background:#fff}
.student-color-legend i.behavior-one{background:rgba(220,38,38,.045)}
.student-color-legend i.behavior-many{background:rgba(220,38,38,.30)}
.student-color-legend i.absence-low{background:rgba(220,38,38,.06)}
.student-color-legend i.absence-high{background:rgba(220,38,38,.31)}
.student-color-legend i.grade-excellent{background:#fff}
.student-color-legend i.grade-very-good{background:#fff8cc}
.student-color-legend i.grade-good{background:#ffe5bf}
.student-color-legend i.grade-pass{background:#ffe0dd}
.student-color-legend i.grade-weak{background:#f8b4ae}
.grade-band-empty>td,.grade-band-excellent>td{background:#fff!important}
.grade-band-very-good>td{background:#fff8cc!important}
.grade-band-good>td{background:#ffe5bf!important}
.grade-band-pass>td{background:#ffe0dd!important}
.grade-band-weak>td{background:#f8b4ae!important;color:#681913}
.absence-warning-tag.first{background:#fff3c4;color:#795400}
.absence-warning-tag.second{background:#ffd9c2;color:#8b3b0a}
.absence-warning-tag.third{background:#f8b4ae;color:#7a1710}
.student-risk-alerts{display:grid;gap:8px;margin:8px 0 14px}
.student-risk-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:13px;padding:11px 13px;border:1px solid var(--line)}
.student-risk-alert b{font-size:14px}
.student-risk-alert span{flex:1;min-width:210px}
.student-risk-alert.behavior{background:#fff3f2;border-right:5px solid #dc2626;color:#7a1710}
.student-risk-alert.absence{background:#fff9e7;border-right:5px solid #d69e20;color:#6d4b00}
.student-risk-alert.absence.second{background:#fff0e7;border-right-color:#ea580c;color:#7c2d12}
.student-risk-alert.absence.third{background:#ffe2df;border-right-color:#b42318;color:#681913}
.absence-letter-list{margin:10px 0 16px;padding:12px;border:1px solid #efc8c4;border-radius:14px;background:#fffafa}
.absence-letter-card{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;margin-top:7px;background:#fff3c4;border-right:5px solid #d69e20}
.absence-letter-card.second{background:#fff0e7;border-right-color:#ea580c}
.absence-letter-card.third{background:#ffe2df;border-right-color:#b42318}
.absence-letter-card div{display:flex;flex-direction:column;gap:3px}
.absence-letter-card span{font-size:12px;color:var(--mut)}
.student-child-card.has-behavior{background:rgba(220,38,38,var(--risk-alpha,.045))}
.student-child-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media(max-width:560px){
  .student-risk-alert{align-items:stretch}
  .student-risk-alert span{min-width:100%}
  .student-risk-alert .btn,.absence-letter-card .btn{width:100%}
  .student-color-legend{gap:8px}
}
@media print{
  .student-clear-row>td,.grade-band-excellent>td{background:#fff!important}
  .student-risk-row>td,.grade-band-very-good>td,.grade-band-good>td,.grade-band-pass>td,.grade-band-weak>td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== مكوّن اختيار الطالب (Autocomplete/Combobox) — عربي RTL، يعمل على الكمبيوتر والجوال ===== */
.student-picker{position:relative;direction:rtl}
.student-picker-input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;text-align:right}
.student-picker-input:focus{outline:2px solid var(--p);outline-offset:1px}
.student-picker-list{position:absolute;top:calc(100% + 4px);right:0;left:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #0002;max-height:280px;overflow:auto}
.student-picker-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.student-picker-item:last-child{border-bottom:0}
.student-picker-item:hover,.student-picker-item.hl{background:#e7f5f3}
.student-picker-name{font-weight:700;color:var(--txt)}
.student-picker-meta{font-size:12px;color:var(--mut);margin-top:2px}
.student-picker-empty{padding:14px;text-align:center;color:var(--mut);font-size:13px}


/* ===== الأخبار والإعلانات — عرض يشبه صفحة موقع إخباري (بطاقات شبكية) ===== */
.news-feed{max-width:1100px;margin:0 auto;background:transparent;box-shadow:none;padding:0}
.news-feed .panelhead{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px;justify-content:center;text-align:center}
.news-feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:6px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.news-card-img{width:100%;max-height:220px;object-fit:cover;display:block}
.news-card-video-wrap{position:relative;width:100%;padding-top:56.25%;background:#000}
.news-card-video-wrap .news-card-video{position:absolute;inset:0;width:100%;height:100%;border:0}
.news-card-video-file{width:100%;max-height:260px;display:block;background:#000}
.news-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--p)}
.news-card:has(.news-card-img) .news-card-body,.news-card:has(.news-card-video-wrap) .news-card-body,.news-card:has(.news-card-video-file) .news-card-body{border-top:0}
.news-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.news-card-head h4{margin:0;font-size:15.5px;color:var(--p2);line-height:1.5}
.news-card-body p{margin:0;font-size:13.5px;color:var(--txt);line-height:1.8;white-space:pre-wrap;text-align:center}
.news-card-date{font-size:11.5px;color:var(--mut);margin-top:auto;padding-top:6px;border-top:1px dashed var(--line);text-align:center}
.announcement-card-img{width:100%;max-height:130px;object-fit:cover;border-radius:10px;margin-bottom:8px}
@media(max-width:560px){.news-feed-grid{grid-template-columns:1fr}}

/* v266: منع تمرير الصفحة الموجودة خلف القائمة، مع إبقاء .side-scroll
   عنصراً مستقلاً قابلاً للتمرير. لا نستخدم position:fixed على body. */
html.side-locked,body.side-locked{overflow:hidden!important;overscroll-behavior:none}

/* الوضع الأفقي القصير: نقلّص رأس القائمة وتذييلها فقط لنمنح روابطها أكبر
   مساحة تمرير، من دون تغيير محتوى الصفحات أو أحجامها. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .side-brand{padding:7px 10px 6px;display:grid;grid-template-columns:38px 1fr;column-gap:8px;align-items:center;text-align:right}
  .side-brand .school-mark{grid-row:1/3;width:36px;height:36px;margin:0;border-radius:10px;font-size:20px}
  .side-brand strong{font-size:13px;line-height:1.25}
  .side-brand small{font-size:10px;margin-top:1px;line-height:1.2}
  .side-scroll{padding:4px 8px 8px}
  .nav-group{margin:1px 0}
  .nav-group-title{padding:8px 10px 6px;font-size:14px}
  .navbtn{padding:8px 10px;font-size:12px}
  .side-footer{padding:6px 8px}
  .side-logout-btn{padding:8px;font-size:12px}
}

/* ===== إصلاح النوافذ المنبثقة الطويلة =====
   كانت .modalbox كلها تُمرَّر (overflow:auto)، فحين يطول المحتوى (جدول
   معلم بـ٢٠ حصة مثلاً) يُدفع رأس النافذة وزر الإغلاق للأعلى خارج الشاشة
   فيعجز المستخدم عن الخروج. الآن: النافذة عمود مرن، رأسها (panelhead)
   ثابت أعلاها دائماً، والمحتوى وحده هو الذي يُمرَّر. */
.modalbox{
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;              /* التمرير ينتقل للمحتوى الداخلي */
  width:min(680px,100%);
}
.modalbox > .panelhead{
  position:sticky; top:0; z-index:5;
  background:#fff; margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
  flex:0 0 auto;                /* لا ينكمش ولا يُدفع خارج الشاشة */
}
/* كل ما بعد الرأس يُمرَّر داخلياً.
   المشكلة السابقة: overflow:hidden على .modalbox ولا حاوية تمرير للمحتوى،
   فالنماذج الطويلة (تعديل موظف مثلاً) تُقصّ ولا يمكن الوصول لأسفلها إلا
   بمفتاح Tab. الحل: منطقة محتوى قابلة للتمرير بشريط ظاهر دائماً. */
.modalbox > *:not(.panelhead){ flex:0 1 auto; }
.modalbox .tablewrap{ max-height:60vh; overflow:auto; }

/* منطقة التمرير: كل ما بعد الرأس يُلفّ بها تلقائياً بجافاسكربت */
.modal-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;                 /* ضروري داخل flex وإلا لم يعمل التمرير */
  padding-left:6px;             /* مساحة للشريط بلا تغطية المحتوى */
  scrollbar-width:thin;
  scrollbar-color:#0f766e #e5eceb;
}
/* شريط تمرير ظاهر دائماً وواضح — لا يختفي كالافتراضي */
.modal-scroll::-webkit-scrollbar{ width:11px; }
.modal-scroll::-webkit-scrollbar-track{ background:#e5eceb; border-radius:6px; }
.modal-scroll::-webkit-scrollbar-thumb{
  background:#0f766e; border-radius:6px; border:2px solid #e5eceb;
}
.modal-scroll::-webkit-scrollbar-thumb:hover{ background:#0b5c55; }

/* زر إغلاق عائم دائم — ضمان أخير للخروج مهما طال المحتوى */
.modal-close-x{
  position:absolute; top:10px; left:10px; z-index:20;
  width:34px; height:34px; border-radius:50%;
  border:0; background:#b91c1c; color:#fff;
  font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px #0004;
}
.modal{ padding:12px }

@media(max-width:560px){
  .modalbox{ max-height:92vh; width:100% }
  .modalbox .tablewrap{ max-height:55vh }
}

/* ===== جداول الحصص: توسيط كامل وحدود واضحة =====
   كل محتوى الخلية يُوسَّط أفقياً ورأسياً (المادة واسم المعلم ورمز الفصل)،
   والحدود بلون داكن مرئي بدل الخط الفاتح الافتراضي الذي يصعب تتبّعه. */
table.sched-table{ border-collapse:collapse; }
table.sched-table th,
table.sched-table td{
  border:1px solid #5b7570;          /* فواصل واضحة */
  text-align:center;
  vertical-align:middle;
  padding:5px 4px;
  word-break:break-word;
}
table.sched-table thead th{
  background:#0f766e; color:#fff; font-weight:700;
  border-color:#0b5c55;
}
table.sched-table td.day-cell{
  background:#eef6f5; font-weight:700; white-space:nowrap;
}
/* حدود خارجية أسمك لتحديد إطار الجدول */
table.sched-table{ border:2px solid #0f766e; }
/* كل ما بداخل الخلية موسَّط بما فيه الأسطر الثانوية */
table.sched-table td > *{ text-align:center; }
table.sched-table td div{ text-align:center; }

/* v234 — جداول المعلمين والفصول/الطلاب على هيئة بطاقات قريبة من المربع. */
.compact-schedule-print .schedule-card-sheet{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  width:min(1040px,90%);
  margin:0 auto 22px;
  align-items:stretch;
  box-sizing:border-box;
}
.compact-schedule-print .sched-box{
  width:100%;
  min-width:0;
  aspect-ratio:1.45 / 1;
  margin:0 !important;
  padding:12px !important;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  overflow:visible;
}
.compact-schedule-print .sched-box .panelhead{
  min-height:46px;
  margin:0 0 8px !important;
  padding:8px 22px !important;
  box-sizing:border-box;
  overflow:visible;
  flex:0 0 auto;
}
.compact-schedule-print .sched-box .panelhead h3{
  padding-inline:6px;
  font-size:14px;
  line-height:1.4;
  white-space:normal;
  overflow:visible;
}
.compact-schedule-print .sched-box .panelhead span{
  margin-inline-start:8px;
  font-size:11px;
  white-space:nowrap;
}
.compact-schedule-print .sched-box .tablewrap{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  overflow:visible;
  padding-bottom:0;
}
.compact-schedule-print .sched-box table.sched-table{
  width:100%;
  height:100%;
  min-width:0;
  table-layout:fixed;
  font-size:9.5px;
}
.compact-schedule-print .sched-box table.sched-table th,
.compact-schedule-print .sched-box table.sched-table td{
  height:auto;
  padding:3px 2px;
  text-align:center;
  overflow-wrap:anywhere;
}
.compact-schedule-print .sched-box table.sched-table td div{
  font-size:8px !important;
  line-height:1.15;
}
@media(max-width:1000px){
  .compact-schedule-print .schedule-card-sheet{
    grid-template-columns:1fr;
    width:min(620px,90%);
  }
}
@media(max-width:620px){
  .compact-schedule-print .schedule-card-sheet{width:96%}
  .compact-schedule-print .sched-box{aspect-ratio:auto;min-height:300px;padding:7px !important}
  .compact-schedule-print .sched-box .panelhead{padding:7px 14px !important}
}

@media print{
  table.sched-table th, table.sched-table td{
    border:1px solid #333 !important;
    text-align:center !important;
    vertical-align:middle !important;
  }
  table.sched-table{ border:2px solid #000 !important; }
  table.sched-table thead th{
    background:#0f766e !important; color:#fff !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  table.sched-table td.day-cell{
    background:#eef6f5 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}


/* =====================================================================
   v138 — طباعة جدول المعلم والطالب من داخل الحساب
   ===================================================================== */
.account-schedule-print-target{
  width:min(760px,88%);
  margin:0 auto;
  box-sizing:border-box;
}
.account-schedule-print-target .tablewrap{
  overflow:visible;
}
.account-schedule-print-target table.sched-table{
  width:100%;
  min-width:0;
  height:420px;
  table-layout:fixed;
}
.account-schedule-print-target table.sched-table th,
.account-schedule-print-target table.sched-table td{
  height:auto;
  text-align:center;
}
@media(max-width:620px){
  .account-schedule-print-target{width:96%}
  .account-schedule-print-target table.sched-table{height:340px}
}
@media print{
  #printRoot .account-schedule-print-target{
    width:82% !important;
    max-width:82% !important;
    margin:0 auto !important;
    overflow:visible !important;
  }
  #printRoot .account-schedule-print-target .tablewrap{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow:visible !important;
  }
  #printRoot .account-schedule-print-target table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:115mm !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
    direction:rtl !important;
  }
  #printRoot .account-schedule-print-target th,
  #printRoot .account-schedule-print-target td{
    padding:5px 3px !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    text-align:center !important;
    vertical-align:middle !important;
    overflow:visible !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #printRoot .account-schedule-print-target td div,
  #printRoot .account-schedule-print-target .cls-code,
  #printRoot .account-schedule-print-target .tag{
    font-weight:700 !important;
    line-height:1.25 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #printRoot .account-schedule-print-target .current-period{
    box-shadow:none !important;
  }
}


/* v140 — زر استيراد ربط الطلاب بأولياء الأمور */
#parentStudentLinkImportBtn{
  white-space:nowrap;
}

#notificationTestSoundBtn{white-space:nowrap;flex-shrink:0}


/* v154 — مرفقات المراسلات */
.message-attachment-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.message-attachment-selected{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f7fbfa;
}
.message-attachment-card{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.message-attachment-card > div{min-width:0;flex:1}
.message-attachment-image{
  display:block;
  width:min(240px,100%);
  max-height:220px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid var(--line);
}
.message-file-icon{font-size:24px}
@media(max-width:560px){
  .message-attachment-card{align-items:flex-start;flex-wrap:wrap}
  .message-attachment-card .btn{width:100%}
}


/* v157 — شارة الرسائل غير المقروءة وحذف الرسائل */
.has-unread-messages{
  position:relative;
}
.messages-unread-badge{
  margin-inline-start:auto;
  box-shadow:0 0 0 2px #fff;
  animation:messageBadgePulse 1.8s infinite;
}
.navbtn .messages-unread-badge{
  margin-right:auto;
  margin-left:0;
}
.msg-delete-btn{
  border:0;
  background:transparent;
  color:var(--red);
  cursor:pointer;
  font-size:13px;
  padding:2px 6px;
  margin-inline-start:6px;
  border-radius:6px;
}
.msg-delete-btn:hover{
  background:#feeceb;
}
@keyframes messageBadgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* v158 — حذف الرسالة لدى الجميع */
.delete-everyone-hint{
  font-size:10px;
  opacity:.72;
  margin-inline-start:5px;
}


/* v160 — إصلاح اتصال الحروف العربية في الطباعة */
@media print{
  #printRoot,#printRoot *{
    font-family:Tahoma,Arial,"Segoe UI",sans-serif !important;
    letter-spacing:normal !important;
    word-spacing:normal !important;
    font-kerning:normal !important;
  }
  #printRoot{direction:rtl !important}
  #printRoot th,#printRoot td{
    direction:rtl !important;
    unicode-bidi:plaintext;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }
  #printRoot td[style*="text-align:right"],
  #printRoot .student-name,
  #printRoot .student-name-cell{
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
}

/* v164 — استجابة زر طباعة كشف المتابعة من أول نقرة */
[data-followup-print].is-busy{
  cursor:wait !important;
  opacity:.72;
  pointer-events:none;
}
[data-followup-print]:disabled{
  cursor:wait;
}

/* v228 — جدول كل مرحلة مطابق للجدول المجمّع العام */
.stage-cs-head{display:grid;grid-template-columns:1fr 2.2fr 1fr;align-items:center;gap:10px;min-height:66px;margin-bottom:5px;padding:7px 10px;border-top:3px solid #0f766e;border-bottom:2px solid #0f766e;background:linear-gradient(90deg,#fff,#f7fbfa 50%,#fff);font-family:Tahoma,Arial,"Segoe UI",sans-serif;box-sizing:border-box}
.stage-cs-head .stage-ministry{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;color:#24383a;line-height:1.25;white-space:nowrap;text-align:right}
.stage-cs-head .stage-ministry b{font-size:10px;color:#0b4f49}
.stage-cs-head .stage-ministry span{font-size:9px;font-weight:700}
.stage-cs-head .stage-ministry small{font-size:8px;color:#555}
.stage-cs-head .stage-title{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:0 8px;border-right:1px solid #c9dedb;border-left:1px solid #c9dedb}
.stage-cs-head .stage-school-name{font-size:13px;color:#0b4f49;line-height:1.15}
.stage-cs-head .stage-document-title{font-size:12px;color:#111;line-height:1.2}
.stage-cs-head .stage-title span{font-size:9px;font-weight:700;color:#4b6163}
.stage-cs-head .stage-meta{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:start;column-gap:7px;row-gap:2px;color:#344b4d;line-height:1.2;text-align:right;white-space:nowrap}
.stage-cs-head .stage-meta img{grid-row:1 / span 2;width:38px;height:38px;object-fit:contain}
.stage-cs-head .stage-meta small{font-size:7.5px;color:#555}
.stage-cs-head .stage-meta small b{font-size:8.5px;color:#1f3335}
.stage-cs-head .stage-meta > span{font-size:8px;font-weight:700;color:#0b4f49}
.stage-combined-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:9px;min-width:1250px}
.stage-combined-table col.teacher-col{width:14%}
.stage-combined-table th,.stage-combined-table td{border:1px solid #333;padding:1px 2px;text-align:center;vertical-align:middle;overflow:hidden;line-height:1;word-break:normal}
.stage-combined-table th{background:#f4f8f8;color:#111;font-weight:800}
.stage-combined-table .teacher-name{text-align:right;font-weight:700;white-space:nowrap}
.stage-combined-table .teacher-load{font-weight:400;color:var(--mut);font-size:8px}
.stage-combined-table .cls-code{white-space:nowrap;display:inline-block;direction:rtl;font-weight:700;font-size:9px;line-height:1}
.stage-combined-table .subject-name{font-size:6px;font-weight:700;color:var(--mut);white-space:nowrap;display:inline-block;max-width:100%;overflow:hidden;line-height:1;margin-top:1px}
.stage-combined-table .waiting-cell{background:#fff6dc}
.stage-combined-table .stage-footer-cell{padding:10px;font-size:15px;font-weight:700}
@media print{
  .stage-combined-wrap{width:98.5%!important;max-width:98.5%!important;margin:0 auto!important;padding:0!important;overflow:visible!important;box-sizing:border-box!important}
  .stage-combined-wrap .tablewrap{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;box-sizing:border-box!important}
  .stage-combined-table{min-width:0!important;width:100%!important;max-width:100%!important;margin:0 auto!important;font-size:6.5px!important;box-sizing:border-box!important}
  .stage-combined-table th,.stage-combined-table td{padding:1px!important;line-height:1.05!important}
  .stage-combined-table col.teacher-col{width:14%!important}
  .stage-combined-table .teacher-name{font-size:6.5px!important}
  .stage-combined-table .cls-code{font-size:6px!important}
  .stage-combined-table .subject-name{font-size:5px!important}
  .stage-combined-table .stage-footer-cell{font-size:11px!important;padding:8px!important}
  .stage-cs-head{grid-template-columns:1fr 2.2fr 1fr!important;gap:3mm!important;min-height:16mm!important;margin:0 0 2mm!important;padding:1.5mm 3mm!important;border-top:2px solid #0f766e!important;border-bottom:1.5px solid #0f766e!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stage-cs-head .stage-ministry{gap:.5mm!important;line-height:1.2!important}
  .stage-cs-head .stage-ministry b{font-size:8px!important}
  .stage-cs-head .stage-ministry span{font-size:7.5px!important}
  .stage-cs-head .stage-ministry small{font-size:6.5px!important}
  .stage-cs-head .stage-title{gap:.6mm!important;padding:0 2mm!important}
  .stage-cs-head .stage-school-name{font-size:11px!important}
  .stage-cs-head .stage-document-title{font-size:9.5px!important}
  .stage-cs-head .stage-title span{font-size:7px!important}
  .stage-cs-head .stage-meta{column-gap:1.5mm!important;row-gap:.5mm!important}
  .stage-cs-head .stage-meta img{width:10mm!important;height:10mm!important}
  .stage-cs-head .stage-meta small{font-size:6px!important}
  .stage-cs-head .stage-meta small b{font-size:7px!important}
  .stage-cs-head .stage-meta > span{font-size:6.5px!important}
  .stage-combined-wrap{box-shadow:none!important;border:0!important}
}


/* =====================================================================
   v170 — الجداول التفاعلية والفرز
   ===================================================================== */
.sortable-th{
  cursor:pointer !important;
  user-select:none;
  position:relative;
  transition:background .15s ease;
}
.sortable-th:hover{
  background:#dff3ef !important;
  color:var(--p2) !important;
}
table thead th.sortable-th .sort-indicator{
  display:inline-block;
  margin-inline-start:6px;
  font-size:10px;
  opacity:.65;
}
table thead th.sortable-th.sort-asc,
table thead th.sortable-th.sort-desc{
  background:#ccebe5 !important;
  color:#0b4f49 !important;
}
table thead th.sortable-th.sort-asc .sort-indicator,
table thead th.sortable-th.sort-desc .sort-indicator{
  opacity:1;
  font-weight:800;
}
.table-sort-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 8px;
}
.table-sort-toolbar .small{
  color:var(--mut);
}
@media(max-width:560px){
  .table-sort-toolbar{
    justify-content:space-between;
  }
  .table-sort-toolbar .btn{
    padding:7px 10px;
    font-size:12px;
  }
}
@media print{
  .sort-indicator,.table-sort-toolbar{display:none!important}
}


/* v172 — عمود المسلسل في يمين قوائم المنصة */
table th.serial-col,
table td.serial-col{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  text-align:center !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  font-weight:700;
}
table th.serial-col{
  background:#eef6f5;
}
@media(max-width:600px){
  table th.serial-col,
  table td.serial-col{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    padding-inline:3px !important;
  }
}
@media print{
  table th.serial-col,
  table td.serial-col{
    width:7mm !important;
    min-width:7mm !important;
    max-width:7mm !important;
  }
}

/* v173 */
.smart-group{break-inside:avoid}.smart-group .tablewrap{overflow:auto}@media print{.smart-group{box-shadow:none!important;break-inside:avoid}}


/* =====================================================================
   v176 — خط القوائم مطابق لأسلوب الصورة المرجعية
   ===================================================================== */
.table,
.table input,
.table select,
.table textarea,
table:not(.sched-table):not(.schedule-table):not(.stage-combined-table){
  font-family:Tahoma,Arial,"Segoe UI",sans-serif;
}
.table td,
table:not(.sched-table):not(.schedule-table):not(.stage-combined-table) tbody td{
  font-size:calc(16px * var(--user-font-scale));
  font-weight:400;
  line-height:1.65;
  letter-spacing:normal;
  word-spacing:normal;
}
.table th,
table:not(.sched-table):not(.schedule-table):not(.stage-combined-table) thead th{
  font-size:calc(14px * var(--user-font-scale));
  font-weight:700;
  line-height:1.5;
}
.table td b,
.table td strong{
  font-family:Tahoma,Arial,"Segoe UI",sans-serif;
  font-weight:700;
}

/* v180 — عمود المسلسل مضغوط ولا يستهلك عرض الجدول */
table th.serial-col,
table td.serial-col{
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  padding-inline:4px !important;
  font-size:13px !important;
  font-weight:600 !important;
}
.roster-table{
  table-layout:fixed;
}
.roster-table .roster-seq{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  text-align:center !important;
  padding-inline:3px !important;
}
.roster-table th:nth-child(2),
.roster-table td:nth-child(2){
  text-align:right !important;
}
@media(max-width:600px){
  table th.serial-col,
  table td.serial-col{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }
  .roster-table .roster-seq{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
  }
}

/* v181 — إعداد أعمدة كشوف المعلم */
.teacher-roster-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
}
.teacher-roster-col-option{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 11px;
  background:#fff;
  cursor:pointer;
}
.teacher-roster-col-option input{width:auto}
.teacher-roster-table .roster-seq{
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  text-align:center!important;
}

/* =====================================================================
   v182 — تصميم نهائي للكشوف والمسلسل
   ===================================================================== */
table th.serial-col,
table td.serial-col{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  padding:3px 2px !important;
  text-align:center !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  line-height:1.2 !important;
}
.activity-roster-table{
  width:100%;
  table-layout:fixed;
}
.activity-roster-table col.activity-seq-col{width:28px!important}
.activity-roster-table .activity-seq{
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  padding:4px 2px!important;
  text-align:center!important;
  font-size:12px!important;
}
.activity-roster-table col.activity-col-name{width:auto}
.activity-roster-table col.activity-col-nationalId{width:145px}
.activity-roster-table col.activity-col-stage{width:90px}
.activity-roster-table col.activity-col-grade{width:130px}
.activity-roster-table col.activity-col-section{width:90px}
.activity-roster-table col.activity-col-mobile{width:120px}
.activity-roster-table col.activity-col-notes{width:160px}
.activity-roster-table col.activity-col-signature{width:120px}
.activity-roster-table col.activity-col-attendance{width:100px}
.activity-roster-table col.activity-col-participation{width:100px}
.activity-roster-table th,
.activity-roster-table td{
  padding:7px 8px!important;
  font-size:14px!important;
}
.activity-roster-table td:nth-child(2){text-align:right!important}
.activity-confirm-btn{
  width:100%;
  min-height:46px;
  font-size:16px;
  font-weight:700;
}
.activity-columns-panel{margin-top:12px}
.activity-roster-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:8px;
}
.activity-roster-col-option{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  background:#fff;
}
.activity-roster-col-option input{width:auto!important}
.activity-export-bar .row{gap:8px;flex-wrap:wrap}
@media(max-width:700px){
  .activity-roster-table{min-width:650px}
  table th.serial-col,table td.serial-col,
  .activity-roster-table .activity-seq{
    width:26px!important;min-width:26px!important;max-width:26px!important;
  }
}

/* v183 — تثبيت عرض المسلسل في كل كشف، حتى لو كان عمود «م» أصلياً وليس serial-col */
.roster-table,
.activity-roster-table,
.teacher-roster-table{
  table-layout:fixed !important;
}
.roster-table th.roster-seq,
.roster-table td.roster-seq,
.activity-roster-table th.activity-seq,
.activity-roster-table td.activity-seq,
.teacher-roster-table th.roster-seq,
.teacher-roster-table td.roster-seq{
  width:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  padding:3px 1px !important;
  text-align:center !important;
  font-size:12px !important;
  box-sizing:border-box !important;
}
table th.serial-col,
table td.serial-col{
  width:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  padding:3px 1px !important;
}
.activity-roster-table col.activity-seq-col{width:26px!important}


/* v186 — تثبيت استيراد الجدول الجديد */
.schedule-import-mode-box{background:#f4fbfa;border:1px solid #b8ded8;border-radius:12px;padding:12px;margin:12px 0}
.schedule-import-mode-box select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* v269 — سجل متابعة الطلاب المرن (تنسيق معزول لا يغيّر الجداول الأخرى) */
.gradebook-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  background:linear-gradient(135deg,#eefaf7 0%,#fff 72%);
  border:1px solid #c9e8e1;
}
.gradebook-hero-copy{max-width:900px}
.gradebook-kicker{display:inline-block;color:#0f766e;font-weight:800;margin-bottom:5px}
.gradebook-hero h2{margin:0 0 8px;font-size:clamp(22px,2.5vw,32px);color:#103b38}
.gradebook-hero p{margin:0;color:var(--mut);line-height:1.8;font-weight:600}
.gradebook-benefits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gradebook-benefits span{background:#dff3ef;color:#0b665e;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800}
.gradebook-new-button{white-space:nowrap;min-height:48px;padding-inline:22px}
.gradebook-editor{border-top:5px solid #0f766e}
.gradebook-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gradebook-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.gradebook-section-head h4{margin:0 0 3px;font-size:18px}
.gradebook-section-head span{font-size:12px;color:var(--mut)}
.gradebook-total{background:#0f766e;color:#fff;border-radius:10px;padding:9px 15px;white-space:nowrap}
.gradebook-total b{font-size:19px}
.gradebook-items{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.gradebook-item-row{display:grid;grid-template-columns:38px minmax(170px,1fr) minmax(170px,1fr) 110px 72px;align-items:end;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfdfd}
.gradebook-item-row .field{margin:0}
.gradebook-item-number{align-self:center;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#dff3ef;color:#0f665f;font-weight:800}
.gradebook-score-field input{text-align:center}
.gradebook-remove{min-height:42px}
.gradebook-students-box{margin-top:18px;padding:14px;border:1px solid #c8e3df;border-radius:14px;background:#f5fbfa}
.gradebook-students-box .gradebook-section-head{margin:0 0 10px}
.gradebook-students-box textarea{width:100%;resize:vertical;min-height:190px;line-height:1.8;font-weight:700;direction:rtl}
.gradebook-limit-warning{color:#b42318!important;font-weight:800!important}
.gradebook-error{background:#fff0f0!important;color:#9c1c1c!important;border-color:#efb8b8!important}
.gradebook-editor-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gradebook-records{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}
.gradebook-record-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:#fff;box-shadow:0 5px 18px rgba(15,118,110,.06)}
.gradebook-record-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gradebook-record-title h3{margin:0;color:#103b38}.gradebook-record-title p{margin:5px 0 0;color:var(--mut);font-weight:700}
.gradebook-record-stats{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.gradebook-record-stats span{background:#f0f6f5;border-radius:8px;padding:5px 8px;font-size:12px;color:#3d5b58}
.gradebook-record-actions{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid var(--line);padding-top:12px}
.gradebook-empty{grid-column:1/-1;padding:32px}

@media(max-width:1000px){
  .gradebook-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gradebook-item-row{grid-template-columns:34px minmax(130px,1fr) minmax(130px,1fr) 90px 64px}
}
@media(max-width:700px){
  .gradebook-hero{align-items:stretch;flex-direction:column;padding:18px}
  .gradebook-new-button{width:100%}
  .gradebook-form-grid{grid-template-columns:1fr}
  .gradebook-item-row{grid-template-columns:34px 1fr 78px;align-items:end}
  .gradebook-item-row .field:nth-of-type(1),.gradebook-item-row .field:nth-of-type(2){grid-column:2/4}
  .gradebook-item-row .gradebook-score-field{grid-column:2/3}
  .gradebook-item-row .gradebook-remove{grid-column:3/4}
  .gradebook-item-number{grid-row:1/4;align-self:start;margin-top:24px}
  .gradebook-section-head{align-items:flex-start;flex-direction:column}
  .gradebook-records{grid-template-columns:1fr}
  .gradebook-record-actions .btn{flex:1}
}

/* v273 — محرر كشف الإشراف والمناوبة (معزول عن بقية الجداول) */
.supervision-assigned-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:7px;
  margin:10px 0;
}
.supervision-assigned-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  border:1px solid #cce4df;
  border-radius:10px;
  background:#f8fcfb;
}
.supervision-assigned-item>div:first-child{min-width:0;overflow-wrap:anywhere}
.supervision-assigned-item .btn{font-size:11px;padding:5px 8px;min-height:30px}
.supervision-manual-editor{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:8px;
  align-items:center;
  padding:10px;
  margin:10px 0;
  border:1px dashed #8bc8bd;
  border-radius:11px;
  background:#eef9f7;
}
.supervision-manual-editor select{
  width:100%;
  min-width:0;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  padding:8px 10px;
  font-weight:700;
}
@media(max-width:700px){
  .supervision-assigned-list{grid-template-columns:1fr}
  .supervision-assigned-item{align-items:flex-start;flex-direction:column}
  .supervision-assigned-item .row,.supervision-assigned-item .btn{width:100%}
  .supervision-manual-editor{grid-template-columns:1fr}
  .supervision-manual-editor .btn{width:100%}
}

/* v274 — تنسيق معزول لصفحة المخالفات وأزرار إجراءاتها فقط. */
.behavior-page{
  font-family:Arial,"Arial Unicode MS",Tahoma,sans-serif;
}
.behavior-page td.actions,
.behavior-actions{
  gap:4px;
  align-items:center;
}
.behavior-page td.actions .btn,
.behavior-actions .btn,
.behavior-action-btn{
  width:auto!important;
  min-height:30px;
  padding:6px 9px!important;
  border-radius:9px;
  font-family:Arial,"Arial Unicode MS",Tahoma,sans-serif!important;
  font-size:12px!important;
  line-height:1.35;
  white-space:nowrap;
}
@media(max-width:700px){
  .behavior-page td.actions .btn,
  .behavior-actions .btn,
  .behavior-action-btn{
    min-height:28px;
    padding:5px 7px!important;
    font-size:11px!important;
  }
}

/* v275 — توحيد خط الواجهة مع خط أزرار الإجراءات، بحجم أساسي أكبر قليلاً.
   يقتصر التغيير على الشاشة حتى تبقى قياسات الطباعة كما هي. */
:root{
  --platform-ui-font:Arial,"Arial Unicode MS",Tahoma,"Segoe UI",sans-serif;
}
@media screen{
  html,body,.app,.app *,.login,.login *{
    font-family:var(--platform-ui-font)!important;
  }
  body{
    font-size:calc(15px * var(--user-font-scale));
  }
}
