/* KF Annotator — main.css */
:root {
  --bg:     #0f1117;
  --card:   #1a1d27;
  --card2:  #22263a;
  --border: #2d3250;
  --fg:     #e8eaf0;
  --fg2:    #8890a8;
  --accent: #5c6cff;
  --accent2:#7c8cff;
  --green:  #4caf7d;
  --red:    #e05c5c;
  --yellow: #f0b429;
  --shadow: 0 4px 24px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --bg:     #f0f2f8;
  --card:   #ffffff;
  --card2:  #eef0f8;
  --border: #d0d4e8;
  --fg:     #1a1d27;
  --fg2:    #5a6080;
  --shadow: 0 4px 24px rgba(0,0,0,.12);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--bg); color:var(--fg); font-family: 'Inter', system-ui, sans-serif;
       font-size:14px; line-height:1.5; transition: background .2s, color .2s; }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:7px; border:1px solid var(--border);
  background:var(--card); color:var(--fg); cursor:pointer;
  font-size:13px; font-weight:500; text-decoration:none;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background:var(--card2); border-color:var(--accent); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); }
.btn-sm { padding:3px 10px; font-size:12px; }
.btn-danger { background:var(--red); border-color:var(--red); color:#fff; }
.full-w { width:100%; justify-content:center; display:flex; }

/* ── NAVBAR ────────────────────────────────────────────────────── */
.navbar {
  display:flex; align-items:center; gap:16px;
  padding:0 20px; height:52px; background:var(--card);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
}
.nav-brand { display:flex; align-items:center; gap:8px; margin-right:auto; }
.nav-logo  { font-size:22px; }
.nav-title { font-weight:700; font-size:15px; letter-spacing:.3px; }
.nav-links { display:flex; gap:12px; }
.nav-links a { color:var(--fg2); text-decoration:none; font-size:13px;
               padding:4px 8px; border-radius:5px; }
.nav-links a:hover { background:var(--card2); color:var(--fg); }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-user  { font-size:12px; color:var(--fg2); }
.theme-btn { background:none; border:none; cursor:pointer; font-size:16px; padding:4px; }

/* ── PAGE BODY ─────────────────────────────────────────────────── */
.page-body { padding:24px 28px; }
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:22px; font-weight:700; }
.sub { color:var(--fg2); margin-top:4px; }
.back-link { color:var(--accent); text-decoration:none; font-size:13px; }
.back-link:hover { text-decoration:underline; }

/* ── BADGE ─────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 9px; border-radius:20px;
         font-size:11px; font-weight:600; }
.badge-lame    { background:rgba(92,108,255,.2); color:var(--accent); }
.badge-scraper { background:rgba(240,180,41,.2); color:var(--yellow); }

/* ── BATCH GRID ────────────────────────────────────────────────── */
.batch-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px;
}
.batch-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow); transition: border-color .2s;
}
.batch-card:hover { border-color:var(--accent); }
.batch-card.done  { border-color:var(--green); }
.batch-name { font-weight:600; font-size:14px; }
.batch-stats { display:flex; justify-content:space-between; color:var(--fg2); font-size:12px; }
.stat-pct { font-weight:700; color:var(--fg); }

/* ── PROGRESS BAR ──────────────────────────────────────────────── */
.progress-bar {
  height:5px; background:var(--border); border-radius:3px; overflow:hidden;
}
.progress-fill {
  height:100%; background:var(--accent);
  border-radius:3px; transition:width .3s;
}
.batch-info-bar {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  font-size:13px; color:var(--fg2);
}
.inline-progress { flex:1; max-width:200px; height:6px; }

/* ── FRAME GRID ────────────────────────────────────────────────── */
.frames-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:8px;
}
.frame-thumb {
  position:relative; border-radius:8px; overflow:hidden;
  border:2px solid var(--border); aspect-ratio:16/9;
  text-decoration:none; display:block; transition:border-color .15s;
}
.frame-thumb:hover { border-color:var(--accent); }
.frame-thumb.done  { border-color:var(--green); }
.frame-thumb img   { width:100%; height:100%; object-fit:cover; }
.frame-label {
  position:absolute; bottom:2px; left:4px; font-size:10px;
  background:rgba(0,0,0,.65); color:#fff; padding:1px 5px; border-radius:3px;
}
.empty-state { color:var(--fg2); padding:20px 0; }

