/* ========= SIDEBAR STYLES ========= */
.sidebar {
  width: 260px !important;
  min-height: calc(100vh - 64px);
  padding: 20px 16px 24px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(120% 160% at 80% 0%, rgba(212,165,116,.03), transparent 55%),
    linear-gradient(180deg, #12171d, #0c1015 60%, #0a0f14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 18px 40px rgba(0,0,0,.6) !important;
  color: var(--tx);
  border-right: 1px solid rgba(212,165,116,.15);
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: width .3s ease;
  z-index: 100;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Navigation Section */
.nav-section {
  padding: 8px 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Navigation Divider */
.nav-divider {
  position: relative;
  margin: 16px 12px !important;
  height: 14px !important;
  background: none !important;
}

.nav-divider::before,
.nav-divider::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,116,.3), transparent);
}

.nav-divider::before {
  left: 0;
}

.nav-divider::after {
  right: 0;
}

.nav-divider i {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 58px;
  height: 10px;
  transform: translateX(-50%);
  opacity: .6;
  background:
    radial-gradient(8px 5px at 50% 50%, var(--gold-c), transparent 70%),
    radial-gradient(3px 2px at 20% 50%, var(--gold-c), transparent 70%),
    radial-gradient(3px 2px at 80% 50%, var(--gold-c), transparent 70%);
  filter: blur(.2px);
  display: block;
}

/* Navigation Items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px !important;
  margin: 4px 8px !important;
  color: #cdd6e2 !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: all .2s ease;
  position: relative;
  background: transparent !important;
  border: none !important;
}

.nav-item:hover {
  color: #eaf1fb !important;
  transform: translateY(-1px);
  background: rgba(212,165,116,.05) !important;
}

.nav-item::before {
  display: none !important;
}

/* Active Navigation Item */
.nav-item.active {
  position: relative;
  padding: 12px 16px !important;
  border: 3px solid transparent !important;
  border-radius: 20px !important;
  color: #ffeabf !important;
  background:
    linear-gradient(180deg, #272219 0%, #0e1014 90%) padding-box,
    conic-gradient(from 230deg,
      var(--gold-a) 0deg, var(--gold-b) 20deg, var(--gold-c) 55deg,
      var(--gold-d) 120deg, var(--gold-e) 190deg, var(--gold-d) 240deg,
      var(--gold-c) 300deg, var(--gold-a) 360deg) border-box !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.42) inset !important;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 8px 22px rgba(255,255,255,.12),
    inset 0 -12px 22px rgba(0,0,0,.35);
}

/* Active Item Ears */
.nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: conic-gradient(from 210deg, var(--gold-b), var(--gold-c) 35%, var(--gold-e) 75%, var(--gold-b) 100%) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.35) !important;
  clip-path: polygon(100% 0, 65% 0, 0 50%, 65% 100%, 100% 100%) !important;
  display: block !important;
}

.nav-item.active .ear-right {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 8px;
  height: 30px;
  border-radius: 6px;
  pointer-events: none;
  background: conic-gradient(from 30deg, var(--gold-b), var(--gold-c) 35%, var(--gold-e) 75%, var(--gold-b) 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%);
}

/* Splash Promo Item */
.nav-item.splash {
  background: linear-gradient(90deg, rgba(212,165,116,.1), rgba(0,212,170,.1)) !important;
  border: 2px solid rgba(212,165,116,.25) !important;
  color: var(--gold) !important;
  margin: 8px !important;
  padding: 14px 16px !important;
}

.nav-item.splash:hover {
  background: linear-gradient(90deg, rgba(212,165,116,.15), rgba(0,212,170,.15)) !important;
  color: var(--gold-hover) !important;
  transform: translateY(-1px);
}

/* Navigation Icons - IMPORTANT: Keep stroke and fill separate */
.nav-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-block;
  flex-shrink: 0;
  opacity: .9;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.15));
}

/* SVG Icon Styling - PRESERVE ORIGINAL APPEARANCE */
.nav-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* For stroke-only icons */
.nav-icon svg[stroke] {
  stroke: currentColor;
  stroke-width: 2;
}

/* For fill-only icons */
.nav-icon svg[fill] {
  fill: currentColor;
}

/* Mixed stroke and fill */
.nav-icon svg path[stroke],
.nav-icon svg circle[stroke],
.nav-icon svg rect[stroke],
.nav-icon svg line[stroke],
.nav-icon svg polyline[stroke],
.nav-icon svg polygon[stroke] {
  stroke: currentColor;
  stroke-width: 2;
}

.nav-icon svg path[fill="none"],
.nav-icon svg circle[fill="none"],
.nav-icon svg rect[fill="none"],
.nav-icon svg polygon[fill="none"] {
  fill: none !important;
}

.nav-icon svg path[fill="currentColor"],
.nav-icon svg circle[fill="currentColor"],
.nav-icon svg rect[fill="currentColor"],
.nav-icon svg polygon[fill="currentColor"] {
  fill: currentColor;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 16px 8px 8px !important;
  border-top: 1px solid rgba(212,165,116,.15) !important;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

/* Bottom Actions */
.bottom-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.pill-btn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 3px solid transparent;
  border-radius: 24px;
  text-decoration: none;
  color: #e8eef7;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 38%) padding-box,
    linear-gradient(180deg, #2b5f86 0%, #1c3f59 60%, #0f2a3b 100%) padding-box,
    conic-gradient(from 230deg,
      var(--gold-a), var(--gold-b) 20%, var(--gold-c) 55%,
      var(--gold-d) 120deg, var(--gold-e) 190deg, var(--gold-d) 240deg,
      var(--gold-c) 300deg, var(--gold-a) 360deg) border-box;
  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.42) inset;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .2s ease;
}

