/* =========================================================
   SCRUBBER — Enterprise Design System
   Inspired by Linear, Vercel, Stripe dashboards
   ========================================================= */

/* --- Tokens --- */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-850: #1c1c1c;
  --gray-900: #171717;
  --gray-950: #0a0a0a;

  --bg-root: #0a0a0a;
  --bg-surface: #111111;
  --bg-raised: #171717;
  --bg-overlay: #1a1a1a;
  --bg-subtle: rgba(255,255,255,0.03);
  --bg-hover: rgba(255,255,255,0.05);
  --bg-active: rgba(255,255,255,0.08);

  --border-primary: rgba(255,255,255,0.08);
  --border-secondary: rgba(255,255,255,0.05);
  --border-focus: rgba(255,255,255,0.2);

  --text-primary: #ededed;
  --text-secondary: #888888;
  --text-tertiary: #666666;
  --text-inverted: #0a0a0a;

  --blue: #3b82f6;
  --blue-muted: rgba(59,130,246,0.12);
  --green: #22c55e;
  --green-muted: rgba(34,197,94,0.12);
  --amber: #f59e0b;
  --amber-muted: rgba(245,158,11,0.12);
  --red: #ef4444;
  --red-muted: rgba(239,68,68,0.12);
  --purple: #a855f7;
  --purple-muted: rgba(168,85,247,0.12);

  --sidebar-w: 220px;
  --topbar-h: 52px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-overlay: 0 16px 48px rgba(0,0,0,0.6);
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font); background:var(--bg-root); color:var(--text-primary); line-height:1.5; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
table { border-collapse:collapse; width:100%; }
input { font-family:inherit; }

/* --- Layout --- */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--bg-surface); border-right:1px solid var(--border-primary);
  display:flex; flex-direction:column; z-index:50;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.main-wrapper {
  margin-left:var(--sidebar-w); min-height:100vh;
  display:flex; flex-direction:column;
}

/* --- Sidebar --- */
.sidebar-header { padding:16px 16px 12px; }
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.sidebar-brand { font-size:15px; font-weight:650; letter-spacing:-0.02em; color:var(--text-primary); }

.sidebar-nav { flex:1; padding:4px 8px; display:flex; flex-direction:column; gap:1px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:450;
  color:var(--text-secondary); transition:all 0.15s ease;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { background:var(--bg-active); color:var(--text-primary); font-weight:550; }
.nav-item svg { flex-shrink:0; opacity:0.6; }
.nav-item.active svg { opacity:1; }

.sidebar-footer { padding:12px 12px 16px; border-top:1px solid var(--border-secondary); }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:4px; }
.user-avatar {
  width:28px; height:28px; border-radius:50%; background:var(--bg-active);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:var(--text-secondary);
  flex-shrink:0;
}
.user-info { min-width:0; }
.user-name { display:block; font-size:12px; font-weight:550; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-id { display:block; font-size:10px; color:var(--text-tertiary); font-family:'SF Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Sidebar Quota Box */
.sidebar-quota { padding:16px; margin:0 8px 12px; border-radius:var(--radius-md); background:var(--bg-active); border:1px solid var(--border-secondary); }
.sidebar-quota.hidden { display:none; }
.quota-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.quota-title { font-size:11px; font-weight:600; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.02em; }
.quota-text { font-size:11px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.quota-track { height:4px; border-radius:2px; background:var(--bg-root); overflow:hidden; }
.quota-fill { height:100%; border-radius:2px; background:var(--blue); width:0%; transition:width 0.4s ease; }
.quota-fill.danger { background:var(--red); }
.quota-fill.unlimited { background:var(--green); width:100%; }

/* --- Top Bar --- */
.topbar {
  height:var(--topbar-h); padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border-secondary);
  background:var(--bg-surface); position:sticky; top:0; z-index:40;
}
.topbar-left { display:flex; align-items:center; gap:12px; }
.page-title { font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text-secondary); padding:4px; }

.live-indicator { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-tertiary); }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
.live-text { font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* --- Content --- */
.content { flex:1; padding:24px; }
.view { animation:viewIn 0.2s ease; }
.view.hidden { display:none; }
@keyframes viewIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

/* --- KPI Row --- */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.kpi-card {
  background:var(--bg-surface); border:1px solid var(--border-primary);
  border-radius:var(--radius-md); padding:16px 18px;
}
.kpi-label { font-size:12px; color:var(--text-tertiary); font-weight:450; margin-bottom:6px; }
.kpi-value { font-size:24px; font-weight:700; letter-spacing:-0.03em; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* --- Panel --- */
.panel {
  background:var(--bg-surface); border:1px solid var(--border-primary);
  border-radius:var(--radius-lg); overflow:hidden;
}
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border-secondary);
}
.panel-title { font-size:14px; font-weight:600; }

