/* ── ALGO Tracker – Global Styles ───────────────────────── */

:root {
  --primary: #1a73e8;
  --sidebar-width: 220px;
  --sidebar-bg: #1e2a3b;
  --sidebar-text: #c8d6e5;
  --sidebar-active: #1a73e8;
}

body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  background: var(--sidebar-bg);
  min-height: calc(100vh - 56px);
  padding-top: 12px;
}
.sidebar .nav-link {
  color: var(--sidebar-text);
  border-radius: 6px;
  margin: 2px 8px;
  padding: 9px 14px;
  transition: background .2s, color .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: var(--sidebar-active);
  color: #fff;
}

/* ── Cards ───────────────────────────────────────────────── */
.card { border: none; box-shadow: 0 1px 6px rgba(0,0,0,.08); border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; }

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card { border-left: 5px solid var(--primary); }
.stat-card.green  { border-left-color: #28a745; }
.stat-card.orange { border-left-color: #fd7e14; }
.stat-card.red    { border-left-color: #dc3545; }
.stat-card.purple { border-left-color: #6f42c1; }

/* ── Progress bar labels ─────────────────────────────────── */
.progress { height: 18px; border-radius: 9px; }
.progress-bar { font-size: 11px; font-weight: 600; line-height: 18px; }

/* ── Tables ──────────────────────────────────────────────── */
.table th { background: #f8f9fa; font-weight: 600; font-size: 13px; }
.table td { vertical-align: middle; }

/* ── Star rating input ───────────────────────────────────── */
.star-rating { direction: rtl; display: inline-flex; }
.star-rating input { display: none; }
.star-rating label {
  font-size: 28px; color: #ccc; cursor: pointer;
  transition: color .15s;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f4a820; }

/* ── Feature checklist ───────────────────────────────────── */
.feature-item {
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s;
}
.feature-item:hover { background: #f0f6ff; }
.feature-item.completed { background: #eafaf1; }
.feature-item.completed label { text-decoration: line-through; color: #6c757d; }

/* ── Module accordion headers ────────────────────────────── */
.module-header {
  background: #1e2a3b;
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}
.module-header:hover { background: var(--primary); }

/* ── Badge overrides ─────────────────────────────────────── */
.badge-pending  { background: #fff3cd; color: #856404; }
.badge-approved { background: #d1e7dd; color: #0f5132; }
.badge-rejected { background: #f8d7da; color: #842029; }

/* ── Login page ──────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e2a3b 0%, #1a73e8 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 420px; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .login-card { width: 95%; }
}