/* ============================================================
   ME-RIISE QUIZ — Admin dashboard
   ============================================================ */

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(420px,96vw); text-align:center; }
.login-card .brand { justify-content:center; margin-bottom:8px; }
.login-card h2 { margin: 14px 0 4px; }
.login-card .sub { color:var(--text-300); font-size:.9rem; margin-bottom:24px; }
.login-hint { margin-top:16px; font-size:.78rem; color:var(--text-400); background:rgba(255,255,255,.04); padding:10px 12px; border-radius:var(--r-md); }

/* ---------- Shell ---------- */
.admin-shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 16px; display:flex; flex-direction:column; gap:6px;
  background: rgba(8,12,26,.6); backdrop-filter: blur(16px); border-right:1px solid var(--glass-border-soft); }
.sidebar .brand { padding:6px 8px 18px; }
.nav-item { position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); color:var(--text-300);
  font-weight:600; font-size:.92rem; cursor:pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-item .ic { display:grid; place-items:center; width:22px; height:22px; color:var(--text-400); transition:color var(--dur-fast); }
.nav-item:hover { background:rgba(255,255,255,.045); color:var(--text-100); }
.nav-item:hover .ic { color:var(--text-200); }
.nav-item.active { background:rgba(47,107,255,.12); color:#fff; }
.nav-item.active .ic { color:var(--cyan); }
.nav-item.active::before { content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:3px; background:var(--cyan); }
.nav-spacer { flex:1; }
.nav-foot { font-size:.72rem; color:var(--text-500); padding:10px 14px; }

.admin-main { padding: clamp(18px,3vw,34px); min-width:0; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h1 { font-size: clamp(1.6rem,3vw,2.2rem); }
.page-head .muted { margin-top:4px; }

.mobile-bar { display:none; }
@media (max-width: 820px){
  .admin-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:60; left:0; top:0; width:250px; transform:translateX(-105%); transition:transform var(--dur) var(--ease-out); }
  .sidebar.open { transform:none; }
  .mobile-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; position:sticky; top:0; z-index:50;
    background:rgba(8,12,26,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--glass-border-soft); }
  .backdrop-nav { position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.5); }
}

/* ---------- Cards / lists ---------- */
.list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.item-card { padding:20px; display:flex; flex-direction:column; gap:10px; transition:transform var(--dur), box-shadow var(--dur); }
.item-card:hover { transform:translateY(-3px); box-shadow:var(--glow-blue); }
.item-card .title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.item-card .row-meta { display:flex; gap:8px; flex-wrap:wrap; }
.item-actions { display:flex; gap:8px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }

.recent-list { display:flex; flex-direction:column; }
.recent-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--glass-border-soft); }
.recent-row:last-child { border-bottom:none; }
.recent-row .ic { width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:1.1rem; }

/* ---------- Question editor ---------- */
.q-editor { display:flex; flex-direction:column; gap:14px; }
.q-block { padding:18px; }
.q-block .q-block-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.q-block .q-num { font-family:var(--font-display); font-weight:700; color:var(--cyan); }
.opt-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.opt-row .opt-color { width:16px;height:16px;border-radius:5px;flex:none; }
.opt-row input.input { flex:1; }
.opt-row .correct-toggle { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-300); white-space:nowrap; cursor:pointer; }
.opt-row input[type=radio] { accent-color: var(--success); width:18px; height:18px; }
.opt-c0{background:var(--a-red)} .opt-c1{background:var(--a-blue)} .opt-c2{background:var(--a-yellow)} .opt-c3{background:var(--a-green)}

/* ---------- Analytics bars ---------- */
.analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.chart-card { padding:22px; }
.chart-card h3 { margin-bottom:16px; }
.hbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hbar .lbl { width:130px; font-size:.85rem; color:var(--text-300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar .track { flex:1; height:22px; border-radius:20px; background:rgba(255,255,255,.06); overflow:hidden; }
.hbar .fill { height:100%; border-radius:20px; background:var(--grad-primary); animation:barGrow .8s var(--ease-out) both; transform-origin:left; }
.hbar .val { width:56px; text-align:right; font-family:var(--font-display); font-weight:700; font-size:.9rem; }

/* ---------- Search bar ---------- */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar .input, .toolbar .select { max-width:280px; }

.status-tag { font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.status-lobby{background:rgba(34,230,255,.16);color:var(--cyan-soft)}
.status-question,.status-reveal,.status-leaderboard{background:rgba(255,176,32,.16);color:#ffcf7a}
.status-ended{background:rgba(155,167,200,.16);color:var(--text-300)}

/* ---------- Line-icon system + refined accents ---------- */
.mr-ico { display:block; flex:none; }
.btn .mr-ico { width:18px; height:18px; }
.btn-sm .mr-ico { width:16px; height:16px; }

/* Stat tiles — single, calm accent instead of rainbow emoji */
.stat { display:flex; flex-direction:column; }
.stat-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(47,107,255,.12); color:var(--cyan); margin-bottom:16px; }
.stat .val { font-size:2rem; }
.stat .lbl { color:var(--text-400); }

/* Recent list icon chips */
.recent-row .ic { color:var(--text-300); }
.recent-row .ic.live { color:var(--a-red); background:rgba(255,71,87,.12); }
.recent-row .ic.done { color:var(--success); background:rgba(35,209,139,.12); }

/* Chips with inline icons */
.chip .mr-ico { width:14px; height:14px; opacity:.85; }

/* Toolbar search with leading icon */
.search-field { position:relative; max-width:320px; flex:1; }
.search-field .mr-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-400); width:18px; height:18px; }
.search-field .input { padding-left:42px; }

/* Card action buttons a touch quieter */
.item-actions .btn-ghost { background:rgba(255,255,255,.04); }
.item-actions .btn-ghost:hover { background:rgba(255,255,255,.08); }

/* Calmer background for a professional dashboard */
.bg-orbs span { opacity:.16; }
.bg-orbs span:nth-child(3), .bg-orbs span:nth-child(4) { display:none; }

/* Empty-state icon */
.empty .ic { display:flex; justify-content:center; }
.empty .mr-ico { color:var(--text-400); opacity:.55; }

/* Recent row icon chip keeps square shape with svg */
.recent-row .ic { display:grid; place-items:center; }