/* Dok se Vue ne montira, sirovi sablon sa vitičastim zagradama ne smije bljesnuti
   na ekranu, a najmanje na projektoru pred publikom. */
[v-cloak]{display:none !important}  /* jace od Tailwind klase .flex, koja se ucitava kasnije */

/* Drugi uvjet, ne zamjena za v-cloak. Tailwind ovdje nije stylesheet nego SKRIPTA koja
   svoj CSS ubaci tek nakon sto se DOM raspase (izmjereno: drugi <style> tag, 5.607
   znakova, sadrzi --tw-). Vue se zna montirati prije toga, v-cloak se skine, i jedan
   frame se vidi raspored bez Tailwindovih klasa. Klasa `boot` stoji na <html> od prvog
   trenutka i skida se na `load`, uz osigurac od 2 s ako load nikad ne padne.
   visibility, ne display: ne rusi mjere pa nema preslagivanja kad se pojavi. */
html.boot #app{visibility:hidden}

/* ============================================================
   EventQuiz Admin — design system (v2, 2026 SaaS smjernice)
   Učitava se POSLIJE lokalnih <style> blokova i preuzima vizuale:
   miran alat, jedna primarna akcija, bez gradijenata na kontrolama.
   Gradijent ostaje SAMO u logotipu (.grad-text).
   ============================================================ */

:root {
  --eq-bg: #141C48;
  --eq-surface-1: rgba(255,255,255,0.03);
  --eq-surface-2: rgba(255,255,255,0.055);
  --eq-border: rgba(255,255,255,0.09);
  --eq-border-strong: rgba(255,255,255,0.16);
  --eq-text: #EEF0FA;
  --eq-text-2: rgba(238,240,250,0.65);
  --eq-text-3: rgba(238,240,250,0.42);
  --eq-primary: #6366F1;
  --eq-primary-hover: #575AE8;
  --eq-danger: #EF4444;
  --eq-success: #22C55E;
  --eq-warning: #F59E0B;
  --eq-radius: 10px;
  --eq-radius-lg: 14px;
}

/* ── Podloga: bez dekorativnog sjaja u alatu ── */
body { background: var(--eq-bg) !important; background-image: none !important; color: var(--eq-text); }

