/* Riwaq v7.6.52 — إطار شاشة محكوم وهوية إدارة أحادية اللون.
   هذا الملف هو طبقة الحسم الأخيرة: لا يُسمح لأي محتوى بدفع الشريط خارج الشاشة. */

html,
body{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  overflow-x:hidden!important;
}

#appView.app{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow-x:hidden!important;
}

#appView.app > .main,
#appView.app > .sidebar{
  min-width:0!important;
  max-width:100%!important;
}

#appView.app > .main{
  width:100%!important;
  overflow-x:hidden!important;
}

#appView.app > .main > .topbar,
#appView.app > .main > .page,
#appView.app > .main > .firebase-health-banner{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

#appView .page > *,
#appView .topbar > *,
#appView .panel,
#appView .card,
#appView .stat,
#appView .admin-command-center,
#appView .admin-category-page,

#appView .topbar-identity,
#appView .top-actions,
#appView .mode-switcher{
  min-width:0!important;
}

#appView .topbar-identity strong,
#appView .topbar-identity small,
#appView .nav-btn span:not(.nav-icon){
  overflow:hidden;
  text-overflow:ellipsis;
}

#appView .table-shell,
#appView .table-wrap,
#appView .calendar-wrap,
#appView .admin-settings-body,
#appView .course-list-shell{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
}

/*
 * في سطح المكتب نحدد مناطق الشبكة بأسماء فيزيائية واضحة.
 * هذا يلغي اعتماد موضع الشريط على اتجاه RTL أو ترتيب قواعد CSS القديمة.
 */
@media (min-width:1181px){
  #appView.app{
    display:grid!important;
    direction:ltr!important;
    grid-template-columns:minmax(0,1fr) 248px!important;
    grid-template-areas:"main sidebar"!important;
    align-items:start!important;
  }

  #appView.app > .sidebar{
    grid-area:sidebar!important;
    direction:rtl!important;
    width:248px!important;
    min-width:248px!important;
    max-width:248px!important;
    inset:auto!important;
    top:0!important;
    right:auto!important;
    transform:none!important;
  }

  #appView.app > .main{
    grid-area:main!important;
    direction:rtl!important;
  }

  body[data-workspace-mode="admin"] #appView.app{
    grid-template-columns:minmax(0,1fr) 220px!important;
  }

  body[data-workspace-mode="admin"] #appView.app > .sidebar{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
}

/* على الأجهزة اللوحية والجوال يبقى الشريط درجًا داخل حدود الشاشة. */
@media (max-width:1180px){
  #appView.app{
    display:block!important;
  }

  #appView.app > .sidebar{
    direction:rtl!important;
    width:min(330px,88vw)!important;
    min-width:0!important;
    max-width:88vw!important;
    right:0!important;
    left:auto!important;
  }

  #appView.app > .main{
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-width:640px){
  #appView.app > .sidebar{
    width:min(340px,92vw)!important;
    max-width:92vw!important;
  }
}

/* ===== v7.6.60: هوية مركز الإدارة صارت مشتقّة من لوحة الحساب، لا مكتوبة بالأرقام =====
   العطل الذي أبلغ عنه المستخدم: «صفحة المظهر لا تعمل في حساب الإدارة». والسبب لم يكن
   في نافذة المظهر ولا في الحفظ — بل في هذا الملف نفسه. كان يفرض عشرين متغيّرًا لونيًا
   بـ !important على body[data-workspace-mode="admin"]، ومنها --primary و--primary-strong
   و--primary-soft و--sidebar و--bg. فأيًّا كانت اللوحة التي يختارها، يكتب المظهر قيمته
   في :root ثم يدهسها هذا الملف بالكحلي — بما في ذلك الوضع الداكن، لأن --bg كان مثبتًا
   على #f3f6fa بـ !important فوق قاعدة body[data-mode="dark"].
   الدرس المكرر في هذا المشروع: حين لا يعمل شيء، ابحث عمّن يملك الخاصية لا عمّن يكتبها
   آخرًا. والمالك كان هنا.
   الحلّ يحفظ ما أرادته v7.6.49 — سطح إداري أهدأ من مساحة الطالب، وشريط جانبي غامق،
   والأحمر للعاجل وحده — لكنه يعبّر عنه بلغة اللوحة: color-mix فوق var(--primary) بدل
   رقم ست عشري. فالمظهر يعمل في الإدارة كما يعمل في مساحة الطالب، والوضع الداكن معه. */

body[data-workspace-mode="admin"]{
  --sidebar:var(--primary-strong);
  --accent:color-mix(in srgb,var(--primary) 62%,var(--muted));
  background:var(--bg);
}

/* السطح الإداري أهدأ: قماشة تميل قليلًا نحو لون اللوحة بدل الأبيض الصريح.
   والوضع الداكن مستثنى صراحةً — قماشته يملكها body[data-mode="dark"] وحده. */
