/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL — Cinematic Design
   ═══════════════════════════════════════════════════════════ */

/* ── Root ───────────────────────────────────────────────── */
.admin-root {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  height:100%; overflow:hidden; background:var(--bg-base);
  position:relative;
}

/* Ambient glow background */
.admin-root::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:50%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(236,72,153,.05) 0%, transparent 50%);
  pointer-events:none; z-index:0;
}

.admin-body {
  min-height:0;
  flex:1; display:flex; overflow:hidden; position:relative; z-index:1;
}
.admin-content {
  min-height:0;
  flex:1; overflow-y:auto; background:transparent;
}

/* ── Sidebar nav ────────────────────────────────────────── */
.admin-root .stg-nav {
  background: var(--bg-1);
  height:100%; overflow-y:auto;
  border-right:1px solid var(--b2);
  padding:var(--s3) 0;
}

/* ── Section ────────────────────────────────────────────── */
.adm-section {
  padding:var(--s5) var(--s5) var(--s7);
  display:flex; flex-direction:column; gap:var(--s4);
  max-width:1100px; position:relative;
}
.adm-section-title {
  font-size:22px; font-weight:900; letter-spacing:-.4px;
  color:var(--t1); display:flex; align-items:center; gap:10px;
}
.adm-section-title i {
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--b-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--accent-glow); flex-shrink:0;
}

/* ── Stats grid ─────────────────────────────────────────── */
.adm-stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(175px, 1fr));
  gap:var(--s3);
}

.adm-stat-card {
  background:var(--bg-2);
  border:1px solid var(--b2);
  border-radius:var(--r-xl);
  padding:var(--s4);
  display:flex; align-items:center; gap:var(--s3);
  transition:all var(--t-spring);
  position:relative; overflow:hidden; cursor:default;
}
.adm-stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.adm-stat-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; top:0;
  background:linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 60%);
  pointer-events:none;
}
.adm-stat-card:hover {
  border-color:var(--b3);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md), 0 0 0 1px var(--b2);
}

.adm-stat-icon {
  width:48px; height:48px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.06);
  position:relative;
}
.adm-stat-icon::after {
  content:''; position:absolute; inset:-4px;
  border-radius:var(--r-xl);
  background:inherit; opacity:.15; filter:blur(8px);
  z-index:-1;
}

.adm-stat-body  { flex:1; overflow:hidden; }
.adm-stat-value {
  font-size:28px; font-weight:900; color:var(--t1); letter-spacing:-.8px;
  line-height:1.1;
}
.adm-stat-label { font-size:12px; color:var(--t2); font-weight:600; margin-top:3px; }
.adm-stat-sub   { font-size:11px; color:var(--t3); margin-top:2px; }

/* ── Card ───────────────────────────────────────────────── */
.adm-card {
  background:var(--bg-2);
  border:1px solid var(--b2);
  border-radius:var(--r-xl);
  overflow:hidden; position:relative;
}
.adm-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  z-index:1;
}

.adm-card-header {
  padding:var(--s2) var(--s4);
  font-size:12px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.8px;
  border-bottom:1px solid var(--b2);
  background:rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:space-between;
}
.adm-card-header i { color:var(--accent-glow); margin-right:6px; }

/* ── Performance box ────────────────────────────────────── */
.adm-perf-box {
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.adm-perf-bar-wrap {
  display:flex; align-items:center; gap:var(--s3);
}
.adm-perf-bar-wrap > span:first-child { font-size:13px; color:var(--t2); flex:1; }
.adm-perf-bar-wrap > span:last-child  { font-size:14px; font-weight:800; min-width:42px; text-align:right; }

.adm-progress-track {
  height:6px; background:var(--b2);
  border-radius:var(--r-full); overflow:hidden; flex:1;
}
.adm-progress-track > div {
  height:100%; border-radius:var(--r-full);
  transition:width .6s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.adm-progress-track > div::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:20px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.3));
}

.adm-feedback-row {
  display:flex; gap:var(--s5); padding-top:var(--s2);
  border-top:1px solid var(--b1);
}
.adm-fb-item { text-align:center; }
.adm-fb-num  { font-size:26px; font-weight:900; letter-spacing:-.5px; }
.adm-fb-lbl  { font-size:11px; color:var(--t3); margin-top:3px; }