/* ── Fokus prstenovi (tastatura) ── */
:focus-visible { outline: 2px solid #818CF8 !important; outline-offset: 2px; border-radius: 6px; }

/* ── Dugmad: primarna = puna indigo, NIKAD gradijent ── */
.btn { border-radius: var(--eq-radius); font-family: 'Poppins', sans-serif; font-weight: 600; }
.btn-primary,
.btn-start,
.btn-next {
  background: var(--eq-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover:not(:disabled),
.btn-start:hover,
.btn-next:hover { background: var(--eq-primary-hover) !important; opacity: 1 !important; box-shadow: none !important; }

.btn-ghost { background: var(--eq-surface-1) !important; border: 1px solid var(--eq-border) !important; color: var(--eq-text-2) !important; }
.btn-ghost:hover { background: var(--eq-surface-2) !important; border-color: var(--eq-border-strong) !important; color: var(--eq-text) !important; }

.btn-presentation { background: var(--eq-surface-1) !important; border: 1px solid var(--eq-border) !important; color: var(--eq-text-2) !important; }
.btn-presentation:hover { background: var(--eq-surface-2) !important; border-color: var(--eq-border-strong) !important; color: var(--eq-text) !important; }

/* Destruktivno: tiho dok ne zatreba */
.btn-danger, .btn-red, .btn-logout, .btn-orange {
  background: transparent !important;
  border: 1px solid var(--eq-border) !important;
  color: var(--eq-text-3) !important;
  box-shadow: none !important;
}
.btn-danger:hover, .btn-red:hover { border-color: rgba(239,68,68,0.5) !important; color: #FCA5A5 !important; background: rgba(239,68,68,0.08) !important; }
.btn-orange:hover { border-color: rgba(245,158,11,0.5) !important; color: #FCD34D !important; background: rgba(245,158,11,0.08) !important; }
.btn-logout:hover { border-color: rgba(239,68,68,0.5) !important; color: #FCA5A5 !important; background: rgba(239,68,68,0.08) !important; }
.btn-exit { background: transparent !important; border: 1px solid var(--eq-border) !important; color: var(--eq-text-3) !important; }
.btn-exit:hover { color: var(--eq-text-2) !important; border-color: var(--eq-border-strong) !important; }

/* ── Polja ── */
.field, .join-field, .opt-input {
  background: var(--eq-surface-1);
  border-color: var(--eq-border);
  color: var(--eq-text);
}
/* Native dropdown lista nasljeđuje svijetlu podlogu → opcije moraju imati svoju */
select.field option { background: #141C48; color: #EEF0FA; }
.field:focus, .opt-input:focus { border-color: var(--eq-primary) !important; background: var(--eq-surface-2) !important; }
label { color: var(--eq-text-3); }

/* ── Paneli, tabele ── */
.panel, .table-wrap { background: var(--eq-surface-1); border-color: var(--eq-border); border-radius: var(--eq-radius-lg); }
.qtable thead th, .utable thead th { color: var(--eq-text-3); }
/* Zaglavlje kolone s dugmadima ide desno, iznad same dugmadi. Stranice imaju vlastito
   `thead th{text-align:left}`, koje je specificnije od klase, pa se mora nadjacati ovdje. */
.qtable thead th.text-right, .ctable thead th.text-right, .utable thead th.text-right { text-align: right; }
.qtable tbody tr:hover, .utable tbody tr:hover { background: var(--eq-surface-2); }

/* ── Toggle (Auto/Manual, Single/Multiple): jedan akcenat, bez ljubičaste ── */
.type-btn.single-on, .type-btn.multi-on { background: var(--eq-primary) !important; color: #fff !important; }
.type-btn.off { color: var(--eq-text-3) !important; }
.type-btn.off:hover { color: var(--eq-text-2) !important; }

/* ── Bedževi: mirniji ── */
.pin-badge { background: var(--eq-surface-2); color: var(--eq-text-2); border-color: var(--eq-border); font-family: ui-monospace, monospace; letter-spacing: 0.08em; }
.time-badge { background: var(--eq-surface-1); color: var(--eq-text-3); border-color: var(--eq-border); }

/* ── Ikonice (inline SVG) ── */
.icon { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Sidebar / navigacija ── */
.nav, .topbar { background: rgba(16, 21, 58, 0.92); }
.sidebar { background: var(--eq-surface-1); }
.q-item.active { background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.35); }

/* ── App shell sa sidebarom (dashboard, CRM) ── */
.shell { display: flex; height: 100vh; overflow: hidden; }
.side { width: 224px; flex-shrink: 0; display: flex; flex-direction: column; background: rgba(16,21,58,0.6); border-right: 1px solid var(--eq-border); padding: 18px 14px; }
.side .logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; padding: 4px 10px 18px; }
a.logo { text-decoration: none; display: block; }
a.logo:hover { opacity: 0.85; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--eq-text-2); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; }
.side-link:hover { background: var(--eq-surface-2); color: var(--eq-text); }
.side-link.active { background: rgba(99,102,241,0.14); color: #C7CBFF; font-weight: 600; }
.side-foot { margin-top: auto; border-top: 1px solid var(--eq-border); padding-top: 12px; }
.side-user { padding: 6px 10px; font-size: 0.8rem; color: var(--eq-text-3); overflow: hidden; text-overflow: ellipsis; }
.main { flex: 1; overflow-y: auto; }
.page-head { position: sticky; top: 0; z-index: 10; background: rgba(20,28,72,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--eq-border); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; }
.page-body { padding: 24px 28px 48px; max-width: 1160px; }
/* Stranice s tablicama koriste punu sirinu; ogranicenje od 1160 px sluzi citanju,
   a tablici samo stvara prazninu desno i lomi kolone. */
.page-body.wide { max-width: none; }

/* ── Stat kartice (CRM) ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-card { background: var(--eq-surface-1); border: 1px solid var(--eq-border); border-radius: var(--eq-radius-lg); padding: 14px 16px; }
.stat-card b { display: block; font-family: 'Poppins', sans-serif; font-size: 1.45rem; font-weight: 700; }
.stat-card span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--eq-text-3); font-weight: 600; }

/* ── CRM detalj reda ── */
.acc-detail { background: rgba(0,0,0,0.14); border-top: 1px solid var(--eq-border); padding: 16px 20px; }
.acc-detail textarea { width: 100%; min-height: 64px; background: var(--eq-surface-1); border: 1px solid var(--eq-border); border-radius: 10px; padding: 10px 12px; color: var(--eq-text); font-family: 'Inter', sans-serif; font-size: 0.85rem; outline: none; resize: vertical; }
.acc-detail textarea:focus { border-color: var(--eq-primary); }
.user-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--eq-border); border-radius: 9px; background: var(--eq-surface-1); font-size: 0.82rem; }

/* ── Prazna stanja ── */
.empty-state { text-align: center; padding: 72px 24px; }
.empty-state .empty-icon { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--eq-text-3); }
.empty-state p.title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--eq-text-2); }
.empty-state p.sub { font-size: 0.85rem; color: var(--eq-text-3); margin: 6px 0 20px; }

/* ── Smanjena animacija ── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
