/* ===========================================================
   SIDEBAR PATTERN A — Dark Premium 黑金风 (Mz 2026-05-29 v2)
   Fix 5 issues: Tabler webfont / close-btn row / Log Out plain /
                 active state / tighter spacing
   =========================================================== */

/* Load Tabler icons webfont (provides ti-* classes) */
@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.24.0/dist/tabler-icons.min.css");

#drawer {
  background: #0a0a0f !important;
  color: rgba(255, 255, 255, 0.55) !important;
  width: 280px !important;
  max-width: 280px !important;
  border-right: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

/* ── Header: Logo + close button SAME ROW ──────── */
#drawer > .flex.justify-between.items-center,
#drawer > .flex.justify-between.items-center.mb-4 {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#drawer > .flex.justify-between.items-center img,
#drawer > .flex.justify-between.items-center.mb-4 img {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

#drawer #btn-close-drawer {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
#drawer #btn-close-drawer:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Group title ─────────────────────────────────── */
#drawer .drawer-title {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.2) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 14px 6px !important;
  margin: 0 !important;
}

/* ── Nav items — TIGHTER spacing (10px 14px) ────── */
#drawer .drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer !important;
  border-left: 2px solid transparent !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  height: auto !important;
  font-size: 13px !important;
  width: auto !important;
}

/* Icon — Tabler webfont OR existing SVG OR emoji */
#drawer .drawer-item i.ti {
  font-size: 16px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#drawer .drawer-item svg,
#drawer .drawer-item > span:first-child:not(.sidebar-badge) img {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  stroke: rgba(255, 255, 255, 0.35) !important;
}
#drawer .drawer-item .sb-emoji {
  font-size: 16px !important;
  line-height: 1 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#drawer .drawer-item > span:not(.sidebar-badge):not(.sb-emoji) {
  flex: 1 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#drawer .drawer-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Active state — gold left bar + gradient bg ─── */
#drawer .drawer-item.active {
  border-left: 2px solid #f5a623 !important;
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.12), transparent) !important;
  border-radius: 0 8px 8px 0 !important;
}
#drawer .drawer-item.active i.ti,
#drawer .drawer-item.active svg,
#drawer .drawer-item.active > span:first-child:not(.sidebar-badge) img {
  color: #f5a623 !important;
  stroke: #f5a623 !important;
}
#drawer .drawer-item.active > span:not(.sidebar-badge):not(.sb-emoji) {
  color: #f5a623 !important;
  font-weight: 500 !important;
}

/* ── Badge (HOT / NEW / etc) ─────────────────────── */
#drawer .drawer-item .sidebar-badge {
  background: rgba(245, 166, 35, 0.15) !important;
  color: #f5a623 !important;
  border: 0.5px solid rgba(245, 166, 35, 0.35) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  margin-left: auto !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#drawer .drawer-item .sidebar-badge.new {
  background: rgba(34, 211, 238, 0.15) !important;
  color: #22d3ee !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
}
#drawer .drawer-item .sidebar-badge.red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* ── Divider line between groups ─────────────────── */
#drawer .drawer-divider {
  height: 0.5px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  margin: 6px 14px !important;
  border: none !important;
}

/* ── Log Out — PLAIN row, no border/bg (issue #3) ── */
#drawer #drawer-logout,
#drawer .drawer-item.logout {
  background: transparent !important;
  background-color: transparent !important;
  color: #f87171 !important;
  padding: 10px 14px !important;
  border-radius: 0 8px 8px 0 !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  width: auto !important;
  margin: 8px 0 16px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
#drawer #drawer-logout:hover,
#drawer .drawer-item.logout:hover {
  background: rgba(248, 113, 113, 0.06) !important;
}
#drawer #drawer-logout i.ti,
#drawer #drawer-logout svg,
#drawer .drawer-item.logout i.ti,
#drawer .drawer-item.logout svg {
  color: #f87171 !important;
  stroke: #f87171 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
}

/* ── Section wrapper — no extra spacing ─────────── */
#drawer .drawer-section {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Scrollbar — minimal ─────────────────────────── */
#drawer::-webkit-scrollbar { width: 4px; }
#drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
#drawer::-webkit-scrollbar-track { background: transparent; }