/* =====================================================================
   DOCS THEME — لمسة زجاجية فاخرة للياوت المعلم (front-doc/teacher)
   هذا اللياوت لا يحمّل premium-theme.css، فنعرّف التوكنات هنا.
   RTL-first، يدعم الوضع الفاتح والداكن (html.dark-style). بلا تغيير منطق.
   ===================================================================== */

:root {
  --brand:        #D46E2A;
  --brand-rgb:    212, 110, 42;
  --brand-hover:  #B85B21;
  --brand-light:  #F2B58C;
  --brand-soft:   rgba(212, 110, 42, .10);

  --glass-menu:   rgba(255, 255, 255, .72);
  --glass-nav:    rgba(255, 255, 255, .68);
  --glass-card:   rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-blur:   16px;

  --dt-text:      #1F2937;
  --dt-text-2:    #6B7280;
  --dt-line:      #E7EAF0;
}
html.dark-style {
  --glass-menu:   rgba(38, 42, 60, .68);
  --glass-nav:    rgba(38, 42, 60, .64);
  --glass-card:   rgba(45, 50, 70, .62);
  --glass-border: rgba(255, 255, 255, .08);
  --dt-text:      #E4E6F1;
  --dt-text-2:    rgba(228, 230, 241, .6);
  --dt-line:      rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------
   1) القائمة الجانبية اليمنى — تطوير كبير + زجاج
   --------------------------------------------------------------------- */
#layout-menu.menu {
  background: var(--glass-menu) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-inline-start: 1px solid var(--glass-border);
  box-shadow: -12px 0 40px rgba(16, 24, 40, .06);
}

/* ثيم Semi Dark — رَيل داكن على صفحة فاتحة.
   القلب محصور بالقائمة لا بـ:root، وإلّا انقلب معها النافبار ولوحة الأوامر
   وهي على صفحة فاتحة. التوكنات ترث للأبناء فيكفي إعلانها على العنصر.
   سمة data-theme يكتبها config.js. */
html[data-theme="theme-semi-dark"] #layout-menu.menu {
  --glass-menu:   rgba(36, 39, 69, .92);
  --glass-border: rgba(255, 255, 255, .08);
  --dt-text:      #E4E6F1;
  --dt-text-2:    rgba(228, 230, 241, .6);
  --dt-line:      rgba(255, 255, 255, .08);
}

/* شارة بطاقة المستخدم وحدها تحتاج تفتيحاً: --brand-hover داكن ولا يُقرأ على
   الرَيل. العنصر النشط بخير — تعبئة برتقالية ممتلئة بنصّ أبيض. */
html[data-theme="theme-semi-dark"] #layout-menu.menu .user-avatar-section .badge {
  color: var(--brand-light) !important;
}

/* بطاقة المستخدم أعلى القائمة */
#layout-menu .user-avatar-section {
  margin: .75rem .8rem 1rem; padding: 1.1rem .8rem;
  border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(212,110,42,.12), rgba(212,110,42,.02));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
#layout-menu .user-avatar-section img {
  width: 72px !important; height: 72px !important; border-radius: 50% !important;
  object-fit: cover; padding: 3px; background: #fff;
  box-shadow: 0 0 0 3px transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--brand), var(--brand-light));
  background-origin: border-box; background-clip: content-box, border-box;
  border: 3px solid transparent;
  transition: transform .25s ease;
}
#layout-menu .user-avatar-section a:hover img { transform: scale(1.05); }
#layout-menu .user-avatar-section .badge {
  background: rgba(212, 110, 42, .14) !important; color: var(--brand-hover) !important;
  font-weight: 700; border-radius: 999px; padding: .35rem .8rem;
}

/* عناصر القائمة — أقراص عصرية + حدّ خفيف أسفل كل رابط */
#layout-menu .menu-item { margin: 0; }
#layout-menu .menu-item.border-bottom { border-bottom: 0 !important; }
#layout-menu .menu-inner > .menu-item > .menu-link {
  border-radius: 10px; margin: 2px .6rem; padding: .6rem .85rem;
  color: var(--dt-text); font-weight: 600;
  border-bottom: 1px solid var(--dt-line);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* لا حدّ أسفل العنصر النشط (له خلفية ممتلئة) */
