/* ==========================================================================
   SINOV — Design tokens & component layer
   "Kelajakka ta'lim" dizayn tizimi: akademik ishonch + matematik grid.
   Display: Sora · Body: Manrope · Brend: ko'k (#1F4E79) + oltin (#F5A524).
   Single source of truth for the look. Tailwind (see base.html) references
   these RGB triplets via rgb(var(--x) / <alpha-value>), so re-theming the whole
   product = editing the values in :root below. See DESIGN.md for the rationale.
   ========================================================================== */

:root {
  /* --- Text (navy-asosli) — space-separated RGB so Tailwind alpha works --- */
  --ink:        17 32 58;     /* #11203A  navy — headings / primary text     */
  --ink-700:    43 58 85;     /* #2B3A55  body text navy                     */
  --ink-600:    40 100 160;   /* #2864A0  link / interactive blue            */
  --ink-400:    133 147 169;  /* #8593A9  muted text                         */
  --ink-300:    170 182 200;  /* #AAB6C8  faint text / icons                 */

  --paper:      245 248 252;  /* #F5F8FC  app background (soft blue)         */
  --surface:    255 255 255;  /* #FFFFFF  cards                              */
  --line:       228 235 243;  /* #E4EBF3  hairline borders                   */
  --line-soft:  238 244 251;  /* #EEF4FB  faint dividers                     */
  --line-strong: 210 221 233; /* #D2DDE9  field borders                      */

  /* --- Brend ko'k shkalasi ------------------------------------------------ */
  --brand:        31 78 121;  /* #1F4E79  asosiy quyuq ko'k                  */
  --brand-deep:   21 54 91;   /* #15365B  footer / eng quyuq                 */
  --brand-800:    26 66 105;  /* #1A4269                                     */
  --brand-600:    40 100 160; /* #2864A0                                     */
  --brand-bright: 46 117 182; /* #2E75B6  yorqin ko'k                        */
  --brand-400:    91 151 207; /* #5B97CF                                     */
  --brand-200:   196 221 242; /* #C4DDF2                                     */
  --brand-100:   230 240 250; /* #E6F0FA                                     */
  --brand-50:    242 247 252; /* #F2F7FC                                     */

  /* --- Oltin urg'u (CTA, timer, gamifikatsiya) + semantics ---------------- */
  --saffron:      245 165 36; /* #F5A524  gold-500                           */
  --saffron-soft: 255 190 77; /* #FFBE4D  gold-400                           */
  --saffron-deep: 214 134 10; /* #D6860A  gold-600                           */

  --correct:    46 125 50;    /* #2E7D32  right answers — never branding     */
  --wrong:      192 57 43;    /* #C0392B  wrong answers — never branding     */
  --info:       46 117 182;   /* shares bright brand blue                    */

  /* --- Radii scale (yumaloq, mehribon) ------------------------------------ */
  --r-chip: 999px;            /* pill chips                                  */
  --r-card: 20px;
  --r-field: 14px;

  /* --- Elevation (mayin, qatlamli) ----------------------------------------- */
  --shadow-card: 0 2px 8px rgb(var(--ink) / .06);
  --shadow-pop:  0 18px 48px rgb(var(--ink) / .12);
  --shadow-brand: 0 12px 30px rgb(var(--brand) / .22);
  --shadow-gold:  0 10px 26px rgb(var(--saffron-deep) / .28);
  --ring-focus:  0 0 0 3px rgb(var(--brand-400) / .55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Base ----------------------------------------------------------------- */
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
  line-height: 1.6;               /* site.css body bilan bir xil ritm */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--brand-200)); color: rgb(var(--brand-deep)); }

/* Sarlavhalar — sayt tipografikasi: Sora, qalin, navy (utility klasslar ustun) */
h1, h2, h3, h4 {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: rgb(var(--ink));
  letter-spacing: -0.01em;
  line-height: 1.18;
}
h1 { font-weight: 800; }
strong, b { font-weight: 700; }

/* "Matematik grid" imzosi — akademik his beruvchi mayin katak fon.
   Katak o'lchami public saytdagi .hero::before bilan bir xil (30px). */
.paper-grid {
  background-image:
    linear-gradient(rgb(var(--brand) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--brand) / .05) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: -1px -1px;
}

/* Numbers, codes, timers — measured-instrument feel */
.tnum { font-variant-numeric: tabular-nums; }