/* ── ANNOTATOR LAYOUT ──────────────────────────────────────────── */
.ann-layout {
  display:flex; width:100vw; height:calc(100vh - 52px); overflow:hidden;
}
.ann-sidebar {
  width:240px; flex-shrink:0; background:var(--card);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  overflow-y:auto; padding:10px 12px; gap:8px;
}
.ann-canvas-wrap {
  flex:1; display:flex; align-items:stretch; overflow:hidden;
  background:#000;
}
#ann-canvas { width:100%; height:100%; display:block; }

/* ── RIGHT FRAMES PANEL ────────────────────────────────────────── */
.ann-frames-panel {
  width:150px; flex-shrink:0; background:var(--card);
  border-left:1px solid var(--border); display:flex; flex-direction:column;
  overflow:hidden;
}
.frames-panel-header {
  padding:7px 10px; font-size:10px; font-weight:700; color:var(--fg2);
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center;
}
.frames-list-scroll { overflow-y:auto; flex:1; }
.frame-list-item {
  display:flex; align-items:center; gap:7px; padding:5px 10px;
  cursor:pointer; font-size:11px; color:var(--fg2);
  text-decoration:none; transition:background .1s;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.frame-list-item:hover { background:var(--card2); color:var(--fg); }
.frame-list-item.fl-active { background:var(--accent); color:#fff; }
.frame-list-item.fl-done { color:var(--green); }
.frame-list-item.fl-active { color:#fff !important; }
.fl-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--border);
}
.fl-done .fl-dot { background:var(--green); }
.fl-active .fl-dot { background:#fff; }

/* Sidebar elements */
.sidebar-nav { display:flex; align-items:center; justify-content:space-between; }
.frame-counter { font-size:11px; color:var(--fg2); }
.frame-nav-btns { display:flex; justify-content:space-between; }
.sidebar-section { display:flex; flex-direction:column; gap:6px;
                   padding:8px 0; border-top:1px solid var(--border); }
.sidebar-section:first-child { border-top:none; }

/* ── LOGIN ─────────────────────────────────────────────────────── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:36px 32px; width:340px; display:flex; flex-direction:column;
  align-items:center; gap:12px; box-shadow:var(--shadow);
}
.login-logo  { font-size:48px; }
.login-title { font-size:22px; font-weight:700; }
.login-sub   { color:var(--fg2); font-size:12px; text-align:center; }
.login-form  { display:flex; flex-direction:column; gap:10px; width:100%; margin-top:8px; }
.login-form input, .login-form button {
  width:100%; padding:10px 14px; border-radius:8px;
  border:1px solid var(--border); background:var(--card2);
  color:var(--fg); font-size:14px;
}
.login-form button {
  background:var(--accent); border-color:var(--accent); color:#fff;
  font-weight:600; cursor:pointer;
}
.login-form button:hover { background:var(--accent2); }
.alert { padding:8px 12px; border-radius:6px; font-size:13px; width:100%; text-align:center; }
.alert-err { background:rgba(224,92,92,.15); color:var(--red); }

/* ── ADMIN TABLE ───────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th, .data-table td {
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--border);
}
.data-table th { color:var(--fg2); font-weight:600; font-size:11px; text-transform:uppercase; }
.data-table tr:hover td { background:var(--card2); }
.role-badge {
  display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600;
}
.role-admin { background:rgba(92,108,255,.2); color:var(--accent); }
.role-annotator { background:rgba(76,175,125,.2); color:var(--green); }
.role-viewer { background:rgba(138,144,168,.2); color:var(--fg2); }

/* ── FORMS ─────────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:12px; color:var(--fg2); font-weight:600; }
.form-group input, .form-group select {
  padding:8px 12px; border-radius:7px; border:1px solid var(--border);
  background:var(--card2); color:var(--fg); font-size:13px;
}
.form-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

/* ── MISC ──────────────────────────────────────────────────────── */
.cls-radio { display:flex; align-items:center; gap:8px; cursor:pointer; padding:3px 0; }
.cls-radio input { accent-color:var(--accent); }