/*
 * Design tokens for the platform's visual identity (documents/new_front_tz.md, 2.2-2.4).
 * Indigo palette, adopted platform-wide (2026-09-22) from the reference design in
 * homepage/ (originally built for the public landing page, now the whole app's system).
 * Bootstrap ships with its own $primary etc. compiled into bootstrap.min.css, so instead
 * of recompiling Bootstrap from Sass, we override its CSS custom properties here and this
 * file is loaded *after* bootstrap.min.css in base.html.
 *
 * Dark mode: toggled via <html data-theme="dark">, set by static/js/theme-toggle.js.
 * Default (no attribute, or data-theme="light") is light.
 */

:root {
  /* MUHIM (2026-10-02 bug): bu deklaratsiya yo'qligi aniqlangan muammoning
     sababi bo'lgan. Ba'zi Android brauzerlar (ayniqsa arzon/eski qurilmalar,
     Chrome'ning "Force dark"/WebView'ning "simplified dark theme" degan
     o'rnatilgan funksiyasi) — agar sahifa o'zi dark/light rejimni
     boshqarishini ANIQ aytmasa — matn/fon ranglarini o'zi "taxmin qilib"
     avtomatik almashtiradi. Bizning sahifamiz allaqachon o'z dark/light
     tizimiga ega (data-theme), lekin buni brauzerga hech qachon
     bildirmagan edik -- natijada ba'zi qurilmalarda matn (meros orqali
     --color-text oladigan elementlar, masalan savol matni va variant
     nomlari) ko'rinmay qolgan, chunki brauzerning avtomatik tuzatishi
     bizning ranglarimiz bilan to'qnashgan. Boshqa qurilmalarda (bu
     funksiya o'chirilgan yoki yo'q bo'lgan brauzerlarda) muammo yo'q edi
     -- aynan shuning uchun "mening telefonimda ishlaydi, boshqalarda
     yo'q" holati kelib chiqqan, keshga yoki ma'lumotga aloqasi yo'q. */
  color-scheme: light dark;

  --color-primary: #4F46E5;
  --color-bg: #F8F8FB;
  --color-surface: #FFFFFF;
  --color-text: #0F0E1A;
  /* Same hue as primary everywhere it's used as a button/badge background --
     the reference design uses one indigo for both brand chrome and CTAs,
     not two unrelated brand colors. Kept as its own token (rather than
     templates referencing --color-primary directly) so a future design
     pass can still split them without touching every template. */
  --color-accent: var(--color-primary);
  --color-success: #2EC4B6;
  --color-danger: #E5533C;
  --color-border: #E2E0F0;
  --color-border-strong: #C7C3E0;

  /* Deliberately separate from --color-accent (which already means "joriy
     dars" in these same sidebar/topic-card components) -- this marks a
     4th, independent meaning ("yangi test qo'shildi, e'tibor bering") on
     new_tz.md 559-561's "pending quiz on an already-completed lesson"
     indicator. Reusing the accent color here would read as "this is the
     current lesson" instead. Small decorative dot only, never body text --
     no WCAG text-contrast requirement, paired with a title/aria-label so
     it's never color-only signal. */
  --color-notice: #F59E0B;

  /* Text-safe variants for use as plain text color (not a button/badge
     background) on --color-bg. --color-primary itself already clears WCAG
     AA as text (~5.9:1), so warning-text just reuses it; success/danger
     need actual darkening (see contrast note below). */
  --color-success-text: #157A6E;
  --color-warning-text: #3730A3;
  --color-danger-text: #A83D2C;

  --color-muted: #6B6885;

  --font-heading: 'Sora', 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Bootstrap 5.3 theme-color overrides (used by .btn-primary, .text-primary, .bg-primary, ...) */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: var(--color-success);
  --bs-success-rgb: 46, 196, 182;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 229, 83, 60;
  --bs-warning: var(--color-accent);
  --bs-warning-rgb: 79, 70, 229;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary);

  /* Bootstrap hardcodes these to black/near-black regardless of theme --
     tables, breadcrumbs, disabled/secondary text, etc. all read from them.
     They must track --color-text or they go invisible in dark mode. */
  --bs-emphasis-color: var(--color-text);
  --bs-emphasis-color-rgb: 15, 14, 26;
  --bs-secondary-color: var(--color-muted);

  /* Only used for .dropdown-item hover here (navbar avatar menu) --
     Bootstrap's own dark mode uses [data-bs-theme=dark] to redefine this,
     which we never set (our toggle uses data-theme instead), so without
     this override it always stays Bootstrap's light-mode #f8f9fa -- an
     unreadable near-white hover row once the dropdown itself goes dark. */
  --bs-tertiary-bg: var(--color-border);
}

