/* ==========================================================================
   Yagona navbar — ILOVA va PUBLIC sahifalar uchun BITTA ko'rinish.
   («Bosh sahifa» / «Biz haqimizda» / «Aloqa» sahifalari `site.css` ustida,
   qolgan hamma sahifa `app.css` + Tailwind ustida ishlaydi. Ilgari navbar
   ikkala tomonda alohida yozilgan edi — shuning uchun «Fanlar»ni bosganda
   bir xil, «Bosh sahifa»ni bosganda boshqa navbar chiqardi: faol bo'lim
   belgisi ham, o'qilmagan xabar soni ham yo'qolib qolardi.)

   Shu sababli bu fayl NA Tailwind'ga, NA `app.css`/`site.css` o'zgaruvchilariga
   tayanmaydi: ranglar shu yerda literal, ya'ni CDN kelmasa ham, qaysi shell
   bo'lmasin — navbar aynan bir xil chiziladi.
   Markup: `templates/partials/_appnav.html` · xatti-harakat: `static/js/navbar.js`
   ========================================================================== */

.appnav {
  --nav-ink:      #11203a;
  --nav-ink-700:  #2b3a55;
  --nav-brand:    #1f4e79;
  --nav-brand-600:#2864a0;
  --nav-brand-100:#e6f0fa;
  --nav-brand-50: #f2f7fc;
  --nav-line:     #e4ebf3;
  --nav-soft:     #f5f8fc;
  --nav-gold:     #f5a524;
  --nav-wrong:    #c0392b;
  --nav-panel:    #fff;                   /* dropdown / mobil menyu foni     */
  --nav-item:     rgba(17, 32, 58, .75);  /* dropdown bandi matni            */
  --nav-bg:       rgba(255, 255, 255, .82);
  --nav-shadow:   0 18px 48px rgba(17, 32, 58, .12);
  --nav-h: 68px;

  /* z-30 — ilova shell'idagi eski qiymat. Ko'tarilmasin: modallar (formula 60,
     xabar berish 70), imtihon qalqoni (50) va taymer (40) navbardan YUQORIDA
     turishi kerak. Public sahifalarda kontent 0–1 da, shuning uchun 30 u yerda
     ham yetarli (toast 150 — avvalgidek tepada qoladi). */
  position: sticky; top: 0; z-index: 30;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--nav-line);
}

.appnav__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 20px;
  height: var(--nav-h); display: flex; align-items: center; gap: 20px;
}

/* --- Brend ---------------------------------------------------------------- */
.appnav__brand {
  display: inline-flex; align-items: center; gap: 11px;
  flex-shrink: 0; white-space: nowrap; text-decoration: none;
}
.appnav__logo {
  height: 42px; width: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(31, 78, 121, .25));
}
.appnav__wordmark {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: 1.16rem; color: var(--nav-ink);
}
.appnav__accent { color: var(--nav-brand-600); }

/* --- Havolalar qatori ----------------------------------------------------- */
.appnav__links {
  display: none;                      /* mobil: burger menyu ochadi */
  align-items: center; gap: 4px;
  margin-left: 8px; margin-right: auto;
}

.appnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .93rem; line-height: 1.2;
  color: var(--nav-ink-700); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.appnav__link:hover { background: var(--nav-brand-50); color: var(--nav-brand); }
.appnav__link.is-active { background: var(--nav-brand-100); color: var(--nav-brand); }

.appnav__chev { width: 14px; height: 14px; transition: transform .2s; }
.appnav__dd.is-open .appnav__chev { transform: rotate(180deg); }

/* Badge — o'qilmagan xabar / yangi test xabari soni */
.appnav__badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--nav-gold); color: var(--nav-ink);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.appnav__badge--end { margin-left: auto; }

/* --- Dropdown ------------------------------------------------------------- */
.appnav__dd { position: relative; }
.appnav__panel {
  position: absolute; left: 0; top: 100%; z-index: 50;
  padding-top: 8px;                   /* tugma bilan panel orasidagi bo'shliq
                                         hover uzilmasligi uchun panel ichida */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.appnav__panel > div {
  width: 215px; background: var(--nav-panel); border: 1px solid var(--nav-line);
  border-radius: 20px; box-shadow: var(--nav-shadow); padding: 8px;
}
.appnav__dd.is-open > .appnav__panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  /* Menyu bandlari hover bilan ochiladi; profil menyusi (.avatar-menu) — faqat
     bosilganda, ilgarigidek (tasodifiy o'tib ketishda «Chiqish» chiqmasin). */
  .appnav__dd:not(.avatar-menu):hover > .appnav__panel { opacity: 1; visibility: visible; transform: none; }
}