body[data-workspace-mode="admin"]:not([data-mode="dark"]){
  --bg:color-mix(in srgb,var(--primary) 5%,#f7f9fb);
  --panel:#ffffff;
  --panel2:color-mix(in srgb,var(--primary) 4%,#ffffff);
  --line:color-mix(in srgb,var(--primary) 14%,#dfe4ea);
}

body[data-workspace-mode="admin"] #appView.app > .main{
  background:var(--bg);
}

body[data-workspace-mode="admin"] #appView .page{
  background:linear-gradient(180deg,var(--panel2) 0%,var(--bg) 100%);
}

body[data-workspace-mode="admin"] #appView .topbar{
  border-top:0;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 6px 22px color-mix(in srgb,var(--primary) 9%,transparent);
}

body[data-workspace-mode="admin"] #appView .topbar-brand-divider,
body[data-workspace-mode="admin"] #appView .admin-category-title > span,
body[data-workspace-mode="admin"] #appView .admin-course-head__copy > span,
body[data-workspace-mode="admin"] #appView .admin-console-heading > span{
  color:var(--primary);
}

body[data-workspace-mode="admin"] #appView .mode-switcher,
body[data-workspace-mode="admin"] #appView .section-badge{
  border-color:var(--line);
  background:var(--primary-soft);
  color:var(--primary-strong);
}

body[data-workspace-mode="admin"] #appView .mode-switcher button{
  color:var(--muted);
}

body[data-workspace-mode="admin"] #appView .mode-switcher button.active{
  background:var(--primary-strong);
  color:#fff;
  box-shadow:none;
}

body[data-workspace-mode="admin"] #appView .sidebar{
  background:linear-gradient(180deg,var(--primary-strong) 0%,color-mix(in srgb,var(--primary-strong) 82%,#000) 100%);
  border-inline-start:0;
  box-shadow:-12px 0 34px color-mix(in srgb,var(--primary-strong) 12%,transparent);
}

body[data-workspace-mode="admin"] #appView .nav-btn{
  color:rgba(255,255,255,.74);
}

body[data-workspace-mode="admin"] #appView .nav-btn:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
}

body[data-workspace-mode="admin"] #appView .nav-btn.active{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--primary) 45%,#fff);
}

body[data-workspace-mode="admin"] #appView .nav-btn.active .nav-icon{
  background:var(--primary-soft);
  color:var(--primary-strong);
}

body[data-workspace-mode="admin"] #appView .admin-console-bar{
  color:#fff;
  background:linear-gradient(115deg,var(--primary-strong),var(--primary));
  box-shadow:0 13px 30px color-mix(in srgb,var(--primary) 22%,transparent);
}

body[data-workspace-mode="admin"] #appView .admin-console-title > i{
  background:color-mix(in srgb,var(--primary) 30%,#fff);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 18%,transparent);
}

body[data-workspace-mode="admin"] #appView .admin-console-title span{
  color:color-mix(in srgb,var(--primary-soft) 80%,#fff);
}

body[data-workspace-mode="admin"] #appView .admin-console-title p{
  color:rgba(255,255,255,.7);
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-row,
body[data-workspace-mode="admin"] #appView .admin-kpi-rail,
body[data-workspace-mode="admin"] #appView .admin-course-head,
body[data-workspace-mode="admin"] #appView .modern-course-group,
body[data-workspace-mode="admin"] #appView .admin-settings-body{
  background:var(--panel);
  border-color:var(--line);
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.warn .attention-count,
body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.info .attention-count{
  background:var(--primary-soft);
  border-color:color-mix(in srgb,var(--primary) 25%,var(--line));
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.warn .attention-count b,
body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.info .attention-count b{
  color:var(--primary);
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-clear{
  border-color:color-mix(in srgb,var(--primary) 25%,var(--line));
  background:var(--primary-soft);
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-clear > span{
  background:var(--primary);
}

body[data-workspace-mode="admin"] #appView .official-refresh-log.warn{
  background:var(--primary-soft);
  color:var(--primary-strong);
}

/* لا يُستخدم اللون الأحمر إلا للعدد أو الحالة العاجلة — وهذا يبقى ثابتًا عبر اللوحات،
   لأن الخطر ليس تفضيلًا في الذوق. */
body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.bad .attention-count{
  background:color-mix(in srgb,var(--danger) 8%,var(--panel));
  border-color:color-mix(in srgb,var(--danger) 30%,var(--line));
}

body[data-workspace-mode="admin"] #appView .admin-attention .attention-row.bad .attention-count b{
  color:var(--danger);
}

body[data-workspace-mode="admin"] #appView .nav-count,
body[data-workspace-mode="admin"] #appView .count{
  color:#fff;
  background:var(--danger);
}

@media (max-width:760px){
  body[data-workspace-mode="admin"] #appView .admin-attention .attention-grid{
    grid-template-columns:1fr;
  }
}