/* ============================================
   🔥 PREMIUM DESIGN SYSTEM
   ============================================ */
:root {
  --brand-orange: #f97316;
  --brand-orange-soft: #fff7ed;
  --brand-orange-light: rgba(249,115,22,0.08);
  --brand-orange-mid: rgba(249,115,22,0.15);

  --surface-primary: #ffffff;
  --surface-secondary: #fff9f4;
  --surface-glass: rgba(255,255,255,0.7);

  --text-primary: #1a1f2e;
  --text-muted: #6b7280;

  --border-soft: rgba(249,115,22,0.10);

  --shadow-soft: 0 4px 20px rgba(249,115,22,0.06);
  --shadow-medium: 0 8px 28px rgba(249,115,22,0.08);
  --shadow-strong: 0 12px 40px rgba(249,115,22,0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --transition-smooth: all .25s cubic-bezier(.2,.9,.3,1);
}

/* ============================================
   NAVBAR (PREMIUM GLASS)
   ============================================ */
.layout-navbar,
#layout-navbar {
  z-index: 1030 !important;
  position: sticky !important;
  top: 0;

  background: var(--surface-glass) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);

  transition: var(--transition-smooth);
}

body.scrolled .layout-navbar {
  box-shadow: var(--shadow-medium);
  background: rgba(255,255,255,0.85);
}

/* dropdown layering */
#rtl-nav-user .dropdown-menu,
nav .dropdown-menu {
  z-index: 1040 !important;
}

/* header layout */
#rtl-navbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* hover interactions */
.layout-navbar .nav-link:hover {
  color: var(--brand-orange);
}

.layout-navbar .bx {
  transition: var(--transition-smooth);
}

.layout-navbar .bx:hover {
  color: var(--brand-orange);
  transform: translateY(-1px);
}

/* ============================================
   MOBILE MENU
   ============================================ */
@media (max-width: 1199.98px) {
  #layout-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    transform: translateX(110%);
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
    z-index: 1050;
    height: 100vh;
    overflow-y: auto;
    background: rgba(15, 25, 95, 0.55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-right: 1px solid rgba(100,181,246,0.18);
    box-shadow: 0 6px 30px rgba(0,0,0,0.35), 0 0 40px rgba(26,35,126,0.25);
  }

  body.menu-open #layout-menu {
    transform: translateX(0);
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(30,20,10,0.38);
    opacity: 0;
    transition: opacity .18s ease;
  }

  body.menu-open .menu-backdrop {
    opacity: 1;
  }
}

/* ============================================
   DESKTOP COLLAPSED
   ============================================ */
#layout-menu.menu-collapsed {
  width: 72px !important;
  transition: var(--transition-smooth);
}

#layout-menu.menu-collapsed .menu-text,
#layout-menu.menu-collapsed .menu-label,
#layout-menu.menu-collapsed [data-i18n] {
  display: none !important;
}

/* ============================================
   PAGE BACKGROUND SYNC
   ============================================ */
.layout-page {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fff9f4 100%
  );
}

/* Editorial Sanctuary navbar synchronization */
.layout-navbar,
#layout-navbar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: none !important;
  box-shadow: 0 12px 32px rgba(25, 28, 30, 0.06);
  border-radius: 0 0 16px 16px;
}

.app-header-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}