/* --- Focus visibility (accessibility floor) ------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-field);
}

/* ==========================================================================
   SIGNATURE: the OMR answer bubble
   Answer options render as real fillable exam-sheet bubbles.
   ========================================================================== */
.bubble {
  --b: 40px;
  width: var(--b); height: var(--b);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 2px solid rgb(var(--brand) / .30);
  color: rgb(var(--brand) / .75);
  font-family: "Sora", ui-sans-serif, sans-serif;
  font-weight: 700;
  background: rgb(var(--surface));
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .08s ease;
  user-select: none;
}
.bubble--filled {              /* the "pencil fill" */
  background: linear-gradient(135deg, rgb(var(--brand-bright)), rgb(var(--brand-800)));
  border-color: rgb(var(--brand));
  color: #fff;
}
.bubble--correct { background: rgb(var(--correct)); border-color: rgb(var(--correct)); color: #fff; }
.bubble--wrong   { background: rgb(var(--wrong));   border-color: rgb(var(--wrong));   color: #fff; }

/* A whole answer row that behaves like a tappable bubble target */
.answer {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem;
  border: 1.5px solid rgb(var(--line-strong));
  border-radius: var(--r-field);
  background: rgb(var(--surface));
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.answer:hover { border-color: rgb(var(--brand-400)); background: rgb(var(--brand-50)); }
.answer.is-selected {
  border-color: rgb(var(--brand-600));
  background: rgb(var(--brand-50));
  box-shadow: inset 0 0 0 1px rgb(var(--brand-600));
}
.answer.is-selected .bubble {
  background: linear-gradient(135deg, rgb(var(--brand-bright)), rgb(var(--brand-800)));
  border-color: rgb(var(--brand)); color: #fff;
}

/* Progress strip — a row of bubbles mirroring the answer sheet */
.dot { width: 11px; height: 11px; border-radius: 9999px; border: 1.5px solid rgb(var(--brand) / .35); background: transparent; transition: all .14s ease; }
.dot--answered { background: rgb(var(--brand)); border-color: rgb(var(--brand)); }
.dot--current  { border-color: rgb(var(--saffron)); box-shadow: 0 0 0 3px rgb(var(--saffron) / .25); }

/* Editor: a chosen option/answer bubble turns green (toggled by JS, so it's a
   real class rather than a dynamically-generated Tailwind utility). */
.opt-bubble.opt-correct { background: rgb(var(--correct)); border-color: rgb(var(--correct)); color: #fff; }

/* Numbered answer-sheet (bottom of the exam page): answered = brand/filled,
   unanswered = light, current question = gold ring. */
.sheet-dot { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 1.5px solid rgb(var(--brand) / .18); background: rgb(var(--brand) / .05); color: rgb(var(--brand) / .55);
  font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .14s ease; }
.sheet-dot:hover { border-color: rgb(var(--brand-400)); }
.sheet-dot--answered { background: rgb(var(--brand)); border-color: rgb(var(--brand)); color: #fff; }
.sheet-dot--current { border-color: rgb(var(--saffron)); box-shadow: 0 0 0 3px rgb(var(--saffron) / .3); }

/* ==========================================================================
   Mobile-safe math — a wide KaTeX formula (long fraction, big expression)
   scrolls inside its own box instead of stretching the card past the screen
   edge. This is the root fix for "telefonda gorizontal toshib ketadi".
   ========================================================================== */
/* overflow-y: hidden keeps a tiny vertical scrollbar (the ▲▼ arrows on desktop)
   from ever appearing on a math box — only horizontal scroll for wide formulas. */
[data-math-inline] { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.sinov-opt { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; font-size: var(--opt-size, 1em); }
/* a stray-wide formula still can't drag the card past the screen edge */
.q-item, .answer { max-width: 100%; }
/* slim, unobtrusive scrollbar for the (horizontal) math overflow */
[data-math-inline]::-webkit-scrollbar, .sinov-opt::-webkit-scrollbar { height: 4px; }
[data-math-inline]::-webkit-scrollbar-thumb, .sinov-opt::-webkit-scrollbar-thumb { background: rgb(var(--ink) / .18); border-radius: 4px; }

/* ==========================================================================
   Cards, chips, lock state
   ========================================================================== */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
/* ko'tariluvchi karta (havola-kartalar templatelarda hover utility bilan ham
   kuchaytiradi) */
.card-hover { transition: transform .2s var(--ease), box-shadow .25s, border-color .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgb(var(--ink) / .08); border-color: rgb(var(--brand-200)); }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 5px 11px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;   /* site.css .chip bilan mos */
  border-radius: var(--r-chip);
  border: 1px solid transparent;
}

/* Locked test: embossed, visibly inert — clearly not clickable */
.lock-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--r-chip);
  background: rgb(var(--ink) / .05);
  color: rgb(var(--ink) / .55);
  border: 1px solid rgb(var(--ink) / .10);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
}
.is-locked {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgb(var(--ink) / .025) 0 10px, transparent 10px 20px),
    rgb(var(--surface));
  border-style: dashed;
  border-color: rgb(var(--ink) / .16);
  cursor: not-allowed;
}
.is-locked .test-title { color: rgb(var(--ink) / .5); }

/* ==========================================================================
   Score ring (echoes the bubble's circular language) — set --p (0..100)
   ========================================================================== */
.ring {
  --p: 0; --size: 84px; --t: 8px;
  width: var(--size); height: var(--size); border-radius: 9999px;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, rgb(var(--surface)) calc(100% - var(--t) - 1px), transparent calc(100% - var(--t))),
    conic-gradient(var(--ring-color, rgb(var(--brand-bright))) calc(var(--p) * 1%), rgb(var(--brand) / .10) 0);
}
.ring--good { --ring-color: rgb(var(--correct)); }
.ring--mid  { --ring-color: rgb(var(--saffron)); }
.ring--low  { --ring-color: rgb(var(--wrong)); }

/* ==========================================================================
   Buttons & fields — pill shakl, gradient, mayin ko'tarilish
   ========================================================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius: 999px;   /* site.css .btn bilan pixel-mos */
  font-family: "Sora", ui-sans-serif, sans-serif; font-weight:600; font-size:.96rem;
  transition: transform .15s var(--ease), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
  cursor:pointer; border:1.5px solid transparent; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background-image: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-800)));
  color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { box-shadow: 0 16px 34px rgb(var(--brand) / .32); color:#fff; }
.btn-accent  { background-image: linear-gradient(135deg, rgb(var(--saffron-soft)), rgb(var(--saffron-deep)));
  color: #3a2600; box-shadow: var(--shadow-gold); }
.btn-accent:hover { color: #3a2600; }
.btn-ghost   { background: transparent; color: rgb(var(--ink-700)); border-color: rgb(var(--line-strong)); }
.btn-ghost:hover { background: rgb(var(--brand-50)); border-color: rgb(var(--brand-bright)); color: rgb(var(--brand)); }
.btn-danger  { background: rgb(var(--wrong)); color:#fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.field {
  width:100%; padding:12px 15px; background: rgb(var(--paper));   /* site.css input bilan mos */
  border:1.5px solid rgb(var(--line-strong)); border-radius: var(--r-field);
  color: rgb(var(--ink)); font-size:.98rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field::placeholder { color: rgb(var(--ink) / .4); }
.field:focus { border-color: rgb(var(--brand-bright)); background: rgb(var(--surface));
  box-shadow: 0 0 0 4px rgb(var(--brand-100)); outline: none; }
.label { display:block; font-family: "Sora", ui-sans-serif, sans-serif;
  font-size:.82rem; font-weight:600; color: rgb(var(--ink) / .8); margin-bottom:.3rem; }

/* --- Toasts --------------------------------------------------------------- */
.toast { box-shadow: var(--shadow-pop); border:1px solid rgb(var(--line));
  border-left: 4px solid rgb(var(--brand-bright)); }
.toast--success { border-left-color: rgb(var(--correct)); }
.toast--error   { border-left-color: rgb(var(--wrong)); }
.toast--warning { border-left-color: rgb(var(--saffron)); }

/* --- Tables (Grid.js / DataTables theming hook) --------------------------- */
.gridjs-wrapper { box-shadow:none !important; border:1px solid rgb(var(--line)) !important; border-radius: var(--r-card) !important; }
.gridjs-table { font-family: inherit !important; }
.gridjs-th { background: rgb(var(--paper)) !important; color: rgb(var(--ink-400)) !important;
  text-transform: uppercase; letter-spacing: .06em; font-size: .76rem !important; }
.gridjs-tr:hover td { background: rgb(var(--brand-50)) !important; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Custom scrollbar (quiet) -------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ink) / .25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--ink) / .22); border-radius: 9999px; border: 3px solid rgb(var(--surface)); }