/* =========================================
   SHADOWCRAFT SIDEBAR - MASTER / REFERENCE
   Location: ROOT /sidebar.css
   Isolation: This file is the single source of truth
   for sidebar visuals. All selectors are namespaced
   with #sc-sidebar to prevent page CSS leakage.
   BLUE LINE FIX: Isolated pseudo-element inside nav-link.
   ========================================= */

/* ---------- Root Variables & Base Isolation ---------- */
#sc-sidebar {
  --sc-bg: #0a0a0f;
  --sc-bg-2: #111118;
  --sc-bg-3: #171722;
  --sc-border: rgba(255,255,255,0.07);
  --sc-border-strong: rgba(255,255,255,0.12);
  --sc-text: #e6e6eb;
  --sc-text-muted: #9aa0ad;
  --sc-text-faint: #6b7280;
  --sc-accent: #3b82f6;
  --sc-accent-2: #60a5fa;
  --sc-hover: rgba(255,255,255,0.06);
  --sc-active: rgba(59,130,246,0.14);
  --sc-width: 280px;
  --sc-collapsed: 76px;

  /* Critical isolation */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--sc-width) !important;
  max-width: var(--sc-width) !important;
  min-width: var(--sc-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1000 !important;
  background: var(--sc-bg) !important;
  background-color: #0a0a0f !important;
  border-right: 1px solid var(--sc-border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  contain: layout style !important;
  isolation: isolate !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Reset everything INSIDE sidebar to prevent page CSS leaking */
#sc-sidebar *,
#sc-sidebar *::before,
#sc-sidebar *::after {
  box-sizing: border-box !important;
}

#sc-sidebar a,
#sc-sidebar button,
#sc-sidebar div,
#sc-sidebar nav,
#sc-sidebar h2,
#sc-sidebar h4,
#sc-sidebar span,
#sc-sidebar p {
  font-family: inherit !important;
}

/* ---------- Scrollbar ---------- */
#sc-sidebar::-webkit-scrollbar {
  width: 4px !important;
}
#sc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 9999px !important;
}

/* ---------- Toggle Button ---------- */
#sc-sidebar .sidebar-toggle {
  position: absolute !important;
  top: 18px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--sc-bg-3) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  color: var(--sc-text-muted) !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
#sc-sidebar .sidebar-toggle:hover {
  background: var(--sc-hover) !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-border-strong) !important;
}
#sc-sidebar .sidebar-toggle i,
#sc-sidebar .sidebar-toggle svg {
  width: 16px !important;
  height: 16px !important;
}

/* Collapsed state (desktop) */
#sc-sidebar.is-collapsed {
  width: var(--sc-collapsed) !important;
  max-width: var(--sc-collapsed) !important;
  min-width: var(--sc-collapsed) !important;
}
#sc-sidebar.is-collapsed .brand-text,
#sc-sidebar.is-collapsed .nav-section-label,
#sc-sidebar.is-collapsed .nav-link span,
#sc-sidebar.is-collapsed .level-card,
#sc-sidebar.is-collapsed .sc-user-copy,
#sc-sidebar.is-collapsed .sc-logout {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
#sc-sidebar.is-collapsed .brand {
  justify-content: center !important;
  padding-right: 0 !important;
}
#sc-sidebar.is-collapsed .nav-link {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#sc-sidebar.is-collapsed .sidebar-toggle {
  right: 50% !important;
  transform: translateX(50%) !important;
}
#sc-sidebar.is-collapsed .sidebar-toggle i {
  transform: rotate(180deg) !important;
}

/* ---------- Brand ---------- */
#sc-sidebar .brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 20px 18px !important;
  padding-right: 48px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#sc-sidebar .brand-logo {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: #111 !important;
  flex-shrink: 0 !important;
}
#sc-sidebar .brand-text {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
#sc-sidebar .brand-text h2 {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--sc-text) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#sc-sidebar .brand-text span {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--sc-text-faint) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* ---------- Nav Sections ---------- */
#sc-sidebar .nav-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 12px 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#sc-sidebar .nav-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--sc-text-faint) !important;
  padding: 8px 10px 6px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* ---------- Divider ---------- */
#sc-sidebar .divider {
  height: 1px !important;
  background: var(--sc-border) !important;
  margin: 4px 16px !important;
  width: calc(100% - 32px) !important;
  flex-shrink: 0 !important;
  border: none !important;
}

/* ---------- Nav Links - CRITICAL BLUE LINE FIX ---------- */
#sc-sidebar .nav-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: var(--sc-text-muted) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout style paint !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  /* Ensure pseudo cannot escape */
  clip-path: inset(0 round 10px) !important;
}

#sc-sidebar .nav-link i,
#sc-sidebar .nav-link svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
  stroke-width: 1.9 !important;
}

#sc-sidebar .nav-link span {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hover */
#sc-sidebar .nav-link:hover {
  background: var(--sc-hover) !important;
  color: var(--sc-text) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Active */
