/* ============================================================
   Club Crux Dashboard — Brand-aligned light theme
   Colours from Brand Guide (Brodi-Rose Creative Co.)
     Navy      #15222D  (hero primary)
     Off-white #EEEBEA  (hero secondary)
     Sand      #C8AF9E  (warm sand accent)
   Typography: Montserrat (Google Fonts — body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:    #15222D;
  --sand:    #C8AF9E;
  --cream:   #EEEBEA;

  /* Dashboard surfaces */
  --bg:       #F4F1EE;     /* warm off-white page */
  --sb-bg:    #15222D;     /* sidebar = brand navy */
  --surface:  #FFFFFF;     /* card backgrounds */
  --surface2: #EDE9E5;     /* subtle secondary fills */
  --border:   #E2DDD8;     /* soft warm border */

  /* Text */
  --text:   #15222D;       /* primary = brand navy */
  --text2:  #5E6E7A;       /* secondary */
  --muted:  #9BAAB5;       /* placeholders / labels */

  /* Semantic */
  --green:   #1A8C62;
  --red:     #C0392B;
  --orange:  #C96A1A;
  --blue:    #1D5FA8;

  /* Accent */
  --accent:  #C8AF9E;      /* warm sand */
  --accent2: #15222D;      /* navy — interactive / highlights */

  /* Layout */
  --sb-w: 220px;
  --radius-card: 12px;
  --shadow-card: 0 1px 3px rgba(21,34,45,0.06), 0 4px 16px rgba(21,34,45,0.05);
  --shadow-sm:   0 1px 3px rgba(21,34,45,0.08);
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar {
  width: var(--sb-w);
  min-height: 100vh;
  background: var(--sb-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 20;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(238,235,234,0.1);
}

.sb-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sand);
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}

.sb-name { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; color: #EEEBEA; }
.sb-sub  { font-size: 10px; color: rgba(238,235,234,0.4); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 1px; }

.sb-nav  { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(238,235,234,0.55);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-item svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.12s; }
.nav-item:hover { background: rgba(238,235,234,0.08); color: #EEEBEA; }
.nav-item:hover svg { opacity: 1; }

.nav-active { background: rgba(238,235,234,0.12); color: #EEEBEA !important; font-weight: 600; }
.nav-active svg { opacity: 1 !important; }

.sb-divider { height: 1px; background: rgba(238,235,234,0.1); margin: 8px 2px; }
.nav-secondary { font-size: 12px; }

.sb-footer { padding: 14px 20px; border-top: 1px solid rgba(238,235,234,0.1); display: flex; align-items: center; gap: 7px; }
.sb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.sb-live-label { font-size: 11px; color: rgba(238,235,234,0.4); }

/* ── Main content ──────────────────────────────────────────── */
.main {
  margin-left: var(--sb-w);
  flex: 1;
  min-height: 100vh;
  padding: 28px 32px 56px;
  max-width: 1440px;
}

.page-header { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; }
.page-title  { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); }
.page-sub    { font-size: 13px; color: var(--text2); margin-top: 3px; }
.data-status { font-size: 11px; color: var(--muted); }

/* ── Section labels ────────────────────────────────────────── */
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 14px;
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-label:first-of-type { margin-top: 0; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 10px;
}

/* ── Grids ─────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }

/* ── Mini cells (surface2 inset panels) ────────────────────── */
.mini-cell { background: var(--surface2); border-radius: 8px; padding: 14px; }
.mini-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.mini-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.mini-sub   { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* ── KPI value styles ──────────────────────────────────────── */
.kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; color: var(--text); }
.kpi-delta { font-size: 12px; margin-top: 4px; color: var(--text2); }

/* ── Progress bars ─────────────────────────────────────────── */
.bar-track { width: 100%; height: 4px; background: var(--surface2); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 2px; }
.prog-wrap { width: 100%; height: 4px; background: var(--surface2); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 2px; }

/* ── Period toggle ─────────────────────────────────────────── */
.period-toggle { display: flex; background: var(--surface2); border-radius: 6px; padding: 2px; gap: 0; }
.period-toggle button {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all 0.12s;
  font-family: inherit;
}
.period-toggle button.active { background: var(--navy); color: #EEEBEA; }
.period-toggle button:hover:not(.active) { color: var(--text); }

/* ── Funnel rows ───────────────────────────────────────────── */
.funnel-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.funnel-row:last-child { border-bottom: none; }
.funnel-label { font-size: 12px; color: var(--text2); width: 140px; flex-shrink: 0; }
.funnel-bar-wrap { flex: 1; height: 20px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 700; }
.funnel-count { width: 32px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text); }
.funnel-pct   { width: 38px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text2); }

/* ── Coach cards ───────────────────────────────────────────── */
.coach-card { background: var(--surface2); border-radius: 8px; padding: 14px; border: 1px solid var(--border); }
.coach-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.util-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.util-bar-wrap { width: 100%; height: 4px; background: var(--border); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.util-bar { height: 100%; border-radius: 2px; }
.util-caption { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ── Session / schedule rows ───────────────────────────────── */
.session-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.session-row:last-child { border-bottom: none; }
.session-time  { font-size: 12px; font-weight: 600; color: var(--text2); width: 48px; flex-shrink: 0; }
.session-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.session-name  { font-size: 13px; font-weight: 500; flex: 1; color: var(--text); }
.session-meta  { font-size: 11px; color: var(--muted); }
.session-badge { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.alert-row:last-child { border-bottom: none; }
.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.alert-text { font-size: 12px; line-height: 1.5; color: var(--text2); }
.alert-date { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ── Source rows (marketing) ───────────────────────────────── */
.source-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.source-row:last-child { border-bottom: none; }
.source-name { color: var(--text2); }
.source-val  { font-weight: 700; color: var(--text); }

/* ── Insight items ─────────────────────────────────────────── */
.insight-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.insight-item:last-child { border-bottom: none; }
.insight-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.insight-text { font-size: 13px; color: var(--text2); line-height: 1.5; }
.insight-text strong { color: var(--text); }

/* ── Month nav ─────────────────────────────────────────────── */
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  width: 26px; height: 26px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
  box-shadow: var(--shadow-sm);
}
.month-btn:hover { background: var(--surface2); color: var(--text); }
.month-btn:disabled { opacity: 0.3; cursor: default; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px)  {
  #sidebar { display: none; }
  .main { margin-left: 0; padding: 16px; }
}