.appnav__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: 14px;
  font-size: .875rem; font-weight: 600; line-height: 1.3;
  color: var(--nav-item); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.appnav__item:hover { background: var(--nav-brand-50); color: var(--nav-brand); }
.appnav__item.is-active { background: var(--nav-brand-100); color: var(--nav-brand); }
.appnav__item--danger { color: var(--nav-wrong); font-weight: 600; }
.appnav__item--danger:hover { background: rgba(192, 57, 43, .08); color: var(--nav-wrong); }
.appnav__ico { width: 16px; height: 16px; flex-shrink: 0; }

/* --- O'ng tomon: savat, profil, burger ------------------------------------ */
.appnav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.appnav__cart {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--nav-brand-50); color: var(--nav-brand);
  flex-shrink: 0; text-decoration: none; transition: background .15s;
}
.appnav__cart:hover { background: var(--nav-brand-100); }
.appnav__cart[hidden] { display: none; }
.appnav__cart-n {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--nav-gold); color: var(--nav-ink);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Mehmon tugmalari (kirish / ro'yxatdan o'tish) */
.appnav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .88rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.appnav__cta--ghost { color: var(--nav-brand); border-color: var(--nav-line); background: var(--nav-panel); }
.appnav__cta--ghost:hover { background: var(--nav-brand-50); }
.appnav__cta--primary { background: var(--nav-brand); color: #fff; }
.appnav__cta--primary:hover { background: var(--nav-brand-600); }

.appnav__burger {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: var(--nav-soft);
  border: 1px solid var(--nav-line); color: var(--nav-ink-700); cursor: pointer;
  flex-shrink: 0;
}

/* --- Mobil menyu ---------------------------------------------------------- */
.appnav__mobile {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  background: var(--nav-panel); border-bottom: 1px solid var(--nav-line);
  box-shadow: var(--nav-shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 2px;
}
.appnav__mobile[hidden] { display: none; }
.appnav__mlink {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 14px;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: .875rem;
  color: var(--nav-ink-700); text-decoration: none;
}
.appnav__mlink:hover { background: var(--nav-brand-50); }
.appnav__mlink.is-active { background: var(--nav-brand-100); color: var(--nav-brand); }
.appnav__mcta { margin-top: 8px; }

/* Desktop: havolalar ko'rinadi, burger yashirinadi */
@media (min-width: 1024px) {
  .appnav__links { display: flex; }
  .appnav__actions { margin-left: 0; }
  .appnav__burger, .appnav__mobile { display: none; }
}

@media (max-width: 620px) {
  /* Mehmon tugmalari tor ekranda brendni siqib chiqarardi — ular mobil
     menyuning ichida ham bor, shuning uchun tepadan olib turiladi. */
  .appnav__actions .appnav__cta { display: none; }
}

@media (max-width: 480px) {
  .appnav__wordmark { font-size: 1.05rem; }
}

/* ==========================================================================
   QORONG'I REJIM

   Fayl boshidagi qoida saqlanadi: ranglar shu yerda LITERAL. Navbar ikkala
   shell'da ham (ilova va public) bir xil chizilishi kerak, public sahifada
   esa `app.css` umuman yuklanmaydi — ya'ni bu yerda `--ink`/`--surface`
   tokenlarini ishlatib bo'lmaydi. Shuning uchun qorong'i qiymatlar ham
   qo'lda yozilgan; ular `app.css` dagi qorong'i palitraga MOS (#0D1524 /
   #151F33 / #253148 / #E8EEF7) — birini o'zgartirsangiz, ikkinchisini ham.
   ========================================================================== */
:root[data-theme="dark"] .appnav {
  --nav-ink:      #e8eef7;
  --nav-ink-700:  #c6d2e3;
  --nav-brand:    #7cb6ea;
  --nav-brand-600:#8fc2ef;
  --nav-brand-100:#1e2f4b;
  --nav-brand-50: #18263d;
  --nav-line:     #253148;
  --nav-soft:     #151f33;
  --nav-gold:     #f7b343;
  --nav-wrong:    #ff9c90;
  --nav-panel:    #151f33;
  --nav-item:     rgba(232, 238, 247, .78);
  --nav-bg:       rgba(13, 21, 36, .86);
  --nav-shadow:   0 18px 48px rgba(0, 0, 0, .6);
}
/* Logotip qorong'i fonda «kesilgan» ko'rinmasin — ko'k soya o'rniga yumshoq
   yorug'lik. */
:root[data-theme="dark"] .appnav__logo {
  filter: drop-shadow(0 4px 10px rgba(124, 182, 234, .22));
}
/* «Ro'yxatdan o'tish» — quyuq ko'k fon + oq matn edi; qorong'ida fon ochiq
   ko'kga aylanadi, demak matn quyuq bo'lishi kerak. */
:root[data-theme="dark"] .appnav__cta--primary { color: #0d1524; }
:root[data-theme="dark"] .appnav__cta--primary:hover { color: #0d1524; }
/* Badge (o'qilmagan xabar soni) — oltin fonda quyuq raqam */
:root[data-theme="dark"] .appnav__badge,
:root[data-theme="dark"] .appnav__cart-n { color: #0d1524; }

/* ==========================================================================
   Mavzu almashtirgichi (yorug' / qorong'i)

   NEGA SHU FAYLDA, `app.css` DA EMAS: tugma navbarda ham, fokus rejimining
   yuqori bandida ham turadi — ya'ni PUBLIC sahifalarda ham chiqadi, u yerda
   esa `app.css` umuman yuklanmaydi (faqat `site.css` + shu fayl). Ilgari u
   `app.css` da edi va bosh sahifada rangsiz kul kvadratga aylanib qolardi.
   Shu sababli ranglar bu yerda ham literal — fayl boshidagi qoidaga muvofiq.

   Ikkala ikonka ham markupda turadi, qaysi biri ko'rinishini CSS hal qiladi:
   JS bilan almashtirilsa, sahifa chizilgunicha noto'g'ri ikonka ko'rinardi.
   ========================================================================== */
.tema-btn { display: none; }               /* JS yo'q — tugma ham yo'q */
:root[data-tema-tayyor] .tema-btn {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 999px;
  background: #f2f7fc; color: #1f4e79;
  border: 0; cursor: pointer; transition: background .15s, color .15s;
}
.tema-btn:hover { background: #e6f0fa; }
.tema-btn svg { width: 20px; height: 20px; }
.tema-btn .tema-oy { display: none; }
:root[data-theme="dark"] .tema-btn { background: #18263d; color: #7cb6ea; }
:root[data-theme="dark"] .tema-btn:hover { background: #1e2f4b; }
:root[data-theme="dark"] .tema-btn .tema-oy { display: block; }
:root[data-theme="dark"] .tema-btn .tema-quyosh { display: none; }

/* --- Profil ikonkasi (`partials/_usercard.html`) -------------------------
   Uning o'lchami va rangi INLINE `style=` da (sababi o'sha faylda yozilgan:
   Tailwind kelmasa yoki `app.css` keshda eskirsa ham ikonka joyida tursin).
   Inline uslub esa faqat `var()` orqali mavzuga ergasha oladi — va u
   o'zgaruvchi IKKALA shell'da ham mavjud bo'lishi shart. `app.css` dagi
   `--ink`/`--surface` public sahifada YO'Q (u yerda `site.css`, tokenlari
   boshqacha va HEX ko'rinishida — `rgb(#1a4269)` yaroqsiz qiymat, natijada
   ikonka fonsiz qolardi). Shuning uchun ular shu yerda, `--nav-` oilasida. */
.appnav {
  --nav-avatar-a:    #2e75b6;   /* gradient boshi */
  --nav-avatar-b:    #1a4269;   /* gradient oxiri + gradientsiz zaxira fon */
  --nav-avatar-ring: #fff;      /* navbar foni rangidagi halqa */
  --nav-muted:       rgba(17, 32, 58, .5);
}
:root[data-theme="dark"] .appnav {
  --nav-avatar-a:    #3e89d6;
  --nav-avatar-b:    #1f548a;
  --nav-avatar-ring: #151f33;
  --nav-muted:       rgba(232, 238, 247, .5);
}