/* ==========================================================================
   Menyu paneli (sidebar) — noldan yozilgan, dashboard dizayn tilida.
   Nom maydoni: `snav-`. Faqat shu fayl + `_dashboard_sidebar.html`.
   Tashqi qobiq (`.workspace-sidebar-column`, overlay, mobil trigger) va
   drawer mexanikasi fragment-theme.css'da qoladi — bu yerda faqat panel
   ichi. Dashboard bilan bir xil tilda: rangli ikonka plitkalari, mono
   raqamlar, 9.5px uppercase yorliqlar, #111/#222 yassi palitra.
   ========================================================================== */

/* Panelning o'z paddingi. Eski `.workspace-sidebar` qoidalari (fragment-theme)
   `padding: 14px 10px 0` beradi — pastda joy qolmay, profil karta ekran
   chetiga yopishib qolardi. Shu selektor ular bilan teng spetsifiklikda,
   lekin sidebar.css keyin yuklanadi. */
body.dev-console.sidebar-persist .snav,
body.dashboard-page .snav,
body.stg-page .snav,
body.adm-page .snav {
  display: flex;
  flex-direction: column;
  /* Eski `.workspace-sidebar` qoidalari `gap: 0` beradi — bo'limlar bir-biriga
     yopishib qolardi. Shu selektor ular bilan teng spetsifiklikda. */
  gap: 10px;
  padding: 13px 11px 12px;
}

@media (max-width: 640px) {
  body.dev-console.sidebar-persist .snav,
  body.dashboard-page .snav,
  body.stg-page .snav,
  body.adm-page .snav {
    gap: 8px;
    padding: 12px 10px 12px;
  }
}

.snav {
  --n-card: #151515;
  --n-card-2: #1b1b1b;
  --n-hover: #202020;
  --n-border: #242424;
  --n-border-soft: #2c2c2c;
  --n-text: #e8e8e8;
  --n-soft: #c4c4c4;
  --n-muted: #8f8f8f;
  --n-faint: #6b6b6b;
  --n-accent: #2563eb;
  --n-accent-soft: rgba(37, 99, 235, 0.13);
  --n-accent-line: rgba(37, 99, 235, 0.32);
  --n-accent-text: #7aa8ff;
  --n-green: #22c55e;
  --n-green-soft: rgba(34, 197, 94, 0.13);
  --n-green-text: #5fd18a;
  --n-amber: #f3c14e;
  --n-amber-soft: rgba(243, 193, 78, 0.13);
  --n-gold: #e8b339;

  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 11px 11px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--n-text);
}

/* ======================= Brend ======================= */
.snav-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--n-border);
}

.snav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.snav-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  color: var(--n-accent-text);
  background: var(--n-accent-soft);
  border: 1px solid var(--n-accent-line);
}

.snav-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.snav-brand-copy strong {
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  color: var(--n-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-brand-copy small {
  font-size: 10px;
  line-height: 13px;
  color: var(--n-faint);
}

/* Yopish tugmasi — faqat mobil drawer'da ko'rinadi */
.snav-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--n-border);
  background: var(--n-card);
  color: var(--n-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.snav-close:active {
  background: var(--n-hover);
  color: var(--n-text);
}

/* ======================= Bo'lim sarlavhasi ======================= */
.snav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.snav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n-faint);
}

.snav-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--n-border);
  background: var(--n-card);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--n-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ======================= Loyihalar ro'yxati ======================= */
.snav-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  margin: 0;
}

.snav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--n-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.snav-item:hover {
  background: var(--n-hover);
  border-color: var(--n-border-soft);
}

.snav-item.active {
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
}

/* Faol loyihada chap chetda ingichka accent chizig'i */
.snav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 22px;
  border-radius: 0 2px 2px 0;
  background: var(--n-accent);
}

/* Loyiha plitkasi (bosh harf) — to'lov aktiviga qarab bo'yaladi */
.snav-tile {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}

.snav-tile--ton {
  color: var(--n-accent-text);
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
}

.snav-tile--usdt {
  color: var(--n-green-text);
  background: var(--n-green-soft);
  border-color: rgba(34, 197, 94, 0.3);
}

.snav-tile--off {
  color: var(--n-faint);
  background: var(--n-card-2);
  border-color: var(--n-border);
}

