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

/* Campus Operations theme: light work surfaces with restrained school colors. */
:root {
  --bg:           #F3F6F5;
  --surface:      #FFFFFF;
  --surface-2:    #E8EEEC;
  --border:       #D5DFDB;
  --border-light: #B7C8C1;
  --navy:         #082A4A;

  --green:        #007D32;
  --green-accent: #008A36;
  --green-dim:    #006E2B;
  --green-glow:   rgba(0, 138, 54, 0.14);
  --green-subtle: #E7F5EC;

  --fbla-blue:      #1768A8;
  --fbla-blue-glow: rgba(23, 104, 168, 0.14);
  --gold:        #9A6900;
  --gold-accent: #E0A20C;
  --silver: #68757F;
  --bronze: #A65C27;

  --text:       #13231E;
  --text-muted: #566660;
  --text-dim:   #6B7A74;
  --elite:      #007D32;
  --executive:  #9A6900;
  --associate:  #1768A8;
  --member:     #5F6E68;
  --danger:     #B42318;
  --flag-amber: #f59e0b;

  --radius:    8px;
  --radius-lg: 10px;
  --shadow:    0 8px 24px rgba(8, 42, 74, 0.08);
  --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  font-size: 15px;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Keep navigation and buttons clean and readable */
button,
.nav-links a,
.nav-brand,
.home-button,
.nav-login,
.nav-signup,
.nav-signout {
  font-family: 'Inter', sans-serif;
}

/* ─── Lucide icon baseline styles ────────────────────────────────────────── */
/* Applied to every <svg class="nav-icon"> / <svg class="ui-icon"> so we     */
/* don't repeat stroke attributes on each element.                           */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 3px solid var(--green-accent);
  padding: 0;
}

.nav-inner {
  width: 100%;
  /* 1216px is exactly the content width every page section resolves to
     (.page-header et al: max-width 1280 minus 2rem padding each side). The bar
     was capped at 1180 and so sat 36px narrower than the content directly
     beneath it — a misalignment on its own, and the reason there was no room to
     size the controls properly.
     
     Expressed as a bare max-width rather than 1280-plus-padding on purpose:
     padding would also apply BELOW the cap, costing 64px at exactly the widths
     that already have the least room. Measured at 1100px, that alone doubled how
     far the link list had to scroll. */
  max-width: 1216px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;   /* fixed furniture; only the link list absorbs the squeeze */
}

.brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  /* White background so the logo reads on dark nav */
  background: #fff;
  padding: 2px 4px;
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: #FFFFFF;
}

