/**
 * Coach Goal — first-login picker modal + return-visit progress popup.
 * Reuses the shared .confirm-overlay/.confirm-box chrome (hydrate-ui.js) and
 * the GrapplingU design tokens (variables.css). Dark-default; tokens are
 * theme-aware so it holds WCAG in both themes.
 */

/* ---- Self-contained modal chrome ----------------------------------------
 * The shared .confirm-overlay/.confirm-box/.confirm-btn base styles are
 * injected LAZILY by hydrate-ui.js, only when showConfirmModal() first runs —
 * which may never happen on a fresh dashboard. So define our own chrome here
 * (scoped to our overlays) so the goal surfaces are ALWAYS fully styled,
 * regardless of whether a confirm dialog was ever opened. Mirrors the
 * _ensurePartnerPanelStyles self-contained pattern. */
.cgm-overlay, .cgp-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10100;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cgm-overlay.show, .cgp-overlay.show { opacity: 1; }

.cgm-box, .cgp-box {
  background: var(--bg-card, #1e1f21);
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-lg, 1.5rem);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.6));
}

.cgm-overlay .confirm-btn, .cgp-overlay .confirm-btn {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md, 8px);
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.cgm-overlay .confirm-btn-confirm, .cgp-overlay .confirm-btn-confirm {
  background: var(--accent, #2563eb);
  color: var(--text-on-accent, #fff);
}
.cgm-overlay .confirm-btn-confirm:hover, .cgp-overlay .confirm-btn-confirm:hover {
  background: var(--accent-hover, #1d4ed8);
}
.cgm-overlay .confirm-btn-confirm:disabled, .cgp-overlay .confirm-btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cgm-overlay .confirm-btn-cancel, .cgp-overlay .confirm-btn-cancel {
  background: var(--gray-2, rgba(255, 255, 255, 0.1));
  color: var(--text-secondary, #b4b5b9);
}
.cgm-overlay .confirm-btn-cancel:hover, .cgp-overlay .confirm-btn-cancel:hover {
  background: var(--gray-3, rgba(255, 255, 255, 0.15));
}

/* ---- Goal picker modal --------------------------------------------------- */

.cgm-box {
  max-width: 520px;
  width: calc(100vw - 32px);
  text-align: left;
}
.cgm-title { color: var(--text-primary, #fff); }

.cgm-title {
  font-size: 1.25rem;
  line-height: 1.3;
}

.cgm-sub {
  color: var(--text-secondary, #bbb);
  font-size: 0.9375rem;
  margin: 0.35rem 0 1.1rem;
}

.cgm-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Mirrors the onboarding wizard's .wizard-option so the goal picker reads as
   part of the same flow. */
.cgm-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 2px solid var(--border-subtle, #333);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.cgm-option:hover { border-color: var(--border-medium, #555); background: rgba(255, 255, 255, 0.04); }
.cgm-option:focus { outline: none; }
.cgm-option:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.cgm-option.is-selected {
  border-color: var(--accent, #2563eb);
  background: rgba(59, 130, 246, 0.08);
}

.cgm-option__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cgm-option__icon svg { width: 20px; height: 20px; }
.cgm-option__body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.cgm-option__title { font-weight: 600; color: var(--text-primary, #fff); font-size: 0.9375rem; }
.cgm-option__blurb { color: var(--text-tertiary, #9aa0aa); font-size: 0.8125rem; line-height: 1.45; }

.cgm-chips { margin-top: 1rem; }
.cgm-chips__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #bbb);
  margin-bottom: 0.5rem;
}
.cgm-chips__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cgm-chip {
  min-width: 48px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-primary, #fff);
  background: var(--bg-elevated, #1f1f25);
  border: 1.5px solid var(--border-subtle, #333);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cgm-chip:hover { border-color: var(--text-tertiary, #888); }
.cgm-chip:focus { outline: none; }
.cgm-chip:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.cgm-chip.is-selected {
  border-color: var(--accent, #2563eb);
  background: var(--accent, #2563eb);
  color: var(--text-on-accent, #fff);
}

.cgm-actions { margin-top: 1.3rem; }
.cgm-confirm { width: 100%; }

/* ---- Return-visit progress popup ---------------------------------------- */

.cgp-box { max-width: 460px; width: calc(100vw - 32px); text-align: left; }

.cgp-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
.cgp-head__icon { color: var(--accent, #2563eb); display: flex; align-items: center; }
.cgp-head__icon svg { width: 22px; height: 22px; }
.cgp-head__title { font-weight: 700; font-size: 1.125rem; color: var(--text-primary, #fff); }

.cgp-status { color: var(--text-secondary, #bbb); font-size: 0.9375rem; margin-bottom: 0.85rem; }
.cgp-status strong { color: var(--text-primary, #fff); }

.cgp-bar {
  height: 8px;
  border-radius: 6px;
  background: var(--border-subtle, #333);
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.cgp-bar__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--accent, #2563eb);
  transition: width 0.4s ease;
}
.cgp-bar__fill--done { background: var(--accent-success, #10b981); }

.cgp-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ---- Dashboard "Your goal" stats card ----------------------------------- */

.cgs-big { display: flex; align-items: baseline; gap: 4px; margin-bottom: 0.5rem; }
.cgs-num { font-size: 1.6rem; font-weight: 800; color: var(--text-primary, #fff); }
.cgs-unit { font-size: 0.8125rem; color: var(--text-secondary, #bbb); }
.cgs-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--border-subtle, #333);
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.cgs-bar__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--accent, #2563eb);
  transition: width 0.4s ease;
}
.cgs-bar__fill--done { background: var(--accent-success, #10b981); }
.cgs-sub { font-size: 0.75rem; color: var(--text-tertiary, #9aa0aa); }
.cgs-cta { margin-top: 0.55rem; font-size: 0.8125rem; font-weight: 600; color: var(--accent, #2563eb); }

/* The "Your goal" card is clickable → routes like the progress popup. */
#coachGoalStatsCard[role="button"] { transition: border-color 0.15s ease, background 0.15s ease; }
#coachGoalStatsCard[role="button"]:hover { border-color: var(--accent, #2563eb); }
#coachGoalStatsCard[role="button"]:focus { outline: none; }
#coachGoalStatsCard[role="button"]:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* Power user → a secondary "M weeks planned this month" line under the focuses. */
.cgs-secondary { margin-top: 0.4rem; font-size: 0.875rem; color: var(--text-secondary, #bbb); }
.cgs-secnum { font-weight: 700; color: var(--text-primary, #fff); }
.cgs-secunit { color: var(--text-secondary, #bbb); }

/* Brief highlight when a CTA scrolls you to a target (gym info / inbox / invite). */
.cgp-flash { animation: cgp-flash-pulse 2.4s ease-out; border-radius: 12px; }
@keyframes cgp-flash-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  12% { box-shadow: 0 0 0 3px var(--accent, #2563eb), 0 0 26px rgba(37, 99, 235, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cgp-flash { animation: none; box-shadow: 0 0 0 3px var(--accent, #2563eb); }
}

/* ---- Completion reward modal (milestone) -------------------------------- */

.cgr-box { max-width: 420px; }
/* The reward check is success-green, not the accent blue, to read as "done". */
.cgr-head__icon { color: var(--accent-success, #10b981); }
.cgr-head__icon svg { width: 24px; height: 24px; }