/**
 * app-top-nav + موبايل فقط (max-width: 991px) — عبر media في Blade
 * - إخفاء الشريط الأفقي بالكامل
 * - زر ثلاث خطوط (يُرى هنا فقط) + ستايل الدرج ≈ سطر الميني
 * الديسكتوب: الملف غير مُفعّل — لا تغيير على الشريط/الديسكتوب
 */
@media (max-width: 991px) {
  /* إخفاء كامل للسطر الأفقي على الموبايل */
  body.app-top-nav #bb-main-horizontal-nav {
    display: none !important;
  }

  /* زر القائمة: يفوق tw-hidden — يظهر فقط لأن هذا الملف يُحمّل في الشاشة الضيقة فقط */
  .bb-topnav-m-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-inline-end: 0.25rem;
    flex-shrink: 0;
  }

  /* طبقة أعلى من شريط الهيدر (1030) دون تغيير min-width:992+ */
  body.app-top-nav .overlay {
    z-index: 1048 !important;
  }

  body.app-top-nav .side-bar {
    z-index: 1050 !important;
    top: 3.5rem;
    height: calc(100dvh - 3.5rem);
    min-height: 0;
    max-width: min(22rem, 100vw - 1.5rem);
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 1.25rem 1.25rem 0;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px color-mix(in srgb, var(--bb-nav-drawer-border, #cbd5e1) 100%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 5%, #ffffff) 0%,
        #f8fafc 2.5rem
      ),
      #f8fafc;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.app-top-nav #main-sidebar.side-bar,
  body.app-top-nav .side-bar {
    --bb-nav-drawer-border: #cbd5e1;
    --bb-nav-drawer-accent: #6366f1;
  }

  body.custom-theme.app-top-nav .side-bar {
    --bb-nav-drawer-accent: var(--theme-color, #6366f1);
    --bb-nav-drawer-border: color-mix(in srgb, var(--theme-color, #6366f1) 30%, #e2e8f0);
  }

  html[dir='rtl'] body.app-top-nav .side-bar {
    left: auto !important;
    right: -100% !important;
    border-radius: 1.25rem 0 0 1.25rem;
  }

  html[dir='rtl'] body.app-top-nav .side-bar.small-view-side-active {
    right: 0 !important;
    left: auto !important;
  }

  body.app-top-nav .side-bar .sidebar-brand-link {
    border-radius: 0 1rem 0 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 20%, #e2e8f0);
  }

  html[dir='rtl'] body.app-top-nav .side-bar .sidebar-brand-link {
    border-radius: 1rem 0 0 0;
  }

  /* منطقة التمرير: نفس تركيز السطر الناعم */
  body.app-top-nav .side-bar #side-bar {
    background: transparent;
    border: 0;
    --tw-border-opacity: 0;
  }

  /* عناصر رئيسية: كروت قريبة من سعر الميني الأفقية */
  body.app-top-nav .side-bar #side-bar > a,
  body.app-top-nav .side-bar #side-bar > div > a.drop_down {
    min-height: 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 12%, #e2e8f0) !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    color: #0f172a !important;
    font-weight: 600 !important;
  }

  body.app-top-nav .side-bar #side-bar > a:hover,
  body.app-top-nav .side-bar #side-bar > div > a.drop_down:hover {
    background: color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 6%, #ffffff) !important;
  }

  body.app-top-nav .side-bar #side-bar .chiled {
    background: color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 3%, #f1f5f9) !important;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 8%, #e2e8f0) !important;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.35rem;
  }

  /* فرع: روابط داخلية أنعم */
  body.app-top-nav .side-bar #side-bar .chiled a {
    min-height: 2.4rem;
    font-weight: 500 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #334155 !important;
  }

  body.app-top-nav .side-bar #side-bar .chiled a:hover {
    background: color-mix(in srgb, var(--bb-nav-drawer-accent, #6366f1) 8%, #ffffff) !important;
  }

  body.app-top-nav .side-bar #side-bar .chiled > div > a.drop_down {
    min-height: 2.5rem;
    border-radius: 0.5rem;
    font-weight: 600 !important;
  }
}