/* --- Data Table --- */
.table-container { overflow-x:auto; }
.data-table { min-width:700px; }
.data-table thead { background:var(--bg-subtle); }
.data-table th {
  font-size:11px; font-weight:550; color:var(--text-tertiary); text-transform:uppercase;
  letter-spacing:0.04em; padding:10px 16px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border-secondary);
}
.data-table td {
  padding:12px 16px; font-size:13px; color:var(--text-secondary);
  border-bottom:1px solid var(--border-secondary); white-space:nowrap;
  vertical-align:middle;
}
.data-table tbody tr { transition:background 0.1s ease; }
.data-table tbody tr:hover { background:var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom:none; }
.col-right { text-align:right !important; }

.cell-file { display:flex; align-items:center; gap:8px; }
.cell-file-icon {
  width:28px; height:28px; border-radius:var(--radius-sm);
  background:var(--bg-active); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cell-file-icon svg { color:var(--text-tertiary); }
.cell-file-name { font-weight:500; color:var(--text-primary); max-width:200px; overflow:hidden; text-overflow:ellipsis; }

/* Status badges */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:100px; font-size:11px; font-weight:550; letter-spacing:0.01em;
}
.badge-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-running   { background:var(--blue-muted);   color:var(--blue); }
.badge-running .badge-dot   { background:var(--blue); animation:pulse 1.5s ease-in-out infinite; }
.badge-completed { background:var(--green-muted);  color:var(--green); }
.badge-completed .badge-dot { background:var(--green); }
.badge-paused    { background:var(--amber-muted);  color:var(--amber); }
.badge-paused .badge-dot    { background:var(--amber); }
.badge-error     { background:var(--red-muted);    color:var(--red); }
.badge-error .badge-dot     { background:var(--red); }
.badge-pending   { background:rgba(255,255,255,0.05); color:var(--text-tertiary); }
.badge-pending .badge-dot   { background:var(--text-tertiary); }

/* Inline progress */
.inline-progress { display:flex; align-items:center; gap:10px; min-width:160px; }
.progress-track {
  flex:1; height:4px; background:var(--bg-active); border-radius:2px;
  overflow:hidden; min-width:80px;
}
.progress-bar {
  height:100%; border-radius:2px; background:var(--blue);
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.progress-bar.done { background:var(--green); }
.progress-bar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  animation:shimmer 2s infinite;
}
.progress-bar.done::after { display:none; }
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
.progress-pct { font-size:12px; font-weight:600; color:var(--text-primary); min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; gap:6px; border:none;
  font-size:12px; font-weight:550; border-radius:var(--radius-sm);
  transition:all 0.15s ease; white-space:nowrap;
}
.btn:active { transform:scale(0.97); }
.btn-sm { padding:6px 12px; }
.btn-md { padding:8px 16px; font-size:13px; }
.btn-primary { background:var(--text-primary); color:var(--text-inverted); }
.btn-primary:hover { background:var(--gray-200); }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-primary); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--border-focus); }
.btn-danger-ghost { background:transparent; color:var(--red); border:1px solid var(--red-muted); }
.btn-danger-ghost:hover { background:var(--red-muted); }
.btn-icon { background:none; border:none; color:var(--text-tertiary); padding:6px; border-radius:var(--radius-sm); transition:all 0.15s; }
.btn-icon:hover { background:var(--bg-hover); color:var(--text-primary); }

.action-group { display:flex; align-items:center; gap:4px; justify-content:flex-end; }

/* --- Upload Card --- */
.upload-container { max-width:560px; margin:0 auto; padding-top:32px; }
.upload-card {
  background:var(--bg-surface); border:1px solid var(--border-primary);
  border-radius:var(--radius-lg); overflow:hidden;
}
.upload-card-header { padding:24px 24px 4px; }
.upload-card-header h3 { font-size:16px; font-weight:650; margin-bottom:6px; }
.text-secondary { color:var(--text-secondary); font-size:13px; line-height:1.5; }