:root[data-theme="dark"] {
  /* Foydalanuvchi aniq "dark"ni tanlagan bo'lsa, brauzerning o'zi ham shu
     rejimga qat'iy o'tadi (native widget'lar -- masalan radio/checkbox,
     scrollbar -- OS yorug' rejimda bo'lsa ham bizning tanlovimizga mos
     keladi, aralashmaydi). */
  color-scheme: dark;

  --color-primary: #6366F1;
  --color-bg: #0D0C1A;
  --color-surface: #16152A;
  --color-text: #F0EFF8;
  --color-accent: var(--color-primary);
  --color-success: #3ED9C9;
  --color-danger: #F16B54;
  --color-border: #2A2850;
  --color-border-strong: #3A3560;
  /* Slightly brighter than the light-mode amber, for visibility on dark surfaces. */
  --color-notice: #FBBF24;

  /* Dark-mode primary (#6366F1) is ~4.3:1 as plain text on the dark bg --
     just under the 4.5:1 AA minimum, fine for a button background but not
     for body text. This lighter lavender (also from the reference design,
     used there as secondary-foreground) clears it comfortably (~9.7:1). */
  --color-success-text: var(--color-success);
  --color-warning-text: #A5B4FC;
  --color-danger-text: var(--color-danger);

  --color-muted: #9490B8;

  --bs-primary-rgb: 99, 102, 241;
  --bs-success-rgb: 62, 217, 201;
  --bs-danger-rgb: 241, 107, 84;
  --bs-warning-rgb: 99, 102, 241;
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-emphasis-color-rgb: 240, 239, 248;
  --bs-secondary-color: var(--color-muted);
  --bs-link-color: #A5B4FC;

  /* Bootstrap bakes the accordion chevron in as a fixed-color SVG data URI
     (dark stroke) -- invisible against a dark background otherwise. */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F0EFF8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Respect the OS preference when the visitor hasn't chosen explicitly yet
   (theme-toggle.js only ever sets data-theme="light"/"dark" once a choice
   is made, so "no attribute at all" means "follow the OS"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-primary: #6366F1;
    --color-bg: #0D0C1A;
    --color-surface: #16152A;
    --color-text: #F0EFF8;
    --color-accent: var(--color-primary);
    --color-success: #3ED9C9;
    --color-danger: #F16B54;
    --color-border: #2A2850;
    --color-border-strong: #3A3560;
    --color-notice: #FBBF24;
    --color-success-text: #3ED9C9;
    --color-warning-text: #A5B4FC;
    --color-danger-text: #F16B54;
    --color-muted: #9490B8;
    --bs-primary-rgb: 99, 102, 241;
    --bs-success-rgb: 62, 217, 201;
    --bs-danger-rgb: 241, 107, 84;
    --bs-warning-rgb: 99, 102, 241;
    --bs-body-color: var(--color-text);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: 240, 239, 248;
    --bs-secondary-color: var(--color-muted);
    --bs-link-color: #A5B4FC;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F0EFF8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.nav-link {
  font-family: var(--font-heading);
}

/* Bootstrap's default heading weight (500) reads too close to a generic
   system sans at a glance — bumping it makes Sora's geometric character
   actually visible, which is the point of using a distinct display font. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* Bootstrap's .btn-primary/.bg-primary/.text-primary read --bs-primary-rgb, but the
 * pre-built bootstrap.min.css also hardcodes a couple of selectors with literal color
 * values (e.g. .btn-primary background/border). Overriding them directly keeps the
 * accent system correct without recompiling Bootstrap's Sass. */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--color-primary) 85%, #000);
  border-color: color-mix(in srgb, var(--color-primary) 85%, #000);
}