#layout-menu .menu-item.active > .menu-link { border-bottom-color: transparent; }
#layout-menu .menu-link .menu-icon {
  color: var(--brand); font-size: 1.15rem; margin-inline-end: .6rem;
  transition: color .2s ease, transform .2s ease;
}
#layout-menu .menu-inner > .menu-item > .menu-link:hover {
  background: var(--brand-soft); transform: translateX(-3px);
}
#layout-menu .menu-inner > .menu-item > .menu-link:hover .menu-icon { transform: scale(1.12); }

/* العنصر النشط: قسم التوحيد «24» آخر custom-overrides.css هو المرجع الوحيد
   لكل البوابات — النسخة الصلبة (تعبئة برتقالية بنص أبيض) التي كانت هنا
   صارت مقهورة بالكامل فحُذفت (كانت تبهت النص حيث لا يقهرها أحد). */

/* عناوين الأقسام */
#layout-menu .menu-header {
  color: var(--dt-text-2) !important; font-weight: 800; letter-spacing: .3px;
  padding-inline: 1rem; opacity: .9;
}
#layout-menu .menu-header.text-primary { color: var(--brand-hover) !important; }

/* زر «إضافة مقرر» — مميّز */
#layout-menu .menu-link.text-success {
  color: #fff !important;
  background: linear-gradient(135deg, #28A76F, #1f875a) !important;
  border-radius: 12px; margin: .4rem .6rem;
  box-shadow: 0 8px 18px rgba(40, 167, 111, .3);
}
#layout-menu .menu-link.text-success .menu-icon { color: #fff !important; }
#layout-menu .menu-link.text-success:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* مسطرة تمرير رفيعة */
#layout-menu .ps__thumb-y { background: rgba(var(--brand-rgb), .4); }

/* حالة الطيّ (أيقونات فقط) — سطح المكتب فقط (≥1200px).
   على الجوال القائمة offcanvas وتُعرض كاملةً بنصوصها. */
@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link > div { display: none; }
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link .menu-icon { margin-inline-end: 0; }
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item > .menu-link {
    justify-content: center; border-bottom-color: transparent;
  }
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .user-avatar-section {
    margin: .5rem .35rem; padding: .55rem .3rem;
  }
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .user-avatar-section img { width: 42px !important; height: 42px !important; }
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .user-avatar-section .badge,
  .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-header:not(:empty) { display: none; }
}

/* انتقال ناعم لعرض المحتوى مع الطيّ */
.layout-page, .content-wrapper { transition: margin .25s ease, padding .25s ease; }

/* إصلاح sticky: overflow:hidden على layout-wrapper (وضع offcanvas) يكسر
   position:sticky لكل الأحفاد — clip يقصّ بنفس السلوك دون كسر sticky */
.layout-menu-offcanvas .layout-wrapper,
.layout-menu-fixed-offcanvas .layout-wrapper { overflow: clip !important; }

/* تقليل التباعد الخارجي على الشاشات الصغيرة (هوامش/حشوات مهدرة) */
@media (max-width: 767.98px) {
  .content-wrapper > .container-fluid,
  .content-wrapper .container-fluid { padding-inline: .55rem; }
  .content-wrapper .card { border-radius: 12px; }
  .content-wrapper .card > .card-body { padding: .8rem; }
}

/* ---------------------------------------------------------------------
   2) لمسة زجاجية عامة — الناف بار
   --------------------------------------------------------------------- */
.layout-navbar .navbar,
.layout-navbar.navbar-detached {
  background: var(--glass-nav) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .05);
}

/* أيقونة فتح القائمة (الهامبرغر) — أثخن/بولد، بلون النص (داكن بالفاتح/فاتح بالداكن) */
.layout-menu-toggle .ti-menu-2 {
  -webkit-text-stroke: 0.9px currentColor;
  font-size: 1.55rem;
  color: var(--dt-text);
}
/* أيقونة مبدّل السمة (فاتح/داكن) — نفس لون أيقونة فتح القائمة */
.dropdown-style-switcher > .nav-link .ti { color: var(--dt-text); }

/* لوجو الناف بار — داخل صندوق الشريط تماماً.
   ⚠️ بلا هوامش رأسية سالبة: التجاوز كان يُقصّ عند overflow:hidden على
      .app-brand-link تحت 992px (nav-icons.css). */