.upload-dropzone {
  margin:20px; border:1.5px dashed var(--border-primary); border-radius:var(--radius-md);
  padding:40px 24px; text-align:center; cursor:pointer;
  transition:all 0.2s ease; position:relative;
}
.upload-dropzone:hover { border-color:var(--border-focus); background:var(--bg-subtle); }
.upload-dropzone.drag-over { border-color:var(--blue); background:var(--blue-muted); }
.dropzone-icon { color:var(--text-tertiary); margin-bottom:12px; transition:color 0.2s, transform 0.2s; }
.upload-dropzone:hover .dropzone-icon { color:var(--text-secondary); transform:translateY(-2px); }
.dropzone-title { font-size:13px; font-weight:500; color:var(--text-primary); margin-bottom:4px; }
.dropzone-browse { color:var(--blue); cursor:pointer; }
.dropzone-browse:hover { text-decoration:underline; }
.dropzone-hint { font-size:11px; color:var(--text-tertiary); margin-top:2px; }

.upload-status-bar {
  margin:0 20px 20px; padding:12px 16px;
  background:var(--bg-raised); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:8px;
}
.upload-file-info { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.upload-file-info svg { flex-shrink:0; color:var(--text-tertiary); }
.upload-progress-track { height:3px; background:var(--bg-active); border-radius:2px; overflow:hidden; }
.upload-progress-fill { height:100%; background:var(--blue); border-radius:2px; width:0; transition:width 0.3s ease; }
.upload-progress-text { font-size:11px; color:var(--text-tertiary); }

/* --- Sheet (Slide-over panel) --- */
.sheet-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100;
  display:none; animation:fadeIn 0.2s ease;
}
.sheet-overlay.open { display:block; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.sheet {
  position:fixed; top:0; right:0; bottom:0; width:460px; max-width:100%;
  background:var(--bg-surface); border-left:1px solid var(--border-primary);
  z-index:101; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow:var(--shadow-overlay);
}
.sheet-overlay.open .sheet { transform:translateX(0); }

.sheet-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border-secondary);
}
.sheet-title { font-size:16px; font-weight:650; }
.sheet-subtitle { font-size:12px; margin-top:4px; }
.sheet-body { flex:1; overflow-y:auto; padding:24px; }

.stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px;
}
.stat-tile {
  padding:16px; border-radius:var(--radius-md);
  border:1px solid var(--border-secondary); background:var(--bg-raised);
}
.stat-tile-label { font-size:11px; color:var(--text-tertiary); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.stat-tile-value { font-size:22px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

.stat-tile.tile-green  .stat-tile-value { color:var(--green); }
.stat-tile.tile-red    .stat-tile-value { color:var(--red); }
.stat-tile.tile-amber  .stat-tile-value { color:var(--amber); }
.stat-tile.tile-blue   .stat-tile-value { color:var(--blue); }
.stat-tile.tile-purple .stat-tile-value { color:var(--purple); }

.sheet-actions { display:flex; gap:8px; }

/* --- Empty State --- */
.empty-state { padding:48px 24px; text-align:center; }
.empty-state.hidden { display:none; }
.empty-icon { color:var(--text-tertiary); opacity:0.4; margin-bottom:12px; }
.empty-title { font-size:14px; font-weight:550; color:var(--text-secondary); margin-bottom:4px; }
.empty-desc { font-size:12px; color:var(--text-tertiary); margin-bottom:16px; }

/* --- Toast --- */
.toast-region { position:fixed; bottom:16px; right:16px; z-index:200; display:flex; flex-direction:column-reverse; gap:6px; }
.toast {
  background:var(--bg-overlay); border:1px solid var(--border-primary);
  border-radius:var(--radius-md); padding:10px 16px;
  font-size:12px; color:var(--text-primary); box-shadow:var(--shadow-md);
  animation:toastIn 0.25s ease; max-width:340px;
  display:flex; align-items:center; gap:8px;
}
.toast-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.toast-success .toast-dot { background:var(--green); }
.toast-error   .toast-dot { background:var(--red); }
.toast-info    .toast-dot { background:var(--blue); }
@keyframes toastIn { from{opacity:0;transform:translateY(8px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes toastOut { from{opacity:1;} to{opacity:0; transform:translateY(4px);} }

/* --- Responsive --- */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-wrapper { margin-left:0; }
  .mobile-menu-btn { display:block; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .content { padding:16px; }
  .sheet { width:100%; }
}

@media (max-width:480px) {
  .kpi-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-primary); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-focus); }