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

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --bg:     #060c1c;
  --panel:  #0c1528;
  --panel2: #111e36;
  --yellow: #FFD100;
  --green:  #00b85a;
  --amber:  #f59e0b;
  --red:    #e63535;
  --r:      12px;
}

/* ── Base body ────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  min-height: 100vh;
}

/* ── Top nav ──────────────────────────────────────────────────────────────── */
.topnav {
  background: rgba(6,12,28,0.96);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
}
.nav-logo {
  background: var(--yellow); border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 900;
  color: #060c1c; letter-spacing: -0.3px; white-space: nowrap;
}
.nav-title {
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800;
  margin-left: 12px;
}
.nav-right  { display: flex; align-items: center; gap: 10px; }

/* ── Shared button styles ─────────────────────────────────────────────────── */
.btn-sm {
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700;
  padding: 7px 14px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.btn-sm:hover  { color: #fff; border-color: rgba(255,255,255,0.25); }
.btn-sm.active {
  background: rgba(255,209,0,0.1);
  border-color: rgba(255,209,0,0.3);
  color: var(--yellow);
}
.btn-primary {
  background: var(--yellow); color: #060c1c; border-color: var(--yellow);
}
.btn-primary:hover { background: #ffe340; color: #060c1c; }

/* ── Metric pills ─────────────────────────────────────────────────────────── */
.metric-pill {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 900;
  padding: 3px 9px; border-radius: 20px;
  text-align: center; min-width: 56px;
}
.mp-great  { background: rgba(0,184,90,0.15);   color: #4ade80; border: 1px solid rgba(0,184,90,0.2);   }
.mp-good   { background: rgba(52,211,153,0.12);  color: #6ee7b7; border: 1px solid rgba(52,211,153,0.15); }
.mp-ok     { background: rgba(245,158,11,0.12);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.2);  }
.mp-behind { background: rgba(230,53,53,0.12);   color: #f87171; border: 1px solid rgba(230,53,53,0.2);   }
.mp-none   { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.07); }

/* ── Status / feedback messages ───────────────────────────────────────────── */
.msg, .msg-bar {
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.msg.success, .msg-bar.success {
  background: rgba(0,184,90,0.12); border: 1px solid rgba(0,184,90,0.25); color: #4ade80;
}
.msg.error, .msg-bar.error {
  background: rgba(230,53,53,0.12); border: 1px solid rgba(230,53,53,0.25); color: #f87171;
}

/* ── Shared form elements ─────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password],
input[type=date], textarea, select {
  background: var(--panel2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,209,0,0.4);
  box-shadow: 0 0 0 3px rgba(255,209,0,0.08);
}
input::placeholder { color: rgba(255,255,255,0.2); }
select option { background: var(--panel2); }

/* ── Page footer ──────────────────────────────────────────────────────────── */
footer, .footer {
  text-align: center; padding: 24px 24px 28px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.25);
  font-family: 'Outfit', sans-serif;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 48px;
}
footer a, .footer a { color: var(--yellow); text-decoration: none; }

/* ── Generic card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-hdr {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800; }
.card-body  { padding: 22px; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px;
  color: rgba(255,255,255,0.2); font-size: 13px;
}

/* ── Page title / sub ─────────────────────────────────────────────────────── */
.page-title {
  font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 900; margin-bottom: 4px;
}
.page-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 24px; }

/* ── Stats grid ───────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.stat {
  background: var(--panel); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r); padding: 14px 18px;
}
.stat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,.35); margin-bottom: 6px;
}
.stat-val { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 900; }

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; align-items: center;
}
.filter-sep  { color: rgba(255,255,255,.15); margin: 0 4px; }
.filter-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,.3); margin-right: 4px;
}