.layout-navbar .app-brand-link img {
  height: 48px !important;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
@media (max-width: 575.98px) {
  .layout-navbar .app-brand-link img { height: 38px !important; max-width: 150px; }
}

/* ---------------------------------------------------------------------
   3) لمسة زجاجية عامة — البطاقات
   --------------------------------------------------------------------- */
/* ملاحظة: لا نستخدم backdrop-filter هنا — لأنه يُنشئ containing block
   يُزيح مواضع القوائم المنسدلة (Popper). نكتفي بخلفية ناعمة + ظلّ. */
.content-wrapper .card {
  background: var(--glass-card);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}
html.dark-style .content-wrapper .card { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }

/* الأكورديون داخل البطاقات يبقى شفّافاً ليظهر الزجاج */
.content-wrapper .card .accordion-item { background: transparent; }

/* =====================================================================
   COMMAND PALETTE (Ctrl+K)
   ===================================================================== */
.cmdk-open { overflow: hidden; }
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 20000; display: none;
  align-items: flex-start; justify-content: center; padding-top: 12vh;
  background: rgba(16, 24, 40, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cmdk-overlay.show { display: flex; }
.cmdk-box {
  width: min(620px, 92vw); max-height: 70vh; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.82));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 70px rgba(16,24,40,.35);
  animation: cmdk-in .18s ease both;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--dt-line, #E7EAF0); }
.cmdk-ico { color: var(--brand, #D46E2A); font-size: 1.2rem; }
.cmdk-input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: var(--dt-text, #1F2937); min-width: 0; }
.cmdk-input::placeholder { color: var(--dt-text-2, #6B7280); }
.cmdk-esc { font-size: .7rem; background: rgba(0,0,0,.06); border-radius: 6px; padding: .1rem .4rem; color: var(--dt-text-2, #6B7280); }
.cmdk-list { overflow-y: auto; padding: .5rem; }
.cmdk-item {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  padding: .65rem .8rem; border-radius: 12px; color: var(--dt-text, #1F2937); font-weight: 600;
}
.cmdk-item > i:first-child {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A);
}
.cmdk-item span { flex: 1; }
.cmdk-enter { color: var(--dt-text-2, #6B7280); opacity: 0; font-size: .95rem; }
.cmdk-item.active { background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; }
.cmdk-item.active > i:first-child { background: rgba(255,255,255,.22); color: #fff; }
.cmdk-item.active .cmdk-enter { opacity: 1; color: #fff; }
.cmdk-empty { text-align: center; color: var(--dt-text-2, #6B7280); padding: 1.6rem; font-weight: 600; }
.cmdk-foot { padding: .55rem 1.1rem; border-top: 1px solid var(--dt-line, #E7EAF0); color: var(--dt-text-2, #6B7280); font-size: .78rem; }
.cmdk-foot kbd { background: rgba(0,0,0,.06); border-radius: 5px; padding: .05rem .35rem; }

html.dark-style .cmdk-box { background: linear-gradient(180deg, rgba(45,50,70,.92), rgba(38,42,60,.86)); border-color: rgba(255,255,255,.1); }
html.dark-style .cmdk-input { color: #E4E6F1; }
html.dark-style .cmdk-item { color: #E4E6F1; }
html.dark-style .cmdk-esc, html.dark-style .cmdk-foot kbd { background: rgba(255,255,255,.08); }

/* Command Palette — مجموعات قابلة للطيّ + عدّاد */
.cmdk-count { font-size: .75rem; color: var(--dt-text-2, #6B7280); font-weight: 700; white-space: nowrap; }
.cmdk-group-head {
  display: flex; align-items: center; gap: .45rem; cursor: pointer; user-select: none;
  padding: .5rem .8rem .25rem; font-size: .72rem; font-weight: 800; color: var(--dt-text-2, #6B7280);
}
.cmdk-group-head:hover { color: var(--brand, #D46E2A); }
.cmdk-group-head > i { font-size: .95rem; transition: transform .15s ease; }
.cmdk-group-head span { flex: 1; }
.cmdk-group-head b { background: rgba(0,0,0,.06); border-radius: 999px; padding: .05rem .5rem; font-size: .7rem; color: var(--dt-text-2, #6B7280); font-weight: 800; }
html.dark-style .cmdk-group-head b { background: rgba(255,255,255,.1); }