/* Maze Engine — Custom Styles */

:root {
  --bg:           #000000;
  --surface:      #0f0f0f;
  --border:       #222222;
  --primary:      #c5ff49;
  --primary-dark: #a8e000;
  --text-primary: #ffffff;
  --text-muted:   #b7b7b7;
}

* { box-sizing: border-box; }
body { background-color: var(--bg); color: var(--text-primary); }

/* ── Sidebar ── */
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px; font-size: 13px;
  color: var(--text-muted); transition: background 0.15s, color 0.15s;
  text-decoration: none; white-space: nowrap;
}
.sidebar-link:hover { background: rgba(197,255,73,0.07); color: var(--text-primary); }
.sidebar-active    { background: rgba(197,255,73,0.12); color: var(--primary); font-weight: 500; }

/* ── Tabs ── */
.tab-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s; cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  white-space: nowrap;
}
.tab-btn:hover   { color: var(--text-primary); }
.tab-active      { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Status badges ── */
.badge-active   { background: rgba(197,255,73,0.12); color: var(--primary); }
.badge-inactive { background: rgba(183,183,183,0.12); color: var(--text-muted); }

/* ── Stat cards ── */
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1rem 1.25rem;
}

/* ── Task cards ── */
.task-card { transition: border-color 0.15s; }
.task-card:hover { border-color: rgba(197,255,73,0.25); }

/* ── Skill tags ── */
.skill-tag {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(197,255,73,0.08); color: var(--primary);
  border: 1px solid rgba(197,255,73,0.2);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #333333; }

/* ── Animations ── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }