/* ── Admin Panel CSS ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0d0d20;
  --surface:    #161628;
  --card-bg:    #1a1a35;
  --border:     #252545;
  --text:       #e8e8f0;
  --text-muted: #7878a0;
  --accent:     #7c3aed;
  --success:    #22c55e;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --sidebar-w:  240px;
  --topbar-h:   52px;
  --radius:     10px;
  --font:       'Inter', system-ui, sans-serif;
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform .25s;
}
.admin-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar-logo { padding: 1.2rem 1rem; font-size: 1.15rem; font-weight: 800;
                border-bottom: 1px solid var(--border); }
.sidebar-nav  { flex: 1; padding: .75rem 0; overflow-y: auto; }
.nav-item {
  display: block; padding: .65rem 1rem; color: var(--text-muted);
  font-size: .9rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: all .15s;
  text-decoration: none;
}
.nav-item:hover { color: var(--text); background: rgba(124,58,237,.08); text-decoration: none; }
.nav-item.active { color: #fff; background: rgba(124,58,237,.15); border-left-color: var(--accent); }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); font-size: .85rem; }
.admin-name { display: block; font-weight: 600; }
.admin-role { display: inline-block; margin: .25rem 0 .5rem; }
.btn-logout { background: transparent; border: 1px solid var(--border); color: var(--text-muted);
              padding: .3rem .75rem; border-radius: 6px; cursor: pointer; font-size: .8rem;
              transition: all .15s; width: 100%; }
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }
.badge-role-superadmin { background: rgba(239,68,68,.15);   color: #fca5a5; padding:.1rem .5rem; border-radius:10px; }
.badge-role-editor     { background: rgba(245,158,11,.15);  color: #fcd34d; padding:.1rem .5rem; border-radius:10px; }
.badge-role-viewer     { background: rgba(100,100,130,.15); color: #aaa;    padding:.1rem .5rem; border-radius:10px; }

/* ── Topbar ──────────────────────────────────────────────────────────────────── */
.admin-topbar { height: var(--topbar-h); border-bottom: 1px solid var(--border);
                display: flex; align-items: center; padding: 0 1.5rem; }
.sidebar-toggle { display: none; background: none; border: 1px solid var(--border);
                  color: var(--text); padding: .3rem .6rem; border-radius: 6px; cursor: pointer; font-size: 1.1rem; }

/* ── Content ─────────────────────────────────────────────────────────────────── */
.admin-content { padding: 1.5rem; flex: 1; max-width: 1200px; }
.admin-page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; }
.admin-page-header { display: flex; align-items: center; justify-content: space-between;
                     margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 1.25rem; }
.card + .card, .mt-3 { margin-top: 1.25rem; }
.mb-3 { margin-bottom: 1.25rem; }
.mt-2 { margin-top: .75rem; }

