/* =====================================================================
   منصة الزبير التعليمية — الإصدار 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:Arial,Tahoma,sans-serif;background:var(--bg);color:var(--txt);font-size:calc(14px * var(--user-font-scale));font-weight:500}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}.storage-fallback-banner{position:sticky;top:var(--topH);z-index:19;background:var(--red);color:#fff;padding:10px 18px;text-align:center;font-weight:700;font-size:13px;line-height:1.6}
.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}
/* ===== تخطيط الصفحة والقائمة اليمنى — ثابتة دائماً على الكمبيوتر افتراضياً، بلا حاجة لـ !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}
  /* إصلاح اهتزاز القائمة الجانبية بالجوال: كان الارتفاع محسوباً بـ
     calc(100dvh - topH)، و100dvh تتغيّر باستمرار أثناء التمرير لأن شريط
     عنوان المتصفح ينكمش ويظهر — فيُعاد حساب ارتفاع القائمة مع كل حركة
     إصبع فتهتز صعوداً ونزولاً. استخدام bottom:0 بدل حساب الارتفاع يجعلها
     ممتدة لأسفل الشاشة دائماً بلا أي إعادة حساب. */
  .side{position:fixed;right:0;top:var(--topH);bottom:0;width:min(86vw,var(--sideW));padding:0;overflow:hidden;transform:translateX(105%);transition:transform .25s ease;display:flex;border:0;will-change:transform}
  .app.side-open .side{transform:translateX(0)}
  .app.side-open:after{content:"";position:fixed;inset:var(--topH) 0 0;background:#0007;z-index:10;pointer-events:none}
  .main{padding:14px}
  .top .top-title h2 small{display:none}
}
@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}}

/* ===== مكوّن اختيار الطالب (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}}

/* تثبيت الخلفية أثناء فتح القائمة بالجوال — يمنع تحرّك الصفحة خلفها،
   وبالتالي يمنع اهتزاز القائمة صعوداً ونزولاً. موضع التمرير يُحفَظ
   ويُعاد بجافاسكربت (toggleSide) لتفادي القفز لأعلى الصفحة. */
body.side-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ===== إصلاح النوافذ المنبثقة الطويلة =====
   كانت .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; }

@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:100%;
}
.account-schedule-print-target .tablewrap{
  overflow:auto;
}
@media print{
  #printRoot .account-schedule-print-target,
  #printRoot .account-schedule-print-target .tablewrap{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  #printRoot .account-schedule-print-target table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !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;
    line-height:1.35 !important;
    text-align:center !important;
    vertical-align:middle !important;
    overflow:visible !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;
}

/* ===== توحيد عنصر القائمة الجانبية النشط =====
   ظهر العنصر النشط بخلفية بيضاء ونص داكن بينما بقية العناصر نصها فاتح على
   الأخضر — لتعارض بين قاعدة .navbtn العامة وقاعدة القائمة الجانبية.
   هذه القاعدة في نهاية الملف تحسم التعارض وتشمل النص والأيقونة معاً. */
.side .navbtn,
.side .navbtn .nav-label,
.side .navbtn .nav-icon{ color: var(--sideText) !important; background-color: transparent; }
.side .navbtn.active,
.side .navbtn.active .nav-label,
.side .navbtn.active .nav-icon{ color: #fff !important; }
.side .navbtn.active{
  background: linear-gradient(90deg,#19a998,#168c80) !important;
  box-shadow: 0 7px 18px #001d1a33;
}
.side .navbtn:hover{ background:#ffffff12; }
.side .navbtn:hover .nav-label,
.side .navbtn:hover .nav-icon{ color:#fff !important; }

/* ===== تلوين صف الطالب بلون شدة المخالفات =====
   كان الصف يُلوَّن بشفافية موحّدة لا تميّز الشدة، فلا يطابق لون وسم
   "مخالفات". الآن يأخذ نفس تدرّج riskLevelByCount (أصفر → برتقالي → أحمر)
   بشفافية أخف، مع شريط جانبي يوضّح المستوى بلمحة. */
.table tr.student-risk-row > td{
  background: var(--risk-bg, transparent) !important;
  color: var(--risk-text, inherit);
}
.table tr.student-risk-row > td:first-child{
  border-right: 4px solid var(--risk-border, transparent);
}
.table tr.student-risk-row:hover > td{
  filter: brightness(0.97);
}
/* اسم الطالب يبقى واضحاً فوق الخلفية الملوّنة */
.table tr.student-risk-row > td b{ color: var(--risk-text, inherit); }
.table tr.student-risk-row > td .small{ opacity:.85 }

@media print{
  .table tr.student-risk-row > td{
    background: var(--risk-bg, transparent) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* بطاقة الابن في بوابة ولي الأمر — نفس تدرّج الشدة */
.student-child-card{
  background: var(--risk-bg, transparent) !important;
  border-right: 4px solid var(--risk-border, transparent);
}
.student-child-card b{ color: var(--risk-text, inherit); }