.pill-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 20px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 12px 22px rgba(255,255,255,.11),
    inset 0 -14px 22px rgba(0,0,0,.35);
}

.pill-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.5) inset;
}

/* Notches */
.pill-btn .notch-top,
.pill-btn .notch-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 12px;
  pointer-events: none;
  display: block;
}

.pill-btn .notch-top {
  top: -3px;
  background: linear-gradient(180deg, #2b5f86, #1c3f59);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.24));
  border-radius: 0 0 5px 5px;
}

.pill-btn .notch-bottom {
  bottom: -3px;
  background: linear-gradient(180deg, #1c3f59, #0f2a3b);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.38));
  border-radius: 5px 5px 0 0;
}

/* ========= SIDEBAR COLLAPSED STATE ========= */
.sidebar.closed {
  width: 60px !important;
  padding: 20px 0 24px;
}

.sidebar.closed .nav-section {
  padding: 8px 0;
}

/* Hide text spans but keep icons */
.sidebar.closed .nav-item > span:not(.nav-icon) {
  display: none !important;
}

.sidebar.closed .pill-btn > span:not(.notch-top):not(.notch-bottom) {
  display: none !important;
}

/* Center items in collapsed state */
.sidebar.closed .nav-item {
  justify-content: center;
  padding: 12px !important;
  margin: 4px !important;
}

/* CRITICAL: Keep icons exactly the same */
.sidebar.closed .nav-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  opacity: 0.9 !important;
  visibility: visible !important;
  margin: 0 !important;
}

/* Preserve SVG structure and colors */
.sidebar.closed .nav-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* IMPORTANT: Preserve stroke-only elements */
.sidebar.closed .nav-icon svg[stroke],
.sidebar.closed .nav-icon svg *[stroke] {
  stroke: currentColor !important;
  stroke-width: 2;
}

/* IMPORTANT: Preserve fill="none" */
.sidebar.closed .nav-icon svg[fill="none"],
.sidebar.closed .nav-icon svg *[fill="none"] {
  fill: none !important;
}

/* IMPORTANT: Only fill where specified */
.sidebar.closed .nav-icon svg[fill="currentColor"],
.sidebar.closed .nav-icon svg *[fill="currentColor"] {
  fill: currentColor !important;
}

/* Icon colors for different states */
.sidebar.closed .nav-item .nav-icon {
  color: #cdd6e2;
}

.sidebar.closed .nav-item:hover .nav-icon {
  color: #eaf1fb;
}

.sidebar.closed .nav-item.active .nav-icon {
  color: #ffeabf;
}

.sidebar.closed .nav-item.splash .nav-icon {
  color: #c9a961;
}

/* Active item in collapsed state */
.sidebar.closed .nav-item.active {
  padding: 12px !important;
  justify-content: center;
  border-width: 2px !important;
}

/* Hide ear decorations in collapsed state */
.sidebar.closed .nav-item.active::before,
.sidebar.closed .nav-item.active .ear-right {
  display: none !important;
}

/* Splash item in collapsed state */
.sidebar.closed .nav-item.splash {
  justify-content: center;
  padding: 12px !important;
  margin: 4px !important;
  border-width: 1px !important;
}

/* Divider in collapsed state */
.sidebar.closed .nav-divider {
  margin: 8px 4px !important;
}

.sidebar.closed .nav-divider i {
  width: 30px;
  transform: translateX(-50%) scale(0.5);
}

/* Language Switcher in collapsed state */
.sidebar.closed .language-switcher {
  display: block !important;
  margin: 12px 4px !important;
}

.sidebar.closed .current-lang {
  justify-content: center !important;
  padding: 8px !important;
  min-width: 44px;
}

.sidebar.closed .current-lang .lang-flag {
  display: block !important;
  font-size: 20px !important;
  line-height: 1;
  margin: 0 !important;
}

.sidebar.closed .current-lang .lang-name,
.sidebar.closed .current-lang .dropdown-arrow {
  display: none !important;
}

.sidebar.closed .lang-dropdown {
  left: 100% !important;
  right: auto !important;
  margin-left: 8px;
  min-width: 180px;
}

/* Footer in collapsed state */
.sidebar.closed .sidebar-footer {
  padding: 12px 4px !important;
}

/* Bottom actions in collapsed state */
.sidebar.closed .bottom-actions {
  flex-direction: column;
  gap: 8px;
}

.sidebar.closed .pill-btn {
  padding: 10px !important;
  width: 44px !important;
  height: 44px !important;
  justify-content: center;
}

.sidebar.closed .pill-btn svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* Tooltips for collapsed state */
.sidebar.closed .nav-item::after,
.sidebar.closed .pill-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 12px;
  padding: 8px 12px;
  background: #2d3446;
  color: #e8e6e3;
  border: 1px solid rgba(201,169,97,0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.sidebar.closed .nav-item:hover::after {
  opacity: 1;
}

/* Override pill-btn::after for tooltip */
.sidebar.closed .pill-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  inset: auto;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}