/* ── Stats ──────────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card  { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
              padding: 1.1rem; text-align: center; }
.stat-icon  { font-size: 1.8rem; margin-bottom: .3rem; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--accent); }
.stat-label { font-size: .8rem; color: var(--text-muted); }
.stat-cards-sm { display: flex; gap: .75rem; flex-wrap: wrap; }
.stat-card-sm   { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
                  padding: .5rem .85rem; font-size: .85rem; }

.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width:800px) { .admin-two-col { grid-template-columns: 1fr; } }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { padding: .6rem .75rem; text-align: left; font-size: .75rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.table td { padding: .55rem .75rem; border-bottom: 1px solid rgba(37,37,69,.7); vertical-align: middle; }
.table tr:hover td { background: rgba(124,58,237,.04); }
.table-count { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; }
.table-sm th, .table-sm td { padding: .45rem .65rem; }
.info-table th { width: 35%; color: var(--text-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
       padding:.5rem 1rem; border-radius:7px; font-size:.875rem; font-weight:600;
       cursor:pointer; border:1.5px solid transparent; transition:all .15s;
       white-space:nowrap; text-decoration:none; font-family:inherit; }
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--accent);  color:#fff; border-color:var(--accent); }
.btn-primary:hover { background: #6d28d9; }
.btn-outline   { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-outline:hover { background: rgba(124,58,237,.1); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }
.btn-warning   { background: rgba(245,158,11,.15); color: var(--warning); border-color: rgba(245,158,11,.4); }
.btn-danger    { background: rgba(239,68,68,.12);  color: var(--danger);  border-color: rgba(239,68,68,.4); }
.btn-warning:hover { background: rgba(245,158,11,.25); }
.btn-danger:hover  { background: rgba(239,68,68,.25); }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs { padding: .2rem .5rem;  font-size: .75rem; }
.btn-block { width: 100%; }
.btn-lg { padding: .7rem 1.5rem; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.15rem .5rem; border-radius:12px; font-size:.72rem; font-weight:600; }
.badge-blue    { background:rgba(59,130,246,.15);  color:#93c5fd; }
.badge-purple  { background:rgba(139,92,246,.15);  color:#c4b5fd; }
.badge-green   { background:rgba(16,185,129,.15);  color:#6ee7b7; }
.badge-orange  { background:rgba(249,115,22,.15);  color:#fdba74; }
.badge-easy    { background:rgba(34,197,94,.15);   color:#86efac; }
.badge-medium  { background:rgba(245,158,11,.15);  color:#fcd34d; }
.badge-hard    { background:rgba(239,68,68,.15);   color:#fca5a5; }
.badge-active  { background:rgba(34,197,94,.12);   color:var(--success); }
.badge-inactive{ background:rgba(239,68,68,.12);   color:var(--danger); }
.badge-version { background:rgba(124,58,237,.15);  color:#c4b5fd; }
.badge-action  { background:rgba(59,130,246,.12);  color:#93c5fd; }
.badge-preview { background:rgba(245,158,11,.12);  color:var(--warning); }
.status-waiting  { background:rgba(59,130,246,.12);  color:#93c5fd; }
.status-active   { background:rgba(34,197,94,.12);   color:var(--success); }
.status-finished { background:rgba(124,58,237,.12);  color:#c4b5fd; }
.status-cancelled{ background:rgba(100,100,130,.12); color:#aaa; }
.status-solved   { background:rgba(34,197,94,.12);   color:var(--success); }
.status-pending  { background:rgba(100,100,130,.12); color:#aaa; }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem; font-weight:500; }
.alert-success { background:rgba(34,197,94,.12);  color:var(--success); border:1px solid rgba(34,197,94,.25); }
.alert-error   { background:rgba(239,68,68,.12);  color:var(--danger);  border:1px solid rgba(239,68,68,.25); }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.form-row .form-group { flex: 1; min-width: 160px; }
.col-3 { flex: 3 1 160px; }
.col-6 { flex: 6 1 280px; }
.form-group  { margin-bottom: .9rem; }
.form-label  { display:block; margin-bottom:.3rem; font-size:.82rem; font-weight:500; color:var(--text-muted); }
.form-input, .form-select, .form-textarea {
  width:100%; padding:.55rem .8rem;
  background:var(--surface); border:1.5px solid var(--border);
  color:var(--text); border-radius:7px; font-size:.875rem; font-family:inherit;
  transition:border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--accent); }
.form-textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:.76rem; color:var(--text-muted); margin-top:.25rem; }
.form-card { max-width: 860px; }
.form-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem; border-top:1px solid var(--border); padding-top:1.25rem; }
.pair-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.pair-input { width:70px !important; }
.pair-row span { color:var(--text-muted); }
.toggle-label { display:inline-flex; align-items:center; cursor:pointer; gap:.5rem; }
.toggle-label input[type="checkbox"] { display:none; }
.toggle-slider { width:44px; height:24px; background:var(--border); border-radius:12px; position:relative; transition:background .2s; }
.toggle-slider::after { content:''; position:absolute; width:20px; height:20px; background:#fff; border-radius:50%; top:2px; left:2px; transition:left .2s; }
.toggle-label input:checked + .toggle-slider { background:var(--accent); }
.toggle-label input:checked + .toggle-slider::after { left:22px; }
.payload-heading { font-size:1rem; color:var(--text-muted); margin-bottom:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); }

/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.filter-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.filter-bar .form-input, .filter-bar .form-select { width:auto; flex:1; min-width:120px; }

/* ── Login ──────────────────────────────────────────────────────────────────── */
.login-body    { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-container { width:100%; max-width:400px; padding:1rem; }
.login-card    { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 2rem; }
.login-logo    { font-size:2.5rem; text-align:center; margin-bottom:1rem; }
.login-title   { text-align:center; font-size:1.4rem; margin-bottom:1.5rem; }
.login-back    { text-align:center; margin-top:1.25rem; font-size:.85rem; color:var(--text-muted); }

/* ── Version cards ───────────────────────────────────────────────────────────── */
.versions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.version-card-admin { transition:box-shadow .15s; }
.version-card-admin.inactive { opacity:.65; }
.version-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.version-badge-big { font-size:2rem; font-weight:800; color:var(--accent); }
.version-title { font-size:1.05rem; font-weight:600; }
.version-info p { font-size:.85rem; color:var(--text-muted); margin-bottom:.25rem; }
.quotas-display { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination { display:flex; gap:.35rem; margin-top:1rem; flex-wrap:wrap; }
.page-btn { padding:.3rem .65rem; border-radius:6px; border:1px solid var(--border); font-size:.82rem;
            color:var(--text-muted); text-decoration:none; }
.page-btn.active, .page-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); text-decoration:none; }

/* ── Audit log ───────────────────────────────────────────────────────────────── */
.log-json { font-size:.72rem; background:var(--surface); border:1px solid var(--border);
            padding:.5rem; border-radius:6px; max-height:200px; overflow-y:auto; margin-top:.3rem; }

/* ── Analytics ───────────────────────────────────────────────────────────────── */
.analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; margin-bottom:1rem; }

/* ── Quick actions ───────────────────────────────────────────────────────────── */
.quick-action-btns { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }

/* ── Hint dot ─────────────────────────────────────────────────────────────────── */
.hint-dot { font-size:.8rem; }

/* ── Actions cell ─────────────────────────────────────────────────────────────── */
.actions-cell { white-space:nowrap; }
.actions-cell form { display:inline; }

/* ── Util ─────────────────────────────────────────────────────────────────────── */
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.mb-1 { margin-bottom:.35rem !important; }

/* ── Mobile sidebar ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .admin-two-col { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { flex-direction: column; }
}