#sc-sidebar .nav-link.active,
#sc-sidebar .nav-link.is-active,
#sc-sidebar .nav-link[aria-current="page"] {
  background: var(--sc-active) !important;
  color: #dbeafe !important;
  border-color: rgba(59,130,246,0.18) !important;
}

#sc-sidebar .nav-link.active i,
#sc-sidebar .nav-link.is-active i,
#sc-sidebar .nav-link[aria-current="page"] i {
  color: var(--sc-accent-2) !important;
}

/* ---------- BLUE UNDERLINE - ISOLATED PSEUDO ---------- */
#sc-sidebar .nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  width: 0 !important;
  height: 2px !important;
  max-width: calc(100% - 32px) !important;
  background: var(--sc-accent) !important;
  background-color: #3b82f6 !important;
  border-radius: 9999px !important;
  transform: translateX(-50%) !important;
  transition: width 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  will-change: width !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Center-out expansion on hover */
#sc-sidebar .nav-link:hover::after {
  width: 56% !important;
}

/* Active stays visible - center out */
#sc-sidebar .nav-link.active::after,
#sc-sidebar .nav-link.is-active::after,
#sc-sidebar .nav-link[aria-current="page"]::after {
  width: 72% !important;
}

/* Ensure no external page CSS can override with generic a::after */
#sc-sidebar .nav-link::before {
  content: none !important;
}

/* ---------- Bottom Section ---------- */
#sc-sidebar .sidebar-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px 12px 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  background: linear-gradient(to top, var(--sc-bg) 70%, transparent) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
}

/* Level Card */
#sc-sidebar .level-card {
  background: linear-gradient(135deg, #1a1a28 0%, #15151f 100%) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 14px !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#sc-sidebar .level-card h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sc-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#sc-sidebar .level-card p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--sc-text-muted) !important;
  margin: 0 !important;
}

#sc-sidebar .level-card .get-started {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sc-accent-2) !important;
  text-decoration: none !important;
  margin-top: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s !important;
}

#sc-sidebar .level-card .get-started:hover {
  color: #93c5fd !important;
}

/* ---------- Account / Profile ---------- */
#sc-sidebar .sidebar-account {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  background: var(--sc-bg-3) !important;
  border: 1px solid var(--sc-border) !important;
  text-decoration: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#sc-sidebar .sidebar-account:hover {
  background: #1e1e2a !important;
  border-color: var(--sc-border-strong) !important;
}

#sc-sidebar .sc-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  text-transform: uppercase !important;
}

#sc-sidebar .sc-user-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}

#sc-sidebar .sc-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sc-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

#sc-sidebar .sc-user-meta {
  font-size: 11px !important;
  color: var(--sc-text-faint) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
}

#sc-sidebar .sc-logout,
#sc-sidebar .sidebar-account i,
#sc-sidebar .sidebar-account svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  color: var(--sc-text-faint) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Login state */
#sc-sidebar .sidebar-account.login .sc-avatar {
  background: #1f1f2e !important;
  border: 1px dashed var(--sc-border-strong) !important;
  color: var(--sc-text-muted) !important;
}

/* ---------- Mobile Overlay ---------- */
#sc-sidebar-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

#sc-sidebar-overlay.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  #sc-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 12px 0 40px rgba(0,0,0,0.5) !important;
  }
  #sc-sidebar.is-mobile-open {
    transform: translateX(0) !important;
  }
  /* Body offset for main content - handled by layout */
  body {
    --sc-sidebar-offset: 0px !important;
  }
  #sc-sidebar .sidebar-toggle {
    display: none !important;
  }
}

/* Desktop offset for content */
@media (min-width: 1025px) {
  body {
    padding-left: var(--sc-sidebar-width, 280px) !important;
  }
  body.sc-sidebar-collapsed {
    padding-left: var(--sc-collapsed-width, 76px) !important;
  }
  #sc-sidebar {
    transition: width 0.28s ease, min-width 0.28s ease, max-width 0.28s ease !important;
  }
}

/* ---------- Main content wrapper isolation ---------- */
/* Ensure page content never gets blue line */
main, .main-content, #main, .content, .page {
  position: relative !important;
  isolation: isolate;
}

/* ---------- Mobile menu button (injected via JS if missing) ---------- */
.sc-mobile-menu-btn {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 998 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #0a0a0f !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: white !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
@media (max-width: 1024px) {
  .sc-mobile-menu-btn {
    display: flex !important;
  }
}

/* ---------- Fix generic page CSS leaking into sidebar ---------- */
/* Some pages use generic a:hover underline - kill for sidebar */
#sc-sidebar a:hover {
  text-decoration: none !important;
}
#sc-sidebar a::after {
  /* only nav-link should have after, others none - but we already scoped nav-link::after */
}

/* Prevent global img styles */
#sc-sidebar img {
  max-width: none !important;
}

/* Prevent global * { transition: all } from breaking blue line */
#sc-sidebar .nav-link::after {
  transition-property: width !important;
}