/* ============================================================================
   fo-crm.css — the CRM's corporate workspace look.
   A clean, business-oriented layer that sits over the baseball platform: white
   surfaces, Inter, hairline borders, calm spacing. Only CRM pages load this,
   so the rest of the platform is untouched.

   Keeps the platform's accent palette (clay/grass/gold) so the two worlds still
   feel related, but everything else reads corporate.
   ========================================================================== */

:root {
  --crm-bg:        #f6f7f9;   /* page */
  --crm-surface:   #ffffff;   /* cards, rows, topbar */
  --crm-surface-2: #f0f2f5;   /* subtle fills, hovers */
  --crm-ink:       #1a2230;   /* primary text */
  --crm-muted:     #6b7280;   /* secondary text */
  --crm-faint:     #9aa1ab;   /* hints, placeholders */
  --crm-line:      #e4e7eb;   /* hairline borders */
  --crm-line-2:    #d3d7dd;   /* stronger borders */
  --crm-radius:    9px;

  /* pipeline accents, shared with the platform but tuned for white bg */
  --crm-spon-bg: #faece7; --crm-spon-fg: #993c1d;
  --crm-group-bg: #e1f5ee; --crm-group-fg: #0f6e56;
  --crm-event-bg: #faeeda; --crm-event-fg: #854f0b;
  --crm-season-bg: #eceef1; --crm-season-fg: #3a4250;
  --crm-danger: #a8321e; --crm-good: #0f6e56;
  --crm-good-bg: #e1f5ee; --crm-warn-bg: #faeeda;
}

* { box-sizing: border-box; }
html, body.crm {
  margin: 0; background: var(--crm-bg); color: var(--crm-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- topbar: light, distinct from the dark baseball header ---------------- */
.crm-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; background: var(--crm-surface);
  border-bottom: 1px solid var(--crm-line);
  position: sticky; top: 0; z-index: 50;
}
.crm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--crm-ink); }
.crm-logo {
  width: 30px; height: 30px; border-radius: 7px; background: var(--crm-ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; letter-spacing: -0.3px;
}
.crm-brand b { font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.crm-brand span { color: var(--crm-faint); font-weight: 400; }
.crm-nav { display: flex; gap: 2px; margin-left: 10px; }
.crm-nav a {
  font-size: 13px; padding: 6px 12px; border-radius: var(--crm-radius);
  color: var(--crm-muted); text-decoration: none;
}
.crm-nav a:hover { background: var(--crm-surface-2); color: var(--crm-ink); }
.crm-nav a.on { background: #e8eefc; color: #1d4ed8; font-weight: 500; }
.crm-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.crm-who { font-size: 13px; color: var(--crm-muted); }
.crm-back {
  font-size: 12px; padding: 6px 12px; border: 1px solid var(--crm-line-2);
  border-radius: var(--crm-radius); color: var(--crm-muted);
  text-decoration: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.crm-back:hover { background: var(--crm-surface-2); color: var(--crm-ink); }

/* ---- page frame ----------------------------------------------------------- */
.crm-main { max-width: 1200px; margin: 0 auto; padding: 26px 24px 60px; }
.crm-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.crm-h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; margin: 0; }
.crm-sub { font-size: 13px; color: var(--crm-muted); margin-top: 3px; }

/* ---- buttons -------------------------------------------------------------- */
.crm-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 9px 16px; border-radius: var(--crm-radius);
  background: var(--crm-ink); color: #fff; border: 1px solid var(--crm-ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.crm-btn:hover { background: #2b3546; }
.crm-btn.ghost { background: none; color: var(--crm-muted); border-color: var(--crm-line-2); }
.crm-btn.ghost:hover { background: var(--crm-surface-2); color: var(--crm-ink); }
.crm-btn.danger { background: none; color: var(--crm-danger); border-color: var(--crm-line-2); }
.crm-btn.danger:hover { background: #fbecea; }

/* ---- metric tiles --------------------------------------------------------- */
.crm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.crm-tile { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 12px; padding: 14px 16px; }
.crm-tile .l { font-size: 12px; color: var(--crm-muted); margin-bottom: 4px; }
.crm-tile .v { font-size: 23px; font-weight: 600; letter-spacing: -0.5px; }
.crm-tile .v.alert { color: var(--crm-danger); }

/* ---- card surface --------------------------------------------------------- */
.crm-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 12px; }
.crm-pad { padding: 18px 20px; }

/* ---- search + tabs -------------------------------------------------------- */
.crm-search { display: flex; align-items: center; gap: 9px; background: var(--crm-surface); border: 1px solid var(--crm-line-2); border-radius: var(--crm-radius); padding: 0 12px; height: 40px; }
.crm-search input { border: none; outline: none; flex: 1; font-family: inherit; font-size: 14px; background: none; color: var(--crm-ink); }
.crm-search input::placeholder { color: var(--crm-faint); }
.crm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--crm-line); flex-wrap: wrap; }
.crm-tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 15px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--crm-muted); }
.crm-tab:hover { color: var(--crm-ink); }
.crm-tab.on { color: var(--crm-ink); font-weight: 500; border-bottom-color: var(--crm-ink); }
.crm-tab .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.crm-tab .n { font-size: 12px; color: var(--crm-faint); }

