/* ============================================================
   theme.css — Leadership Development Lab
   Design tokens, reset, and shared components.

   Structure intentionally mirrors MyClubTracker's shared.css so
   the two codebases feel the same to work in. Colors are LDL's
   own, sampled from the Diamond Logo and the 6-Week Agenda:
     navy   #000d2d   header/footer band
     green  #33981d   "Grow" / checkmarks
     blue   #3359b0   diamond quadrant
     red    #aa2222   diamond quadrant
     silver #c4c9ce   diamond quadrant
     tint   #f0f2e8   action-step panels
   ============================================================ */

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

/* ── DESIGN TOKENS ── */
:root {
  /* Navy / blue scale — brand blue is --n5 */
  --n9: #000d2d;
  --n8: #0a1b3f;
  --n7: #16305c;
  --n6: #234478;
  --n5: #3359b0;
  --n4: #5c7cc4;
  --n3: #8ba3d6;
  --n2: #bfcce8;
  --n1: #dde5f3;
  --n0: #eff3fa;

  /* Green scale — brand green is --g4 */
  --g6: #1e5c11;
  --g5: #267a16;
  --g4: #33981d;
  --g3: #6bb85a;
  --g1: #d7ecd1;
  --g0: #f0f2e8;

  /* Red */
  --r6: #7d1919;
  --r5: #aa2222;
  --r1: #f5d6d6;
  --r0: #fdf0f0;

  /* Amber — pending / awaiting approval */
  --a6: #a06000;
  --a5: #c47c0a;
  --a4: #e09820;
  --a0: #fef7e8;

  /* Silver — from the logo's fourth quadrant */
  --s4: #c4c9ce;
  --s2: #dfe3e7;

  /* Surfaces */
  --bg: #eef1f7;
  --surface: #ffffff;
  --border: #ccd4e0;
  --border-light: #dde3ec;

  /* Text */
  --text: #000d2d;
  --text-muted: #55627d;
  --text-faint: #8c97ad;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 13, 45, 0.06), 0 2px 10px rgba(0, 13, 45, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 13, 45, 0.09);

  /* Status → color mapping, so components don't hardcode */
  --status-approved: var(--g5);
  --status-pending:  var(--a5);
  --status-rejected: var(--r5);
}

/* ── BASE ── */
html, body {
  min-height: 100%;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

a { color: var(--n5); }

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

/* ── PILL / BADGE ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--n1);
  color: var(--n7);
}
.pill.approved { background: var(--g1); color: var(--g6); }
.pill.pending  { background: var(--a0); color: var(--a6); }
.pill.rejected { background: var(--r1); color: var(--r6); }
.pill.coach       { background: var(--n2); color: var(--n8); }
.pill.super-admin { background: var(--n8); color: #fff; }

/* ── BUTTON ── */
.btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: var(--n7);
  color: #fff;
}
.btn:hover { background: var(--n8); }
.btn.secondary {
  background: #fff;
  color: var(--n7);
  border-color: var(--n3);
}
.btn.secondary:hover { background: var(--n0); }
.btn.go      { background: var(--g4); }
.btn.go:hover{ background: var(--g5); }
.btn.danger  { background: var(--r5); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── PROGRESS BAR (points toward threshold) ── */
.progress {
  height: 10px;
  background: var(--n1);
  border-radius: 20px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--n5), var(--g4));
  border-radius: 20px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress.met > span { background: var(--g4); }

/* ── LOADING OVERLAY ── */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 300;
}
.load-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--n1);
  border-top-color: var(--n5);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-text { font-size: 16px; color: var(--text-muted); }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--n8);
  color: #fff;
  padding: 11px 20px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 400;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  opacity: 0;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { background: var(--g5); }
.toast.error   { background: var(--r5); }

/* ── TOP NAV ── */
.topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 56px;
  background: var(--n9);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topnav .nav-logo img { height: 26px; display: block; }
.nav-page-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  .card { padding: 14px; border-radius: var(--radius-sm); }
  .topnav { padding: 0 14px; }
}