/* ══════════════════════════════════════════════════════════
   DARK MODE — [data-theme="dark"] atributida yoqiladi
   Barcha ranglar CSS o'zgaruvchilar orqali — bitta joyda almashadi
   ══════════════════════════════════════════════════════════ */

:root {
  /* Ochiq/qorong'i o'rtasidagi silliq o'tish */
  --theme-transition: background-color .3s ease, color .3s ease,
                      border-color .3s ease, box-shadow .3s ease;
}

/* Barcha rang o'zgarishlari silliq bo'ladi (lekin animatsiyalarga tegmaydi) */
body,
.card, .cat, .stat, .topbar, .btn, .field input, .field textarea,
.field select, table, th, td, .modal, .alert, .tag, .pill,
.q-card, .opt, .nav-panel, .nav-dot, .test-bar, .foot,
.alert-row, .ac-warn__card, .ac-status {
  transition: var(--theme-transition);
}

[data-theme="dark"] {
  /* ── Brend (biroz yumshatilgan — qorong'ida yorqin ko'k charchatadi) ── */
  --brand-950: #0a1929;
  --brand-900: #0d2740;
  --brand-800: #123a5f;
  --brand-700: #1a4d7a;
  --brand-600: #2563a8;
  --brand-500: #3b82d6;
  --brand-400: #5a9ae8;
  --brand-300: #8bb8ef;
  --brand-100: #1a3a5c;
  --brand-50:  #142a42;

  /* ── Neytral — teskari ─────────────────────────────────── */
  --ink:        #e8edf5;
  --ink-soft:   #b0bccf;
  --ink-faint:  #7e8ba3;
  --paper:      #0d1420;
  --surface:    #161f2e;
  --surface-2:  #1c2637;
  --rule:       #2a3548;
  --rule-soft:  #232d3f;

  /* ── Semantik — qorong'i fon uchun moslashtirilgan ────── */
  --accent:     var(--brand-400);
  --accent-bg:  var(--brand-50);
  --amber:      #e0a92e;
  --amber-bg:   #2e2410;
  --green:      #3fbf94;
  --green-bg:   #10261f;
  --red:        #e57373;
  --red-bg:     #2e1616;

  /* v14: F-14 — chegara ranglari qorong'i fonda ham ko'rinsin */
  --amber-line: #5c4a1e;
  --red-line:   #5e2f2f;
  --green-line: #1e4a3a;

  /* ── Soyalar — qorong'ida chuqurroq ───────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow:     0 4px 16px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --shadow-lg:  0 12px 34px rgba(0,0,0,.5);

  --grad-brand: linear-gradient(135deg, #123a5f 0%, #2563a8 100%);
  --grad-hero:  radial-gradient(circle at 50% 40%, #123a5f 0%, #0a1929 100%);

  color-scheme: dark;
}

/* Dark mode'da rasm va logotip biroz yumshatiladi */
[data-theme="dark"] img:not(.no-dim) {
  filter: brightness(.92);
}

/* Skeleton dark mode'da */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--rule) 50%, var(--surface-2) 75%);
  background-size: 840px 100%;
}

/* Kod/monospace maydonlar dark mode'da */
[data-theme="dark"] .creds__val,
[data-theme="dark"] .num {
  color: var(--brand-300);
}

/* ── Mavzu almashtirish tugmasi ────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: var(--theme-transition), transform .15s ease;
  overflow: hidden;
  position: relative;
}
.theme-toggle:hover {
  border-color: var(--brand-400);
  color: var(--brand-500);
}
.theme-toggle:active { transform: scale(.92); }

.theme-toggle svg {
  width: 19px;
  height: 19px;
  position: absolute;
  transition: transform .4s cubic-bezier(.5, 1.6, .4, 1), opacity .3s ease;
}
/* Quyosh (ochiq rejimda ko'rinadi) */
.theme-toggle .icon-sun {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
.theme-toggle .icon-moon {
  transform: translateY(30px) rotate(90deg);
  opacity: 0;
}
/* Dark rejimda oy chiqadi, quyosh ketadi */
[data-theme="dark"] .theme-toggle .icon-sun {
  transform: translateY(-30px) rotate(-90deg);
  opacity: 0;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* Kichik ekranlarda tugma biroz kichrayadi */
@media (max-width: 560px) {
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle svg { width: 17px; height: 17px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   v16: TIL TANLAGICH (UZ / RU)
   Mavzu tugmasi bilan yonma-yon turadi — o'lchami va uslubi hamohang.
   ───────────────────────────────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  transition: var(--theme-transition);
  vertical-align: middle;
}
.lang-switch button {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1;
  padding: 0 9px;
  height: 30px;
  min-height: 30px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-switch button:hover { color: var(--brand-500); }
.lang-switch button.is-active {
  background: var(--brand-600);
  color: #fff;
}
.lang-switch button.is-active:hover { color: #fff; }

/* Kichik ekranlarda ixchamroq */
@media (max-width: 560px) {
  .lang-switch { height: 34px; }
  .lang-switch button { padding: 0 7px; height: 26px; min-height: 26px; font-size: 11.5px; }
}

/* v16: ikki tilli bloklar — noto'g'ri tildagi matn bir lahza ham
   ko'rinmasligi uchun CSS darajasida yashiriladi (i18n.js root elementga
   `data-lang` ni HTML chizilishidan oldin yozadi). */
html[data-lang="ru"] [data-lang-block="uz"],
html[data-lang="uz"] [data-lang-block="ru"] { display: none !important; }