.brand-name span { color: #63D18A; }

/* The bar holds seven links AND the signed-in account widget. These rules used
   to live only in the mobile block, so on a desktop the list had no way to give:
   labels wrapped mid-word and the points pill was pushed out past the edge of
   the bar.
   
   The tightened metrics below are unconditional rather than behind a breakpoint
   on purpose: .nav-inner is capped at 1180px, so the space available to the
   links is identical at 1280px and at 2560px, and a viewport media query cannot
   see the shortfall at all. Items keep their own width and the list scrolls if
   it still does not fit, which is the same treatment the mobile layout uses. */
.nav-links {
  display: flex;
  align-items: center;
  /* A fixed gap, so the links sit at their own spacing as a GROUP and whatever
     is left over pools before the account widget. space-between was tried here
     and spread the links edge to edge across the bar, which read as stretched —
     with the Admin link hidden a student had 130px to distribute and the gaps
     grew to 40px each.
     
     5px is at the low end of what looks right on purpose. Seven links plus the
     widget only just fit in 1216px, and every px of gap costs six times over;
     see the note on padding below for how the budget was set. */
  justify-content: flex-start;
  gap: 5px;
  list-style: none;
  flex: 1 1 auto;          /* the only part of the bar that gives */
  flex-wrap: nowrap;
  min-width: 0;            /* without this it refuses to shrink inside .nav-inner */
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar { display: none; }

/* Never squeeze an item narrower than its content — that is what broke the pill. */
.nav-links > li { flex: 0 0 auto; }

.nav-links a {
  display: flex; align-items: center; gap: 5px;
  /* Vertical padding is what makes these read as sized to the bar, and it costs
     no width, so it stays at 10px. Horizontal is deliberately tight: with a
     fixed gap above, padding and gap BOTH separate the links, and the pair has
     to fit seven links beside the account widget in 1216px.
     
     Measured against the widest face installed on the test machine, admin with a
     long name at 1440px: 5px/6px leaves 17px of slack, 6px/6px leaves 11px, and
     6px/7px overflows by 2.5px. The production face (Inter, from Google Fonts)
     cannot be loaded headlessly, so that margin is the whole safety budget —
     see the note on .nav-dashboard-name. */
  padding: 10px 6px;
  border-radius: 8px;
  color: #D7E2E8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--transition);
}

/* ── Nav label size ─────────────────────────────────────────────────────────
   15px above the 1216px cap, 13px below it, because the two are limited by
   different things.
   
   THE WIDEST BAR IS THE STUDENT ONE, not the admin one. An admin has seven
   links but a narrow widget — an "Admin" chip and Sign out, 157px. A student
   has six links and the full widget — points pill, name, Sign out, 284px — and
   that 127px difference outweighs the extra link by a distance. Measured at
   1440px in system-ui: admin needs 1056px, student 1106px, pending 1065px,
   logged out 973px.
   
   Above the cap the student bar has 94px spare at 13px, so the label can grow;
   15px spends 52px of it and leaves 42px. Below the cap the bar is
   viewport-bound and the same case has only 15px spare, where 13.5px leaves
   2px and 14px overflows — so the compact tier holds 13px.
   
   Not pushed to 16px on purpose. The production face is Inter, which cannot be
   loaded headlessly; measured at 1440px the same bar swings 19px between
   Helvetica and system-ui, and 16px would leave only 15px of slack — less than
   one face's worth. 15px leaves roughly two. */
.nav-links a { font-size: 15px; }

/* ── The Admin link defaults to HIDDEN ──────────────────────────────────────
   Cosmetic, not a control: /admin is refused server-side for anyone who is not
   an admin (see denyAdminPage). But a link nobody but an admin can follow does
   not belong in everyone's navbar.
   
   Hidden in CSS rather than removed by JS after /api/auth/me answers, so it is
   hidden at FIRST PAINT. The old code only hid it on a confirmed NON-admin
   response, which meant a logged-out visitor — who takes a different branch
   entirely — kept it, and a slow or failed call left it showing. Defaulting to
   hidden makes every one of those cases fall the safe way, and the link appears
   only when initAuthNav has a confirmed admin in hand. */
.nav-admin-only { display: none; }
nav.nav-is-admin .nav-admin-only { display: block; }

.nav-links a:hover, .nav-links a.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
}

.nav-links a.active { box-shadow: inset 0 -2px 0 #63D18A; }

/* Mounted as a sibling of .nav-links by initAuthNav, not inside it — see the
   comment there. That is what keeps it from being scrolled out of the bar. */
.auth-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;          /* the pill and the name keep their size, always */
  padding-left: 4px;
}

.nav-login,
.nav-signout,
.nav-account-state {
  color: #D7E2E8;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.nav-login:hover,
.nav-signout:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }

.nav-signup {
  color: #FFFFFF;
  background: var(--green);
  border-radius: 7px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.nav-signup:hover { background: #00A442; }

.nav-account-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
}

/* The only live personal data in the bar, and it used to be the only element in
   the account widget with no container — bare gold text sitting next to a
   bordered name chip, which read as trailing text rather than as its own thing.
   Given a tinted pill of its own, and the NUMBER carries the weight: 15px/800
   against an 11px label, so the figure is what the eye lands on. */
.nav-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(244, 201, 93, 0.13);
  border: 1px solid rgba(244, 201, 93, 0.32);
  color: #F4C95D;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

.nav-points:hover {
  background: rgba(244, 201, 93, 0.22);
  border-color: rgba(244, 201, 93, 0.55);
}

.nav-points #nav-merit-pts {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.nav-dashboard-link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 7px;
  padding: 8px 8px;
  text-decoration: none;
}

/* Capped tighter than the name usually needs. Measured at 1440px with seven
   links, a name long enough to hit the cap left only 1.7px of slack in the bar —
   close enough that a different font stack or a rounding difference would push
   the Admin link out of view. Names past the cap ellipsise, which is a far
   cheaper failure than a link that silently scrolls off.
   
   The margin is sized for a FONT that cannot be measured here. The site renders
   in Inter from Google Fonts; a headless browser without network falls back to
   whatever is installed, and the bar's content width moves by more than 30px
   across faces (measured: Tahoma 671px, Helvetica 685px, system-ui 710px for the
   same seven links). So the target is not "fits in the browser I measured in" —
   it is enough slack that any reasonable face fits. */
.nav-dashboard-name {
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

/* Below the cap the bar is viewport-bound: there is no leftover space for the
   roomier metrics above to spend, and keeping them only makes the list scroll
   further. Measured at 1100px, this is what keeps the scroll distance where it
   was before the controls were enlarged. */
@media (max-width: 1215px) {
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 5px; font-size: 13px; }
  .nav-points { padding: 4px 8px; gap: 5px; }
  .nav-points #nav-merit-pts { font-size: 13px; }
  /* Tighter than the 96px above: below the cap the bar is viewport-bound and
     the student case is the one with least room, so the name is what yields.
     This keeps 1100px at the same margin it had before the pill grew. */
  .nav-dashboard-name { max-width: 76px; }
  .nav-login, .nav-signout, .nav-account-state { padding: 7px 11px; }
  .nav-dashboard-link { padding: 6px 9px; }
}

/* Hidden on desktop: it repeats what the pill's tooltip and the link itself
   already say, and the bar is ~240px short of fitting seven links beside the
   account widget. Restored in the stacked mobile layout, which has the room. */
.nav-dashboard-label { display: none; color: #A6E2BA; font-size: 11px; font-weight: 650; }

/* ─── Page Header ─────────────────────────────────────────────────────────── */
.page-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1.25rem;
}

.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--green);
}