/* ---- account rows --------------------------------------------------------- */
.crm-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--crm-line); cursor: pointer; }
.crm-row:last-child { border-bottom: none; }
.crm-row:hover { background: var(--crm-surface-2); }
.crm-name { font-size: 15px; font-weight: 500; }
.crm-meta { font-size: 12px; color: var(--crm-muted); margin-top: 2px; }
.crm-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.crm-val { text-align: right; }
.crm-amt { font-size: 15px; font-weight: 600; }
.crm-amt.dash { color: var(--crm-faint); font-weight: 400; }
.crm-stage { font-size: 11px; color: var(--crm-muted); margin-top: 2px; }

/* ---- chips (clickable pipeline tags) -------------------------------------- */
.crm-chip { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--crm-radius); text-decoration: none; cursor: pointer; }
.crm-chip.sponsorship { background: var(--crm-spon-bg); color: var(--crm-spon-fg); }
.crm-chip.group { background: var(--crm-group-bg); color: var(--crm-group-fg); }
.crm-chip.event { background: var(--crm-event-bg); color: var(--crm-event-fg); }
.crm-chip.season_tickets { background: var(--crm-season-bg); color: var(--crm-season-fg); }
.crm-chip.plain { background: var(--crm-surface-2); color: var(--crm-muted); }

/* ---- pills (stage / status) ----------------------------------------------- */
.crm-pill { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--crm-radius); display: inline-block; }
.crm-pill.won { background: var(--crm-good-bg); color: var(--crm-good); }
.crm-pill.open { background: #eef1f5; color: var(--crm-muted); }
.crm-pill.lost { background: #fbecea; color: var(--crm-danger); }

/* ---- empty / gate --------------------------------------------------------- */
.crm-empty { font-size: 13px; color: var(--crm-muted); padding: 22px 6px; text-align: center; }
.crm-gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--crm-bg); padding: 20px; z-index: 100; }
.crm-gate-card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 14px; padding: 30px 28px; width: 340px; max-width: 100%; }
.crm-gate-card h2 { font-size: 18px; font-weight: 600; margin: 12px 0 2px; }
.crm-gate-card .tag { font-size: 12px; color: var(--crm-muted); margin-bottom: 18px; }
.crm-gate-card label { font-size: 12px; color: var(--crm-muted); display: block; margin: 12px 0 5px; }
.crm-gate-card input { width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--crm-line-2); border-radius: var(--crm-radius); }
.crm-gate-card button { width: 100%; margin-top: 18px; font-family: inherit; font-size: 14px; font-weight: 500; padding: 11px; border-radius: var(--crm-radius); background: var(--crm-ink); color: #fff; border: none; cursor: pointer; }
.crm-err { font-size: 12px; color: var(--crm-danger); background: #fbecea; border-radius: var(--crm-radius); padding: 8px 11px; margin-top: 12px; display: none; }
.crm-err.show { display: block; }

@media (max-width: 820px) {
  .crm-tiles { grid-template-columns: repeat(2, 1fr); }
  .crm-nav { display: none; }
}