/* ==========================================================================
   SINOV — Design tokens & component layer
   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 {
  /* --- Brand & surfaces (space-separated RGB so Tailwind alpha works) ----- */
  --ink:        22 36 59;     /* #16243B  scholarly navy — primary           */
  --ink-700:    31 50 87;     /* #1F3257  raised navy                        */
  --ink-600:    42 68 116;    /* #2A4474  link / interactive navy            */
  --ink-400:    110 124 150;  /* #6E7C96  muted text                         */
  --ink-300:    150 161 182;  /* #96A1B6  faint text / icons                 */

  --paper:      250 248 243;  /* #FAF8F3  app background (clean warm paper)   */
  --surface:    255 255 255;  /* #FFFFFF  cards                              */
  --line:       231 226 214;  /* #E7E2D6  hairline borders                   */
  --line-soft:  240 236 228;  /* #F0ECE4  faint dividers                     */

  /* --- One purposeful accent + semantics --------------------------------- */
  --saffron:    224 161 6;    /* #E0A106  brand accent: timer, CTAs          */
  --saffron-soft: 244 200 75; /* #F4C84B                                     */
  --saffron-deep: 184 131 10; /* #B8830A                                     */

  --correct:    26 127 87;    /* #1A7F57  right answers — never branding     */
  --wrong:      192 57 43;    /* #C0392B  wrong answers — never branding     */
  --info:       42 68 116;    /* shares interactive navy                     */

  /* --- Radii scale (intentional, not one-size) --------------------------- */
  --r-chip: 7px;
  --r-card: 14px;
  --r-field: 9px;

  /* --- Elevation (real depth, not a single faint shadow) ------------------ */
  --shadow-card: 0 1px 2px rgb(var(--ink) / .06), 0 12px 28px -16px rgb(var(--ink) / .22);
  --shadow-pop:  0 8px 16px -6px rgb(var(--ink) / .14), 0 24px 48px -24px rgb(var(--ink) / .30);
  --ring-focus:  0 0 0 3px rgb(var(--saffron) / .38);
}

/* --- Base ----------------------------------------------------------------- */
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--saffron) / .28); }

/* Subtle "exam paper" grid that grounds the academic feel without clutter */
.paper-grid {
  background-image:
    linear-gradient(rgb(var(--ink) / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / .035) 1px, transparent 1px);
  background-size: 28px 28px;
  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(--ink) / .28);
  color: rgb(var(--ink) / .70);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  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: rgb(var(--ink));
  border-color: rgb(var(--ink));
  color: rgb(var(--paper));
}
.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));
  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(--ink) / .35); }
.answer.is-selected {
  border-color: rgb(var(--ink));
  background: rgb(var(--ink) / .035);
  box-shadow: inset 0 0 0 1px rgb(var(--ink));
}
.answer.is-selected .bubble { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); }

/* Progress strip — a row of bubbles mirroring the answer sheet */
.dot { width: 11px; height: 11px; border-radius: 9999px; border: 1.5px solid rgb(var(--ink) / .35); background: transparent; transition: all .14s ease; }
.dot--answered { background: rgb(var(--ink)); border-color: rgb(var(--ink)); }
.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 = dark/filled,
   unanswered = light, current question = saffron ring. */
.sheet-dot { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 1.5px solid rgb(var(--ink) / .15); background: rgb(var(--ink) / .045); color: rgb(var(--ink) / .5);
  font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .14s ease; }
.sheet-dot:hover { border-color: rgb(var(--ink) / .4); }
.sheet-dot--answered { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); }
.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);
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  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: .25rem .6rem; 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(--ink))) calc(var(--p) * 1%), rgb(var(--ink) / .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
   ========================================================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.62rem 1.1rem; border-radius: var(--r-field); font-weight:600; font-size:.92rem;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .06s ease; cursor:pointer;
  border:1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-primary:hover { background: rgb(var(--ink-700)); }
.btn-accent  { background: rgb(var(--saffron)); color: #2a1d00; }
.btn-accent:hover { background: rgb(var(--saffron-deep)); color:#fff; }
.btn-ghost   { background: transparent; color: rgb(var(--ink)); border-color: rgb(var(--line)); }
.btn-ghost:hover { background: rgb(var(--ink) / .04); border-color: rgb(var(--ink) / .25); }
.btn-danger  { background: rgb(var(--wrong)); color:#fff; }

.field {
  width:100%; padding:.62rem .8rem; background: rgb(var(--surface));
  border:1.5px solid rgb(var(--line)); border-radius: var(--r-field);
  color: rgb(var(--ink)); font-size:.95rem;
}
.field::placeholder { color: rgb(var(--ink) / .4); }
.field:focus { border-color: rgb(var(--ink) / .5); }
.label { display:block; font-size:.82rem; font-weight:600; color: rgb(var(--ink) / .75); margin-bottom:.3rem; }

/* --- Toasts --------------------------------------------------------------- */
.toast { box-shadow: var(--shadow-pop); border:1px solid rgb(var(--line)); }

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

/* --- 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(--paper)); }