.page-title span { color: inherit; }

.page-subtitle {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 14px;
}

/* ─── Stats Banner ────────────────────────────────────────────────────────── */
.stats-banner {
  max-width: calc(1280px - 4rem);
  margin: 0 auto 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(8, 42, 74, 0.04);
  overflow: hidden;
}

.stat-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 24px;
  transition: background var(--transition);
}

.stat-card:last-child { border-right: 0; }
.stat-card:hover { background: #F8FAF9; }

.stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--navy);
  line-height: 1.1;
  margin-top: 4px;
}

.stat-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Podium ──────────────────────────────────────────────────────────────── */
.podium-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 2.75rem;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.podium {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.podium-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  text-align: center;
  position: relative;
  transition: all var(--transition);
}

.podium-card:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 16px rgba(8, 42, 74, 0.07);
}

.podium-card.first {
  border-color: #E7C56A;
  border-top: 4px solid var(--gold-accent);
  background: #FFFDF7;
  box-shadow: none;
}
.podium-card.second {
  border-top: 4px solid var(--silver);
  background: var(--surface);
}
.podium-card.third  {
  border-top: 4px solid var(--bronze);
  background: var(--surface);
}

.podium-medal {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin: 0 auto 12px;
}

.podium-card.first  .podium-medal { background: #FFF3CF; }
.podium-card.second .podium-medal { background: #EDF0F2; }
.podium-card.third  .podium-medal { background: #F7E9DE; }

.podium-rank {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.podium-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.podium-points {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: 0;
  margin-top: 8px;
}

.podium-card.first  .podium-points { color: var(--gold); }
.podium-card.second .podium-points { color: var(--navy); }
.podium-card.third  .podium-points { color: var(--navy); }

.podium-pts-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ─── Leaderboard Table ───────────────────────────────────────────────────── */
.leaderboard-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.table-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.privacy-note {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: 0 2px 8px rgba(8, 42, 74, 0.04);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: #F7F9F8;
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

thead th:last-child { text-align: right; }

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: default;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* Gold accent on Top-3 rows */
tbody tr:has(.rank-cell.r1) {
  background: #FFFCF2;
  border-left: 3px solid var(--gold-accent);
  box-shadow: none;
}
tbody tr:has(.rank-cell.r2) {
  background: #FAFBFB;
  border-left: 3px solid var(--silver);
}
tbody tr:has(.rank-cell.r3) {
  background: #FFFAF6;
  border-left: 3px solid var(--bronze);
}
tbody tr:has(.rank-cell.r1):hover { background: #FFF7DF; }

tbody td {
  padding: 13px 16px;
  font-size: 14px;
}

tbody td:last-child { text-align: right; }

/* Rank cell */
.rank-cell {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-dim);
  width: 56px;
}

.rank-cell.r1  { color: var(--gold); }
.rank-cell.r2  { color: var(--silver); }
.rank-cell.r3  { color: var(--bronze); }

/* Name cell */
.name-cell { font-weight: 600; }

/* Points cell */
.points-cell {
  font-weight: 800;
  font-size: 15px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ─── Status Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-Elite     { background: #E7F5EC; color: var(--elite); border: 1px solid #B9DFC7; }
.badge-Executive { background: #FFF4D6; color: var(--executive); border: 1px solid #E8CE85; }
.badge-Associate { background: #EAF3FA; color: var(--associate); border: 1px solid #BDD4E7; }
.badge-Member    { background: #EEF1F0; color: var(--member); border: 1px solid #D5DFDB; }

/* ─── MVP Tag ─────────────────────────────────────────────────────────────── */
.mvp-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #765100;
  background: #FFF4D6;
  border: 1px solid #E8CE85;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Breakdown pills ─────────────────────────────────────────────────────── */
.breakdown {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pill {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: #F5F8F7;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
}

/* ─── Search / Filter Bar ─────────────────────────────────────────────────── */
.toolbar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 1.5rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  line-height: 0;
}

input[type="search"], input[type="text"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px 10px 38px;
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

input[type="search"]:focus, input[type="text"]:focus {
  border-color: var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

button, input, select, textarea { font: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 138, 54, 0.28);
  outline-offset: 2px;
}

.filter-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover, .filter-btn.active {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.filter-btn:hover {
  background: var(--fbla-blue);
  border-color: var(--fbla-blue);
}

/* ─── Event Cards ─────────────────────────────────────────────────────────── */
.events-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition);
}

.event-card:hover {
  border-color: var(--border-light);
  box-shadow: 0 4px 14px rgba(8, 42, 74, 0.06);
}

.event-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.event-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.cluster-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cluster-icon {
  width: 11px;
  height: 11px;
}

.cluster-Finance      { background: #E7F5EC; color: #006E2B; border: 1px solid #B9DFC7; }
.cluster-Technology   { background: #EAF3FA; color: #175D90; border: 1px solid #BDD4E7; }
.cluster-Marketing    { background: #FDF8EC; color: #9A6900; border: 1px solid #F6E3B6; }
.cluster-Management   { background: #EBEEF1; color: #082A4A; border: 1px solid #B5BFC9; }
.cluster-Communication{ background: #FDF8EC; color: #082A4A; border: 1px solid #B5BFC9; }

.event-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.event-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.event-type {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 6px;
}

.event-duration {
  font-size: 11px;
  color: var(--text-dim);
}

.btn-practice {
  display: block;
  text-align: center;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  margin-top: 4px;
}

.btn-practice:hover {
  background: var(--green-dim);
  color: #fff;
  border-color: var(--green-dim);
  box-shadow: none;
}

/* ─── Admin Panel ─────────────────────────────────────────────────────────── */
.admin-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.admin-card h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.member-list-admin {
  list-style: none;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.member-list-admin li {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-list-admin li:hover  { background: var(--surface-2); }
.member-list-admin li.active {
  background: rgba(255, 184, 28, 0.09);
  color: var(--gold);
  border: 1px solid rgba(255,184,28,0.25);
}

.member-pts-small {
  font-size: 12px;
  color: var(--text-dim);
}

.member-list-admin li.active .member-pts-small { color: rgba(255,184,28,0.7); }

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }

label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input[type="number"], input[type="text"], input[type="date"], select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

textarea { resize: vertical; }

input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--green-dim);
  box-shadow: 0 0 0 3px var(--green-glow);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--green);
  cursor: pointer;
}

.btn-primary {
  grid-column: 1 / -1;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.2px;
}

.btn-primary:hover { background: var(--green-dim); color: #fff; box-shadow: 0 4px 12px var(--green-glow); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.preview-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.preview-card .pts-big {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.preview-row:last-child { border-bottom: none; }
.preview-row span { color: var(--text); font-weight: 600; }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  border-color: #f87171;
  color: #f87171;
}

/* ─── Skeleton Loading ────────────────────────────────────────────────────── */
/* Reusable shimmer primitive. Compose with inline width/height (and         */
/* .skel-circle / .skel-pill for rounding) to match the shape of the content */
/* about to load in each spot, instead of an isolated center-screen spinner. */
.skel {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2) 25%, #DDE6E2 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
}

.skel-circle { border-radius: 50%; }
.skel-pill   { border-radius: 999px; }

/* Generic icon-sized placeholder block (36px, rounded square). */
.skel-icon { width: 36px; height: 36px; border-radius: 10px; }

@keyframes skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.empty { color: var(--text-dim); font-size: 14px; text-align: center; padding: 48px; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .podium { grid-template-columns: 1fr; }
  .admin-wrap { grid-template-columns: 1fr; }
  .page-title { font-size: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .podium-card.first { order: -1; }
  .breakdown { display: none; }
  nav { padding: 0; }
  .nav-inner {
    width: 100%;
    height: auto;
    min-height: 62px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 8px;
    gap: 8px;
  }
  .nav-brand { align-self: flex-start; }
  .brand-name { white-space: nowrap; }
  /* nowrap, overflow-x, the non-shrinking items and the nowrap labels are all
     base rules now — see .nav-links above. Only the genuinely mobile bits stay. */
  .nav-links {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    padding-bottom: 3px;
  }
  .nav-links a { padding: 6px 8px; font-size: 12px; }
  .nav-dashboard-label { display: inline; }
  .stats-banner { max-width: calc(100% - 2rem); grid-template-columns: 1fr 1fr; }
  .stat-card:nth-child(2) { border-right: 0; }
  .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

.chapter-photo {
  min-height: 300px;
  overflow: hidden;
}

.chapter-photo img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}