/* ── Top categories ─────────────────────────────────────── */
.adm-top-cat-row {
  display:flex; align-items:center; gap:var(--s3);
  padding:12px var(--s4); border-bottom:1px solid var(--b1);
  transition:background var(--t-fast);
}
.adm-top-cat-row:last-child { border-bottom:none; }
.adm-top-cat-row:hover { background:var(--bg-hover); }
.adm-rank {
  width:24px; font-size:12px; font-weight:800; color:var(--t3);
  text-align:center; flex-shrink:0;
}
.adm-rank.gold   { color:#fbbf24; }
.adm-rank.silver { color:#94a3b8; }
.adm-rank.bronze { color:#b45309; }

/* ── Filters bar ────────────────────────────────────────── */
.adm-filters {
  display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;
  padding:var(--s3) var(--s4);
  background:var(--bg-2); border:1px solid var(--b2);
  border-radius:var(--r-xl);
}

.adm-select {
  padding:9px 30px 9px 12px;
  background:var(--bg-3); border:1.5px solid var(--b2);
  border-radius:var(--r-lg); color:var(--t1); font-size:13px;
  font-family:var(--font); cursor:pointer;
  transition:all var(--t-mid); outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5a80'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.adm-select:focus { border-color:var(--bfocus); background-color:rgba(124,58,237,.06); box-shadow:var(--glow-xs); }
.adm-select option { background:var(--bg-3); }
.adm-select--sm { font-size:12px; padding:5px 24px 5px 8px; border-radius:var(--r-md); }

/* ── Table ──────────────────────────────────────────────── */
.adm-table-wrap {
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--b2); background:var(--bg-2);
  position:relative;
}
.adm-table-wrap::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}

.adm-table {
  width:100%; border-collapse:collapse; font-size:14px;
}
.adm-table thead { position:sticky; top:0; z-index:1; }
.adm-table th {
  padding:12px var(--s4); text-align:left;
  font-size:10px; font-weight:800; color:var(--t3);
  text-transform:uppercase; letter-spacing:.9px;
  border-bottom:1px solid var(--b2);
  background:var(--bg-3);
  white-space:nowrap;
}
.adm-table td {
  padding:13px var(--s4); color:var(--t1);
  border-bottom:1px solid var(--b1);
  vertical-align:middle;
}
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tbody tr {
  transition:background var(--t-fast);
}
.adm-table tbody tr:hover td { background:rgba(124,58,237,.04); }

/* ── Mini confidence bar ────────────────────────────────── */
.adm-mini-bar {
  width:48px; height:4px; background:var(--b2);
  border-radius:var(--r-full); overflow:hidden; flex-shrink:0;
}
.adm-mini-bar > div {
  height:100%; border-radius:var(--r-full);
  transition:width .4s ease;
}

/* ── Badges ─────────────────────────────────────────────── */
.adm-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-full);
  font-size:11px; font-weight:700;
  background:var(--bg-4); color:var(--t2);
  border:1px solid var(--b2); white-space:nowrap;
  letter-spacing:.02em;
}
.adm-badge--lang    { background:rgba(124,58,237,.12); color:var(--accent-glow); border-color:var(--b-accent); }
.adm-badge--active  { background:rgba(34,197,94,.1);   color:var(--green);        border-color:rgba(34,197,94,.3); }
.adm-badge--inactive{ background:rgba(248,113,113,.08);color:var(--red);          border-color:rgba(248,113,113,.2); }
.adm-badge--waiting { background:rgba(251,191,36,.1);  color:var(--yellow);       border-color:rgba(251,191,36,.3); }
.adm-badge--assigned{ background:rgba(34,197,94,.1);   color:var(--green);        border-color:rgba(34,197,94,.3); }
.adm-badge--closed  { background:var(--bg-4);          color:var(--t3);           border-color:var(--b1); }

/* ── Pagination ─────────────────────────────────────────── */
.adm-pagination {
  display:flex; gap:4px; justify-content:center;
  flex-wrap:wrap; padding:var(--s3) 0 var(--s1);
}
.adm-pg-btn {
  min-width:36px; height:36px; padding:0 var(--s2);
  border-radius:var(--r-md); font-size:13px; font-weight:600;
  background:var(--bg-3); border:1.5px solid var(--b2); color:var(--t2);
  cursor:pointer; transition:all var(--t-mid);
  display:flex; align-items:center; justify-content:center;
  gap:4px;
}
.adm-pg-btn:hover:not(:disabled) { background:var(--bg-4); color:var(--t1); border-color:var(--b3); }
.adm-pg-btn.active {
  background:var(--accent-soft); color:var(--accent-glow);
  border-color:var(--b-accent); box-shadow:var(--glow-xs);
}
.adm-pg-btn:disabled { opacity:.3; cursor:default; }

/* ── Empty states ───────────────────────────────────────── */
.adm-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:var(--s6) var(--s4); gap:var(--s3); text-align:center;
}
.adm-empty i { font-size:48px; opacity:.25; }
.adm-empty-title { font-size:16px; font-weight:700; color:var(--t1); }
.adm-empty-sub   { font-size:13px; color:var(--t3); max-width:260px; line-height:1.6; }

/* ── Log message cells ──────────────────────────────────── */
.adm-msg-cell {
  max-width:250px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.adm-msg-cell:hover { white-space:normal; overflow:visible; }

/* ── User row ───────────────────────────────────────────── */
.adm-user-row {
  display:flex; align-items:center; gap:var(--s2);
}
.adm-user-meta .name { font-weight:600; font-size:13px; }
.adm-user-meta .user { font-size:11px; color:var(--t3); margin-top:1px; }

/* ── Confidence cell ────────────────────────────────────── */
.adm-conf-cell {
  display:flex; align-items:center; gap:6px;
}
.adm-conf-num {
  font-size:13px; font-weight:800; min-width:32px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px) {
  .adm-section { padding:var(--s3); gap:var(--s3); }
  .adm-stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .admin-body { flex-direction:column; }
  .adm-stats-grid { grid-template-columns:1fr 1fr; }
  .adm-table td, .adm-table th { padding:8px var(--s2); font-size:12px; }
}