/* ===========================================================
     شريط جانبي — "غلاف السجل"
     =========================================================== */
  .sidebar{
    position:fixed;
    top:var(--oh-h); right:0; bottom:0;
    width:var(--sidebar-w);
    background:linear-gradient(175deg, var(--navy) 0%, var(--navy-deep) 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    z-index:100;
    box-shadow:var(--shadow-deep);
  }
  .sidebar-brand{
    padding:28px 24px 22px;
    border-bottom:1px solid var(--line-navy);
    position:relative;
  }
  .brand-mark{
    width:63px; height:63px;
    border:1.5px solid var(--gold);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    padding:6px;
    background:#fff;
    overflow:hidden;
  }
  .brand-mark img{ width:100%; height:100%; object-fit:contain; }
  .brand-title{
    font-family:'Amiri',serif;
    font-size:1.28rem;
    font-weight:700;
    margin:0 0 3px;
    line-height:1.3;
  }
  .brand-sub{
    font-size:.74rem;
    color:var(--gold-light);
    margin:0;
    letter-spacing:.5px;
  }

  .sidebar-nav{
    flex:1;
    padding:18px 14px;
    overflow-y:auto;
    /* V135.28 — إصلاح: على الموبايل كان تمرير قائمة الشريط الجانبي (عند
       بلوغ أعلى/أسفل القائمة أثناء السحب باللمس) "يتسرّب" فيُكمل تمرير
       الصفحة الرئيسية خلفها أيضًا (Scroll Chaining) — مشكلة قياسية معروفة
       في متصفحات الموبايل عند وجود منطقة تمرير داخلية فوق صفحة قابلة
       للتمرير. overscroll-behavior:contain يحصر التمرير داخل القائمة نفسها
       فقط ويمنع انتقاله لأي عنصر تمرير آخر خلفها. */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-eyebrow{
    font-size:.68rem;
    color:var(--ink-faint);
    text-transform:uppercase;
    letter-spacing:1.5px;
    padding:0 12px;
    margin:4px 0 10px;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    padding:13px 14px;
    border-radius:10px;
    background:none;
    border:none;
    color:rgba(255,255,255,.78);
    font-family:'Tajawal',sans-serif;
    font-size:.92rem;
    font-weight:500;
    cursor:pointer;
    text-align:right;
    transition:background .18s ease, color .18s ease, transform .18s ease;
    margin-bottom:var(--sp-2);
    position:relative;
  }
  .nav-item:hover{
    background:rgba(255,255,255,.06);
    color:#fff;
    transform:translateX(-2px);
  }
  .nav-item.active:hover{
    background:linear-gradient(95deg, var(--burgundy), var(--burgundy-dark));
    color:#fff;
  }
  .nav-item:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
  .nav-item.active{
    background:linear-gradient(95deg, var(--burgundy), var(--burgundy-dark));
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 14px rgba(122,31,43,.35);
  }
  .nav-item[data-module="dashboard"]{
    background:rgba(212,168,68,.16) !important;
    border:1px solid rgba(212,168,68,.55) !important;
  }
  .nav-item[data-module="dashboard"]:hover{ background:rgba(212,168,68,.26) !important; }
  .nav-item[data-module="dashboard"].active{
    background:linear-gradient(95deg, var(--navy), var(--gold)) !important;
    box-shadow:0 4px 14px rgba(212,168,68,.35);
  }
  .nav-item[data-module="dashboard"].active:hover{
    background:linear-gradient(95deg, var(--navy), var(--gold)) !important;
  }
  /* V135.5 — حذف أرقام العناوين في الشريط الجانبي الكحلي (سجل المشرف
     وسجل المشرف الأول معًا، لأن هذا الملف مشترك بين الصفحتين). أُبقي على
     القاعدة (لا حذف من HTML) وأُخفيت بـdisplay:none لتفادي أي كسر لبنية
     nav-item في الصفحتين. */
  .nav-item-num{ display:none; }
  .nav-item.active .nav-item-num{ color:var(--gold-light); }
  .nav-item-icon{
    width:19px; height:19px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-item-icon svg{ width:100%; height:100%; }
  .nav-item-text{ flex:1; }
  .nav-item-text small{
    display:block;
    font-size:.68rem;
    font-weight:400;
    color:rgba(255,255,255,.45);
    margin-top:1px;
  }
  .nav-item.active .nav-item-text small{ color:rgba(255,255,255,.7); }

  /* V135.14 — زر "تسجيل الخروج" الجديد أسفل الشريط الجانبي (بطلب صريح: مجموعات
     منطقية "...وفي الأسفل: تسجيل الخروج"). نفس هوية .nav-item بصريًا (نفس
     التباعد/الحجم/الخط) مع تلميح لوني أحمر خفيف فقط ليتميّز كإجراء خروج،
     بلا كسر للهوية الكحلية العامة. لا منطق تسجيل خروج جديد — يستدعي فقط
     topbarLogoutBtn الأصلي (index.html). */
  .sidebar-logout-btn{
    display:flex; align-items:center; gap:13px;
    width:calc(100% - 28px); margin:6px 14px 4px;
    padding:12px 14px; border-radius:10px;
    background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.22);
    color:rgba(255,255,255,.82);
    font-family:'Tajawal',sans-serif; font-size:.88rem; font-weight:600;
    cursor:pointer; text-align:right;
    transition:background .18s ease, color .18s ease;
  }
  .sidebar-logout-btn:hover{ background:rgba(220,38,38,.18); color:#fff; }
  .sidebar-logout-btn svg{ width:18px; height:18px; flex-shrink:0; }

  .sidebar-footer{
    padding:16px 22px 20px;
    border-top:1px solid var(--line-navy);
    font-size:.7rem;
    color:rgba(255,255,255,.4);
    line-height:1.7;
  }
  .sidebar-footer b{ color:rgba(255,255,255,.65); }

  /* V96 — بطلب صريح: "جملة الحقوق محفوظة لدى المصمم... في الشريط الجانبي
     الكحلي في اسفل بخط صغير". زر نصي كامل العرض أسفل .sidebar-footer
     مباشرة، بخط أصغر منه حتى (.64rem) ولون أخفت، يفتح عند الضغط نافذة
     #siteCreditsOverlay ببيانات المصمم ورقم الإصدار. */
  .sidebar-copyright-btn{
    display:block; width:100%; text-align:center;
    background:none; border:none; border-top:1px solid var(--line-navy);
    padding:9px 12px 14px; margin:0;
    font-family:'Tajawal',sans-serif; font-size:.64rem; font-weight:500;
    color:rgba(255,255,255,.32); cursor:pointer;
    transition:color .18s ease;
  }
  .sidebar-copyright-btn:hover, .sidebar-copyright-btn:focus-visible{
    color:rgba(255,255,255,.72); text-decoration:underline;
  }

  .sidebar-backup{
    padding:14px 18px;
    border-top:1px solid var(--line-navy);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .backup-btn{
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.8);
    border-radius:8px;
    padding:9px 12px;
    font-family:'Tajawal',sans-serif;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, color .15s;
  }
  .backup-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
  .backup-btn svg{ width:14px; height:14px; flex-shrink:0; }

  /* تذكير خفيف بآخر نسخة احتياطية — نص تعريفي بلا أي حجب أو إلزام،
     يتحوّل من رمادي محايد إلى كهرماني لطيف بعد مرور فترة طويلة بلا
     تصدير، لتنبيه المشرف بلطف دون إزعاج */
  .sidebar-backup-status{
    display:flex; align-items:center; gap:6px;
    padding:2px 2px 0;
    font-size:.68rem;
    color:rgba(255,255,255,.42);
    line-height:1.6;
  }
  .sidebar-backup-status i{
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.3);
    flex-shrink:0;
  }
  .sidebar-backup-status.is-due{ color:#f5c56b; }
  .sidebar-backup-status.is-due i{
    background:#f5c56b;
    box-shadow:0 0 6px rgba(245,197,107,.6);
  }

  /* ===========================================================
     منطقة المحتوى الرئيسية
     =========================================================== */
  .main-area{
    margin-right:var(--sidebar-w);
    min-height:100vh;
    min-width:0;
    padding-top:var(--oh-h);
    display:flex;
    flex-direction:column;
  }

  /* ===========================================================
     الرأس الرسمي الموحَّد — يمتد بعرض الصفحة بالكامل (فوق الشريط
     الجانبي أيضًا)، بمستوى الأنظمة الحكومية الحديثة (Fluent / Fiori).
     الترتيب من اليمين لليسار: الشعاران، عنوان النظام، شارة العام
     الدراسي، تاريخ اليوم، ثم بيانات المشرف في أقصى اليسار.
     =========================================================== */
  .official-header{
    background:#FFFFFF;
    box-shadow:0 2px 10px rgba(16,24,40,.07);
    height:var(--oh-h);
    width:100%;
    display:grid;
    /* V135.11 — بطلب صريح: العمودان الجانبيان بعرض متساوٍ (1fr بدل auto)
       بدل عمود عنوان مرن وحيد، حتى يقع عنوان النظام (العمود الأوسط) في
       المنتصف الهندسي الحقيقي للرأس بلا أي تراكب (لا يزال العنوان بعمود
       شبكي مستقل، فالضمان القديم ضد التراكب لم يتغيّر) — الشعاران
       ومجموعة العناصر الثانوية يبقيان بمحاذاتهما الأصلية عبر justify-self
       أدناه رغم اتساع عموديهما. */
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    padding:0 32px;
    position:fixed;
    top:0; right:0; left:0;
    z-index:110;
  }

  /* ① الشعاران — وزارة التعليم أولًا (أقصى اليمين)، ثم رؤية عُمان 2040 بجانبه */
  .oh-brand{
    display:flex;
    align-items:center;
    gap:18px;
    justify-self:start; /* V135.11 — تبقى ملتصقة بأقصى اليمين (RTL) رغم عرض العمود 1fr */
  }
  .oh-logo{
    width:auto;
    object-fit:contain;
    display:block;
  }
  .oh-logo-moe{ height:62px; max-width:170px; }
  .oh-logo-vision{ height:52px; max-width:140px; opacity:.92; }

  /* فاصل شفافة رفيعة بين أقسام الرأس */
  .oh-divider{
    width:1px;
    height:44px;
    background:rgba(16,24,40,.10);
    flex-shrink:0;
  }

  /* ② عنوان النظام — يتوسط عموده المرن (يضمن عدم أي تراكب مطلقًا بحكم
     بنية الشبكة نفسها، بخلاف التموضع المطلق الذي قد يتراكب مع عناصر
     مجاورة على دقة شاشات شائعة كاللابتوب) */
  .oh-title{
    font-family:'Amiri',serif;
    font-size:1.78rem;
    font-weight:700;
    color:var(--navy);
    margin:0;
    text-align:center;
    white-space:nowrap;
  }

  /* مجموعة العناصر الثانوية — العمود الأخير في شبكة الرأس (فاصل، شارة
     العام، التاريخ، فاصل، بيانات المشرف)، تلتصق بأقصى يسار الرأس تلقائيًا
     لأنها آخر عمود في الشبكة */
  .oh-meta-group{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
    justify-self:end; /* V135.11 — تبقى ملتصقة بأقصى اليسار (RTL) رغم عرض العمود 1fr */
  }

  /* ③ شارة العام الدراسي — خلفية كحلية، نص ذهبي */
  .oh-year-badge{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--navy);
    border:1.5px solid var(--navy);
    border-radius:7px;
    padding:3px 9px;
    flex-shrink:0;
  }
  .oh-year-icon{ width:14px; height:14px; flex-shrink:0; color:var(--gold); }
  .oh-year-text{ display:flex; flex-direction:column; line-height:1.2; }
  .oh-year-label{
    font-size:.62rem;
    font-weight:600;
    color:var(--gold);
  }
  .oh-year-value{
    font-size:.86rem;
    font-weight:800;
    color:var(--gold);
  }

  /* ④ تاريخ اليوم — بلا خلفية أو إطار، بخط أصغر من خط العام الدراسي، رمادي مطفي */
  .oh-date{
    display:flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    padding:0;
    flex-shrink:0;
  }
  .oh-date-icon{
    width:14px; height:14px;
    flex-shrink:0;
    color:var(--ink-faint);
  }
  .oh-date-text{ display:flex; flex-direction:column; line-height:1.2; }
  .oh-date-label{
    font-size:.58rem;
    font-weight:600;
    color:var(--ink-faint);
  }
  .oh-date-value{
    font-size:.62rem;
    font-weight:600;
    color:var(--ink-faint);
    white-space:nowrap;
  }

  /* ⑤ بيانات المشرف — بالترتيب المطلوب: الاسم يمين، الصورة يسار
     (سهم منسدل زخرفي، ثم الاسم/الدور، ثم الصورة أقصى يسار المجموعة
     تحت dir="rtl") */
  .oh-supervisor{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    position:relative;
    cursor:pointer;
  }
  /* قائمة تسجيل الخروج المنسدلة — تربط الموقع بالخادم الحقيقي (auth).
     V135.29 — position:fixed دائمًا (بدل absolute)، بإحداثيات top/left
     تُحسَب وتُضبَط بجافاسكريبت (initHeaderAccount في index.html/head.html)
     عند كل فتح، استنادًا لموضع زر المشغّل (ohSupervisorTrigger) الفعلي
     على الشاشة. السبب: V135.28 كانت تحوّلها لـposition:fixed عبر CSS فقط
     ضمن @media(max-width:720px) لحل مشكلة اقتطاعها خلف .official-header
     (overflow-x:auto يُجبر overflow-y على "auto" فيقتطع أي فائض عمودي) —
     لكن ظهرت مشكلة أخرى تحديدًا على Safari iOS: عنصر position:fixed
     الذي يبقى ابنًا في شجرة DOM لعنصر أب قابل للتمرير (overflow:auto/scroll)
     قد لا يستجيب فعليًا للمس رغم ظهوره بصريًا في مكانه الصحيح — خلل معروف
     في WebKit على iOS تحديدًا (لا يظهر على المتصفحات الأخرى، ولهذا كان
     الوضع الأفقي يعمل بينما العمودي لا يستجيب: عرض الوضع الأفقي غالبًا
     يتجاوز 720px فلا تُفعَّل قاعدة overflow-x:auto إطلاقًا فيبقى العنصر
     الأصلي غير المتأثر). الحل الجذري: نقل عنصر القائمة فعليًا في DOM إلى
     يكون ابنًا مباشرًا لـ<body> (بعيدًا عن أي عنصر قابل للتمرير) عند
     تحميل الصفحة، مع حساب موضعه ديناميكيًا بجافاسكريبت بدل الاعتماد على
     `top:calc(100% + 8px)` النسبية لعنصر أب — هذا يعمل بشكل متطابق على كل
     المتصفحات وكل اتجاهات الشاشة دون أي حالات استثنائية بالعرض. */
  .oh-supervisor-menu{
    position:fixed;
    background:#fff;
    border:1px solid var(--line-soft, #E3E6EA);
    border-radius:10px;
    box-shadow:0 8px 22px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
    padding:6px;
    min-width:150px;
    /* V135.30 — إصلاح: كانت z-index:500، وبما أن القائمة أصبحت منذ V135.29
       ابنًا مباشرًا لـ<body> (خارج أي سياق تكديس محدود)، أصبحت تُقارَن
       مباشرة بسياقات التكديس العلوية الأخرى بدل مقارنتها محليًا داخل
       .official-header كما كان الحال سابقًا. جرس التنبيهات (#v133BellWrap
       في unified-notifications.js) له z-index:120 فقط من الخارج (رغم أن
       لوحته الداخلية #v133Panel قيمتها 10021 — لكن تلك القيمة محصورة داخل
       سياق تكديس #v133BellWrap نفسه ولا تُقارَن مباشرة بعناصر خارجه)، فكانت
       500 > 120 تجعل قائمتنا تعلو فوق لوحة الإشعارات كاملة كلما تداخلتا
       بصريًا. الحل: خفض القيمة إلى 115 — تبقى فوق الرأس (110) والشريط
       الجانبي (100) كما هو مطلوب، لكن تحتها لوحة الإشعارات (120) فلا
       تحجبها بعد اليوم. */
    z-index:115;
  }
  .oh-logout-btn{
    display:flex; align-items:center; gap:8px;
    width:100%; box-sizing:border-box;
    background:none; border:none; border-radius:7px;
    padding:9px 10px;
    font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:700;
    color:#B3261E; cursor:pointer;
    transition:background .15s ease;
  }
  .oh-logout-btn:hover{ background:#FBECEC; }
  .oh-logout-btn svg{ width:16px; height:16px; flex-shrink:0; }
  .oh-chevron{
    width:16px; height:16px;
    color:var(--ink-soft);
    flex-shrink:0;
  }
  .oh-supervisor-text{
    display:flex;
    flex-direction:column;
    line-height:1.35;
  }
  .oh-supervisor-name{
    font-size:.94rem;
    font-weight:700;
    color:var(--navy);
    white-space:nowrap;
  }
  .oh-supervisor-role{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:.72rem;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .oh-status-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:#22C55E;
    display:inline-block;
    flex-shrink:0;
    transition:background .2s ease;
  }
  /* V135.13 — حالة انقطاع الإنترنت الفعلي (js/connection-status.js) */
  .oh-status-dot.offline{ background:#DC2626; }
  .oh-conn-label.offline{ color:#DC2626; font-weight:700; }

  /* ⑥ V102 — جرس التنبيهات: أقصى يسار الرأس (آخر عنصر في oh-meta-group) */
  .oh-bell-wrap{ position:relative; flex-shrink:0; }
  .oh-bell-btn{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:transparent; border:none; cursor:pointer;
    color:var(--ink-soft);
    transition:background .15s ease, color .15s ease;
  }
  .oh-bell-btn:hover{ background:var(--paper); color:var(--navy); }
  .oh-bell-btn svg{ width:20px; height:20px; }
  .oh-bell-badge{
    position:absolute; top:2px; left:2px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:9px; background:#B3261E; color:#fff;
    font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
    box-shadow:0 0 0 2px #fff;
  }
  .oh-bell-dropdown{
    position:absolute; top:calc(100% + 8px); left:0;
    width:300px; max-height:360px; overflow-y:auto;
    background:#fff; border:1px solid var(--line-soft, #E3E6EA); border-radius:10px;
    box-shadow:0 8px 22px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
    z-index:500;
  }
  .oh-bell-dropdown-head{
    font-family:'Amiri',serif; font-size:.95rem; font-weight:700; color:var(--navy);
    padding:12px 14px; border-bottom:1px solid var(--line-soft, #E3E6EA);
  }
  .oh-bell-empty{ padding:20px 14px; text-align:center; font-size:.8rem; color:var(--ink-faint); }
  .oh-bell-item{ padding:10px 14px; border-bottom:1px solid var(--line-soft, #E3E6EA); }
  .oh-bell-item:last-child{ border-bottom:none; }
  .oh-bell-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
  .oh-bell-item-from{ font-size:.78rem; font-weight:700; color:var(--navy); }
  .oh-bell-item-date{ font-size:.66rem; color:var(--ink-faint); white-space:nowrap; }
  .oh-bell-item-text{ font-size:.8rem; color:var(--ink); line-height:1.6; }
  .oh-bell-item.unread{ background:#FBF6EC; }

  /* استجابة تدريجية: نفس الترتيب دائمًا، تقليل المسافات والأحجام تدريجيًا،
     مع تمرير أفقي كملاذ أخير في أضيق الشاشات بدل حذف أو إخفاء أي عنصر */
  @media (max-width:1100px){
    .official-header{ gap:18px; padding:0 22px; }
    .oh-title{ font-size:1.5rem; }
  }
  @media (max-width:900px){
    .official-header{ gap:13px; padding:0 16px; }
    .oh-logo-moe{ height:50px; }
    .oh-logo-vision{ height:42px; }
    .oh-title{ font-size:1.25rem; }
    .oh-year-badge{ padding:3px 8px; }
    .oh-date-value{ font-size:.58rem; }
  }
  @media (max-width:720px){
    .official-header{ gap:10px; padding:0 12px; overflow-x:auto; }
    .oh-divider{ display:none; }
    .oh-logo-moe{ height:42px; }
    .oh-logo-vision{ height:36px; }
    .oh-title{ font-size:1.05rem; }
    .oh-year-label{ font-size:.56rem; }
    .oh-date-label{ font-size:.52rem; }
    .oh-year-value{ font-size:.78rem; }
    .oh-date-value{ font-size:.54rem; }
    .oh-supervisor-name{ font-size:.86rem; }
    .oh-supervisor-role{ font-size:.64rem; }
    /* V135.29 — قاعدتا V135.28 الخاصتان بـ.oh-supervisor-menu هنا (تثبيت
       position:fixed + إزاحة وضع الاطلاع) حُذفتا: أصبح العنصر position:fixed
       دائمًا (كل الشاشات، انظر القاعدة الأساسية أعلاه) مع نقله فعليًا خارج
       .official-header في DOM وحساب موضعه بجافاسكريبت — فلا حاجة لقاعدة
       عرض محدَّدة هنا بعد اليوم؛ الحل الجديد يعمل تلقائيًا لكل الحالات. */
  }

  .topbar{
    background:var(--paper-card);
    border-bottom:1px solid var(--line);
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    position:sticky;
    top:0;
    z-index:50;
  }
  .topbar-titles h1{
    font-family:'Amiri',serif;
    font-size:1.3rem;
    color:var(--navy);
    margin:0 0 2px;
  }
  .topbar-titles p{
    font-size:.8rem;
    color:var(--ink-soft);
    margin:0;
  }
  .topbar-date{
    font-size:.78rem;
    color:var(--ink-soft);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:20px;
    padding:6px 14px;
  }
  .topbar-avatar{
    width:38px; height:38px;
    border-radius:50%;
    background:linear-gradient(160deg, var(--burgundy), var(--burgundy-dark));
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
    font-size:.95rem;
    flex-shrink:0;
  }

  .content{
    flex:1;
    padding:32px;
    max-width:1180px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    margin-inline:auto;
  }

  /* ===========================================================
     صفحات الوحدات (Placeholder حاليًا)
     =========================================================== */
  .module-page{ display:none; animation:fadeIn .3s ease; }
  .module-page.active{ display:block; }
  @keyframes fadeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .module-hero{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
    border-radius:var(--radius-lg);
    padding:36px 38px;
    color:#fff;
    margin-bottom:24px;
    position:relative;
    overflow:hidden;
  }
  .module-hero::before{
    content:"";
    position:absolute;
    left:-60px; top:-60px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(184,137,62,.25), transparent 70%);
  }
  .module-hero-num{
    font-family:'Amiri',serif;
    font-size:.85rem;
    color:var(--gold-light);
    letter-spacing:2px;
    margin:0 0 8px;
    position:relative; z-index:1;
  }
  .module-hero h2{
    font-family:'Amiri',serif;
    font-size:1.8rem;
    margin:0 0 10px;
    position:relative; z-index:1;
  }
  .module-hero p{
    font-size:.95rem;
    color:rgba(255,255,255,.82);
    max-width:560px;
    margin:0;
    line-height:1.8;
    position:relative; z-index:1;
  }

  .subsection-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:16px;
  }
  .subsection-card{
    background:var(--paper-card);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow);
    padding:20px;
    transition:border-color .15s, transform .15s;
  }
  .subsection-card:hover{
    border-color:var(--gold);
    transform:translateY(-2px);
  }
  .subsection-icon{
    width:38px; height:38px;
    border-radius:9px;
    background:var(--gold-light);
    color:var(--burgundy-dark);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:12px;
  }
  .subsection-icon svg{ width:19px; height:19px; }
  .subsection-card h3{
    font-size:.95rem;
    font-weight:700;
    color:var(--ink);
    margin:0 0 6px;
  }
  .subsection-card p{
    font-size:.8rem;
    color:var(--ink-soft);
    margin:0 0 10px;
    line-height:1.6;
  }
  .subsection-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:.72rem;
    font-weight:700;
    color:var(--gold);
    background:var(--gold-light);
    padding:3px 11px;
    border-radius:14px;
  }
  .subsection-status.done{ color:var(--ds-success); background:var(--ds-success-bg); }

  /* ===========================================================
     زر فتح القائمة على الشاشات الصغيرة
     =========================================================== */
  .mobile-toggle{
    display:none;
    position:fixed;
    top:14px; right:14px;
    z-index:200;
    width:42px; height:42px;
    border-radius:10px;
    background:var(--navy);
    color:#fff;
    border:none;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-deep);
    cursor:pointer;
  }
  .mobile-toggle svg{ width:20px; height:20px; }
  .sidebar-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.4);
    z-index:99;
  }

  @media (max-width:900px){
    .sidebar{
      transform:translateX(100%);
      transition:transform .25s ease;
    }
    .sidebar.open{ transform:translateX(0); }
    .main-area{ margin-right:0; }
    .mobile-toggle{ display:flex; }
    .sidebar-overlay.show{ display:block; }
    .content{ padding:20px 16px; }
    .topbar{ padding:14px 16px 14px 16px; padding-right:64px; }
    .module-hero{ padding:26px 22px; }
  }

  /* أزرار الإجراءات في سجل الزيارات — مصغّرة وملوّنة */
  .visit-row-actions{ display:flex; gap:4px; white-space:nowrap; align-items:center; }
  .vra-btn{
    display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:6px; padding:4px 7px;
    cursor:pointer; transition:opacity .15s, transform .1s; line-height:1;
  }
  .vra-btn svg{ width:14px; height:14px; }
  .vra-btn:hover{ opacity:.88; transform:translateY(-1px); }
  .vra-edit  { background:#1D5FA3; color:#fff; }
  .vra-edit:hover{ background:#1a5492; }
  .vra-print { background:#2F7D57; color:#fff; }
  .vra-print:hover{ background:#28684a; }
  .vra-delete{ background:var(--ds-danger); color:#fff; }
  .vra-delete:hover{ background:#8e3232; }



/* ===== V24 — عزل الصفحات والتبويبات ومنع تسرب المحتوى المخفي =====
   السبب: بعض قواعد المكونات المتأخرة كانت تستطيع إعادة إظهار عناصر داخل
   وحدات/تبويبات غير نشطة، فتظهر كبطاقات وجداول بيضاء شبحية في كل الصفحات.
   هذا الإصلاح بصري/هيكلي فقط ولا يغيّر أي بيانات أو دوال أو معرّفات. */
@media screen {
  main.content > .module-page:not(.active){
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  main.content > .module-page.active{
    display:block !important;
    visibility:visible !important;
  }
  .module-page .plan-panel:not(.active),
  .module-page .plan-subpanel:not(.active),
  .module-page [data-analysis-panel]:not(.active),
  .module-page [data-works-panel]:not(.active),
  .module-page [data-teachers-panel]:not(.active),
  .module-page [data-visit-panel]:not(.active),
  .module-page [data-dash-panel]:not(.active){
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .module-page.active{
    max-width:100%;
    min-width:0;
    overflow-x:clip;
  }
  .module-page.active > *{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

/* ===========================================================
   V105 — صندوق البريد: شارة الشريط الجانبي + شارات التبويبات +
   قائمة اختيار المستلمين + صفوف الرسائل (وارد/مرسلة/مفضّلة)
   =========================================================== */
.nav-item-badge{
  flex-shrink:0; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#B3261E; color:#fff;
  font-size:.66rem; font-weight:800; line-height:18px; text-align:center;
  font-family:'Tajawal',sans-serif;
}
.mail-tab-badge{
  display:inline-block; min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:#B3261E; color:#fff;
  font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
  margin-right:6px;
}
.mail-recipient-list{
  max-height:180px; overflow-y:auto; border:1px solid var(--line,#E3E6EA);
  border-radius:8px; padding:6px 10px;
}
.mail-recipient-row{
  display:flex; align-items:center; gap:8px; padding:6px 2px;
  border-bottom:1px solid var(--line,#E3E6EA); font-size:.85rem;
}
.mail-recipient-row:last-child{ border-bottom:none; }
.mail-recipient-row input{ width:15px; height:15px; accent-color:var(--gold,#B8893E); cursor:pointer; }
.mail-recipient-row .mail-recipient-role{
  margin-right:auto; font-size:.7rem; color:var(--ink-faint,#8B92A0);
  background:var(--paper,#EEF0F7); border-radius:6px; padding:2px 7px;
}
.mail-attach-picker-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--paper,#EEF0F7); border:1px dashed var(--line,#E3E6EA); border-radius:8px;
  padding:8px 14px; font-family:'Tajawal',sans-serif; font-size:.82rem; font-weight:700;
  color:var(--navy,#16233F); cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.mail-attach-picker-btn:hover{ background:var(--gold-light,#E8D9B5); border-color:var(--gold,#B8893E); }
.mail-attach-picker-btn svg{ width:16px; height:16px; flex-shrink:0; }
.mail-attach-chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--paper,#EEF0F7); border:1px solid var(--line,#E3E6EA); border-radius:7px;
  padding:5px 10px; font-size:.78rem;
}
.mail-attach-chip button{
  background:none; border:none; color:#A33A3A; cursor:pointer; font-size:.9rem; padding:0 2px;
}
.mail-list-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px 6px;
  border-bottom:1px solid var(--line,#E3E6EA); cursor:pointer; transition:background .15s ease;
}
.mail-list-row:hover{ background:var(--paper,#EEF0F7); }
.mail-list-row:last-child{ border-bottom:none; }
.mail-list-row.unread{ background:#FBF6EC; }
.mail-list-row.unread:hover{ background:#F5EDDA; }
.mail-list-avatar{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--navy,#16233F); color:#E8D9B5; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem;
}
.mail-list-main{ flex:1; min-width:0; }
.mail-list-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
.mail-list-from{ font-weight:800; font-size:.86rem; color:var(--ink,#27211D); }
.mail-list-row.unread .mail-list-from{ color:var(--navy,#16233F); }
.mail-list-date{ font-size:.7rem; color:var(--ink-faint,#8B92A0); white-space:nowrap; flex-shrink:0; }
.mail-list-top-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mail-row-forward-btn{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:none; border:none; cursor:pointer;
  color:var(--ink-faint,#8B92A0); transition:background .15s ease, color .15s ease;
}
.mail-row-forward-btn:hover{ background:var(--paper,#EEF0F7); color:var(--navy,#16233F); }
.mail-row-forward-btn svg{ width:14px; height:14px; }
.mail-list-preview{
  font-size:.8rem; color:var(--ink-soft,#5C6470); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; margin-bottom:4px;
}
.mail-list-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mail-list-tag{
  display:inline-flex; align-items:center; gap:3px; font-size:.66rem; font-weight:700;
  padding:2px 7px; border-radius:20px; background:var(--paper,#EEF0F7); color:var(--ink-soft,#5C6470);
}
.mail-list-tag.group{ background:#E9F2FA; color:#2C5F8A; }
.mail-list-tag.star{ background:#FBF0D9; color:#B8893E; }
.mail-list-tag.attach{ background:#F0EDF6; color:#6E5A96; }
.mail-empty-box{ padding:32px 14px; text-align:center; color:var(--ink-faint,#8B92A0); font-size:.86rem; }
/* صندوق البريد خاص بالحساب الفعلي المسجَّل دخوله — يُخفى تمامًا في وضع
   "عرض بيانات مشرف" (view-only-mode) بنفس منطق جرس التنبيهات */
.view-only-mode .nav-item[data-module="mail"]{ display:none !important; }