/* ===== DARK MODE ===== */
/* O'zgaruvchilarni qayta aniqlash orqali hamma sahifalarda qo'llanadi.
   Sahifa o'zining :root da bergan qiymatlaridan to'q rejim yutadi. */

html[data-theme="dark"]{
  --ink:#F4F0FA;
  --ink-soft:#C6BFD3;
  --ink-faint:#8E879B;
  --line:#302B3B;
  --line-strong:#46405A;
  --paper:#1D1924;
  --canvas:#131016;

  --indigo-deep:#0F0A24;
  --indigo-soft:rgba(91,62,240,.18);
  --indigo-text:#B3A3FF;

  --ok-soft:rgba(28,154,99,.16);
  --live-soft:rgba(225,72,62,.16);
  --sun-soft:rgba(245,165,36,.16);
  --sun-text:#F8CB73;
  --warn:#E8B55C;
  --warn-soft:rgba(245,165,36,.14);

  --teal-deep:#06312B;
  --teal-soft:rgba(14,157,138,.18);
  --teal-text:#6BE5D2;

  --ok:#26B979;
  --live:#F0564D;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink-soft);
  font-size:16px;cursor:pointer;flex-shrink:0;
  transition:all .12s;
  text-decoration:none;
}
.theme-toggle:hover{color:var(--indigo);border-color:var(--indigo);}

/* ===== LANGUAGE TOGGLE BUTTON ===== */
.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink-soft);
  font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;
  transition:all .12s;
  text-decoration:none;
  letter-spacing:.04em;
}
.lang-toggle:hover{color:var(--indigo);border-color:var(--indigo);}

/* ===== LEGACY / BOOTSTRAP PAGES ===== */
html[data-theme="dark"] body.bg-light{ background:var(--canvas); }
html[data-theme="dark"] .navbar.bg-primary{ background:#2A1F5E !important; }
html[data-theme="dark"] .navbar-dark .navbar-brand,
html[data-theme="dark"] .navbar-dark .nav-link{ color:#D6CFF5; }
html[data-theme="dark"] .card{ background:var(--paper); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .card-header{ background:var(--canvas); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .card-body{ color:var(--ink); }
html[data-theme="dark"] .list-group-item{ background:var(--paper); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{ background:var(--canvas); border-color:var(--line-strong); color:var(--ink); }
html[data-theme="dark"] .form-control::placeholder{ color:var(--ink-faint); }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{ background:var(--paper); border-color:var(--indigo); color:var(--ink); box-shadow:0 0 0 .2rem rgba(91,62,240,.2); }
html[data-theme="dark"] .text-muted{ color:var(--ink-soft) !important; }
html[data-theme="dark"] .form-check-input{ background:var(--canvas); border-color:var(--line-strong); }
html[data-theme="dark"] .alert-dismissible .btn-close{ filter:invert(1); }

/* ===== COLLAPSIBLE SIDEBAR (barcha panellarda) ===== */
.sidebar{transition:width .18s ease;}
.main{transition:margin-left .18s ease;}
.sidebar-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink-soft);
  font-size:17px;cursor:pointer;flex-shrink:0;
  transition:all .12s;
  padding:0;
}
.sidebar-toggle:hover{color:var(--indigo);border-color:var(--indigo);}

/* ===== MOBILE NAV DRAWER (hamburger + backdrop) ===== */
.nav-hamburger{
  display:none;
  position:fixed;top:12px;left:12px;z-index:60;
  align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink-soft);
  font-size:18px;cursor:pointer;flex-shrink:0;
  transition:all .12s;
  padding:0;
}
.nav-hamburger:hover{color:var(--indigo);border-color:var(--indigo);}
.nav-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:99;
  background:rgba(19,16,22,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease;
}
body.vc-nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto;}

@media (max-width: 860px){
  .sidebar{
    width:min(280px,85vw);
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:0 0 30px rgba(19,16,22,.18);
  }
  body.vc-nav-open .sidebar{transform:translateX(0);}
  .main{margin-left:0;}
  .sidebar-toggle{display:none;}
  .nav-hamburger{display:inline-flex;}
  .topbar{padding:0 16px 0 56px;}
  body.vc-collapsed .sidebar{width:min(280px,85vw);}
}

body.vc-collapsed .sidebar{width:62px !important;}
body.vc-collapsed .sidebar .brand-name,
body.vc-collapsed .sidebar .brand-role,
body.vc-collapsed .sidebar .nav-label,
body.vc-collapsed .sidebar .nav-text,
body.vc-collapsed .sidebar .teacher-name,
body.vc-collapsed .sidebar .teacher-sub,
body.vc-collapsed .sidebar .teacher-card i{display:none;}
body.vc-collapsed .sidebar-brand{justify-content:center;padding:14px 0;}
body.vc-collapsed .sidebar-brand .brand-mark{display:none;}
body.vc-collapsed .nav-section{padding:4px 0;}
body.vc-collapsed .nav-item,
body.vc-collapsed .nav-group-toggle{
  width:42px;height:42px;padding:0;
  margin:2px auto;
  justify-content:center;
}
body.vc-collapsed .nav-badge{position:absolute;top:4px;right:4px;}
body.vc-collapsed .nav-group-children{display:none !important;}
body.vc-collapsed .nav-chevron{display:none;}
body.vc-collapsed .sidebar-footer{padding:8px;}
body.vc-collapsed .teacher-card{justify-content:center;padding:8px 0;}
body.vc-collapsed .main{margin-left:62px !important;}
body.vc-collapsed .topbar{padding:0 16px;}
body.vc-collapsed .page{padding:18px 16px 60px;}

/* ===== QUIZ SPECIFIC ===== */
html[data-theme="dark"] .correct-answer{ background:rgba(0,0,0,.32); }
html[data-theme="dark"] .word-card.correct{ background:var(--ok-soft); }
html[data-theme="dark"] .word-card.wrong{ background:var(--live-soft); }

/* ===== RESULT HERO TEXT KEEP LIGHT ===== */
html[data-theme="dark"] .result-hero,
html[data-theme="dark"] .result-score-label,
html[data-theme="dark"] .result-meta-item{ color:inherit; }