/* ══════════════════════════════════════════════════════════
   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;

  /* ── 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; }
}