.btn-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: color-mix(in srgb, var(--color-accent) 85%, #000);
  border-color: color-mix(in srgb, var(--color-accent) 85%, #000);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-outline-secondary:hover {
  background-color: var(--color-border);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.text-muted {
  color: var(--color-muted) !important;
}

/* .text-success/.text-warning/.text-danger read --bs-{color}-rgb, which
 * above is set to the bright badge/background brand colors — fine for
 * .bg-*/.btn-* but not for plain text (see --color-*-text comment). These
 * three overrides only affect the plain-text utility classes; badges,
 * buttons and progress bars keep using the bright colors as before. */
.text-success {
  color: var(--color-success-text) !important;
}

.text-warning {
  color: var(--color-warning-text) !important;
}

.text-danger {
  color: var(--color-danger-text) !important;
}

/* Surfaces: cards, the theme toggle, dropdowns etc. -- anything meant to
   sit visually "above" the page background, in both themes. Rounded and
   softly shadowed, matching the reference design's card language. */
.surface,
.card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Shared "premium" card look (documents/new_front_tz.md 2.2 note) -- used
   across dashboard stat cards, course cards, the lesson sidebar, etc. via
   this one class, instead of every component CSS file redefining its own
   radius/shadow. */
.surface-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(15, 14, 26, 0.04);
}

/* Shared "new/needs attention" dot (new_tz.md 559-561: a lesson already
   marked completed that has a newly-added, not-yet-passed quiz). Deliberately
   its own color (--color-notice) rather than --color-accent/-success -- see
   the --color-notice definition above for why. Used in the lesson sidebar,
   its module accordion header, and course_detail's topic-grid cards. */
.pending-quiz-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-notice);
  flex: 0 0 auto;
}

.pending-quiz-dot--corner {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
}

/* Bosqich 13: Telegram connected status (users/profile.html) -- same
   light-tint + dedicated "-text" token pattern as the other status badges
   in this app (e.g. .live-session-badge--present), safe in both themes. */
.telegram-connected-badge {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success-text);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

a {
  color: var(--bs-link-color);
}

/* Keyboard navigation must stay visible (new_front_tz.md 2.12) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Theme toggle button (base.html navbar) */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: #fff;
}

/* Account avatar (base.html navbar dropdown) -- same translucent-white
   treatment as .theme-toggle so both read as one consistent icon-button
   cluster against the solid indigo navbar. */
.navbar-avatar {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}


/* Sahifa o'tishi (2026-09-30): har bir to'liq sahifa yuklanishida (bu loyiha
   SPA emas, Django ko'p-sahifali ilova) <main> yengil fade+ko'tarilish bilan
   paydo bo'ladi -- "qattiq" almashinuv o'rniga. Faqat opacity+translateY,
   transform ishlatilmaydi: <main> ichida position:fixed elementlar bor
   (masalan quiz-timer) -- animatsiya davomida transform qo'yilsa, ular
   vaqtincha butun sahifaga emas, shu <main>ga nisbatan joylashib qolardi. */
@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

main {
  animation: page-fade-in 0.2s ease-out;
}

/* Har qanday tugma bosilganda sezilar-sezilmas bosilish effekti (2026-09-30). */
.btn {
  transition: transform 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Umumiy skeleton-loader utility (2026-09-30) -- bo'sh/oq ekran o'rniga
   kulrang "joy egallovchi" blok, pulsatsiya bilan. Hozircha video
   "tayyorlanmoqda" holatida ishlatiladi (static/css/lesson.css), lekin
   umumiy klass sifatida kelajakda boshqa joyda ham qayta ishlatiladi. */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.skeleton {
  background: var(--color-border);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

/* Respect prefers-reduced-motion: transitions/animations are opt-out for users who ask
 * for less motion, rather than something every future animation has to remember. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}