.snav-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.snav-item-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 17px;
  color: var(--n-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-item.active .snav-item-name {
  color: #ffffff;
}

.snav-item-sub {
  font-size: 10px;
  line-height: 13px;
  color: var(--n-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-item-sub--warn {
  color: #b08a3c;
}

/* Aktiv belgisi */
.snav-badge {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 9px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.02em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.snav-badge--ton {
  color: var(--n-accent-text);
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
}

.snav-badge--usdt {
  color: var(--n-green-text);
  background: var(--n-green-soft);
  border-color: rgba(34, 197, 94, 0.3);
}

.snav-badge--off {
  color: var(--n-faint);
  background: var(--n-card-2);
  border-color: var(--n-border);
}

/* Bo'sh holat */
.snav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  border-radius: 10px;
  border: 1px dashed var(--n-border-soft);
  background: var(--n-card);
  text-align: center;
}

.snav-empty-icon { color: var(--n-faint); }
.snav-empty strong { font-size: 12.5px; color: var(--n-soft); }
.snav-empty span { font-size: 11px; line-height: 15px; color: var(--n-faint); }

/* ======================= "Yangi loyiha" ======================= */
.snav-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 9px;
  background: var(--n-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease;
}

.snav-create:hover { background: #1d4ed8; }

/* ======================= Pastki guruh ======================= */
.snav-foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--n-border);
}

.snav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--n-card);
  text-decoration: none;
  color: var(--n-soft);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.snav-link:hover {
  background: var(--n-hover);
  border-color: var(--n-border-soft);
  color: var(--n-text);
}

.snav-link.active {
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
  color: #ffffff;
}

.snav-link-tile {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  border: 1px solid transparent;
}

.snav-link-tile--blue {
  color: var(--n-accent-text);
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
}

.snav-link-tile--amber {
  color: var(--n-amber);
  background: var(--n-amber-soft);
  border-color: rgba(243, 193, 78, 0.28);
}

.snav-link-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-link-arrow {
  flex: none;
  color: var(--n-faint);
}

/* ======================= Foydalanuvchi ======================= */
.snav-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  padding: 7px 8px 7px 9px;
  border-radius: 10px;
  border: 1px solid var(--n-border);
  background: var(--n-card-2);
}

.snav-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  overflow: visible;
  background: var(--n-accent-soft);
  border: 1px solid var(--n-border-soft);
  color: var(--n-accent-text);
  font-size: 12.5px;
  font-weight: 700;
}

.snav-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.snav-avatar.is-gold {
  border-color: rgba(232, 179, 57, 0.55);
  box-shadow: 0 0 0 2px rgba(232, 179, 57, 0.15);
}

.snav-crown {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #0a0a0a;
  background: linear-gradient(180deg, #f0c65a, #d4a12a);
  box-shadow: 0 0 0 2px var(--n-card-2);
}

.snav-user-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.snav-user-name {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 17px;
  color: var(--n-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-user-meta {
  font-size: 9.5px;
  line-height: 13px;
  color: var(--n-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-user-meta--gold {
  color: var(--n-gold);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.snav-user-actions {
  display: flex;
  gap: 4px;
  flex: none;
}

.snav-icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--n-border);
  background: var(--n-card);
  color: var(--n-muted);
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.snav-icon-btn:hover {
  color: var(--n-text);
  background: var(--n-hover);
  border-color: var(--n-border-soft);
}

.snav-icon-btn.active {
  color: var(--n-accent-text);
  background: var(--n-accent-soft);
  border-color: var(--n-accent-line);
}

.snav-icon-btn--exit:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.1);
}

/* ======================= Desktop: faqat ro'yxat scroll ======================= */
@media (min-width: 641px) {
  .snav-list {
    flex: 0 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3px;
  }

  .snav-list::-webkit-scrollbar { width: 4px; }
  .snav-list::-webkit-scrollbar-track { background: transparent; }
  .snav-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
}

/* ======================= Mobil drawer ======================= */
@media (max-width: 640px) {
  .snav {
    gap: 8px;
    padding: 12px 10px 10px;
  }

  /* Drawer'da yopish tugmasi ko'rinadi */
  .snav-close { display: inline-flex; }

  /* Brend ostidagi yozuv mobilda o'rin egallamasin */
  .snav-brand-copy small { display: none; }

  .snav-head { padding-bottom: 9px; }

  /* Ro'yxat o'z ichida scroll qiladi — brend va pastki guruh qimirlamaydi */
  .snav-list {
    flex: 0 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 2px;
  }
}