/* ==========================================================================
   Stripe → HubSpot Sync — HubSpot-inspired design tokens
   Colors/typography taken directly from real HubSpot app screenshots the
   user shared (Contacts list + contact record), not guessed from brand
   marketing material - that turned out to matter: HubSpot's actual
   product chrome is a near-black sidebar/topbar with dark-teal primary
   buttons, not the navy-blue palette brand guidelines would suggest.
   Orange is used sparingly in the real app (the sprocket mark, a status
   pill here and there), not as the default button color. Still an
   approximation read off screenshots rather than exact picked values -
   worth a side-by-side glance once this is running.
   Deliberately no top nav bar here: this app keeps its existing
   left-sidebar structure rather than faking HubSpot's own top chrome
   (search bar, Breeze Assistant, notifications, account menu) - that
   chrome comes for free, for real, once the dashboard/settings actually
   move inside HubSpot in Track B. Building a second copy of it now would
   just be thrown away then.
   ========================================================================== */

:root {
  --hs-orange: #ff7a59;
  --hs-orange-dark: #e54c21;
  --hs-ink: #1b1b1f;
  --hs-gray: #52575c;
  --hs-gray-light: #8b8f94;
  --hs-teal-dark: #00302b;
  --hs-teal-dark-hover: #014940;
  --hs-teal: #00a4bd;
  --hs-canvas: #f5f6f8;
  --hs-white: #ffffff;
  --hs-border: #e0e2e6;
  --hs-border-light: #ececee;
  --hs-sidebar-bg: #1b1b1f;
  --hs-sidebar-bg-hover: #2c2c31;
  --hs-sidebar-text: #c7c8cb;
  --hs-sidebar-text-active: #ffffff;
  --hs-sidebar-border: #333338;
  --hs-success-bg: #cbf4c9;
  --hs-success-text: #00802f;
  --hs-warning-bg: #fcefd7;
  --hs-warning-text: #92670e;
  --hs-error-bg: #fde2dd;
  --hs-error-text: #c2370e;
  --hs-neutral-bg: #eef0f2;
  --hs-neutral-text: #5f656b;
  --hs-radius: 6px;
  --hs-radius-pill: 20px;
  --hs-radius-lg: 12px;
  --hs-shadow: 0 1px 2px rgba(27, 27, 31, 0.08);
}

/* HubSpot's product headings ("CRM Data Overview", "Activity Feed",
   "Tasks" in the screenshots) use a distinct rounded-geometric sans that
   reads as Lexend Deca or a close relative - an informed guess, not a
   confirmed fact (HubSpot doesn't publish this), but Lexend Deca is a
   real, freely-licensed Google Font and a close visual match, so it's
   worth using for headings rather than approximating with the body
   font. Worth a side-by-side check once this is running. */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, 'Avenir Next', 'Inter', system-ui, sans-serif; background: var(--hs-canvas); color: var(--hs-ink); }
button { font-family: inherit; }
.app { display: flex; min-height: 100vh; }
h1, .card-title, .brand, .heartbeat-value, .target-tracker-row strong {
  font-family: 'Lexend Deca', -apple-system, 'Avenir Next', system-ui, sans-serif;
}

.sidebar {
  width: 220px; flex: 0 0 220px; background: var(--hs-sidebar-bg); color: var(--hs-sidebar-text);
  display: flex; flex-direction: column; padding: 20px 0 0 0;
  position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto;
}
.brand { font-size: 14px; font-weight: 700; color: var(--hs-sidebar-text-active); padding: 0 20px 18px 20px; border-bottom: 1px solid var(--hs-sidebar-border); letter-spacing: 0.01em; }
.nav-items { display: flex; flex-direction: column; padding: 16px 12px 12px 12px; flex-grow: 1; min-height: 0; }
.nav-top { display: flex; flex-direction: column; gap: 2px; }
.nav-bottom { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; }
.nav-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8098b3; padding: 16px 12px 8px 12px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--hs-radius); cursor: pointer;
  background: transparent; color: var(--hs-sidebar-text); border: none; border-left: 3px solid transparent; font-size: 13.5px; font-weight: 500; text-align: left;
}
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.nav-item:hover { background: var(--hs-sidebar-bg-hover); color: var(--hs-sidebar-text-active); }
.nav-item.active { background: var(--hs-sidebar-bg-hover); color: var(--hs-sidebar-text-active); border-left-color: var(--hs-orange); }
.nav-item-label { flex-grow: 1; }
.nav-count { font-size: 11px; font-weight: 700; color: var(--hs-sidebar-text-active); background: var(--hs-gray); border-radius: 10px; padding: 1px 7px; }
.nav-item.active .nav-count { background: var(--hs-orange); }
.status-block { padding: 14px 20px; border-bottom: 1px solid var(--hs-sidebar-border); }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #a9bdd1; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #8098b3; }
.dot.ok { background: #00bda5; }
.dot.warn { background: #f5c26b; }
.dot.err { background: #f2545b; }
.status-sub { font-size: 11px; color: #8098b3; margin-top: 3px; margin-bottom: 2px; }

.content { flex-grow: 1; padding: 28px 36px 40px 36px; min-width: 0; }
.hidden { display: none; }
h1 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; color: var(--hs-ink); }
.subtle { font-size: 13px; color: var(--hs-gray); margin: 4px 0 20px 0; }
.view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }

.btn-primary {
  background: var(--hs-teal-dark); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 20px;
  border-radius: var(--hs-radius-pill); border: none; cursor: pointer; box-shadow: var(--hs-shadow);
}
.btn-primary:hover { background: var(--hs-teal-dark-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-secondary {
  background: #fff; color: var(--hs-ink); font-size: 12.5px; font-weight: 600; padding: 6px 16px;
  border-radius: var(--hs-radius-pill); border: 1px solid var(--hs-border); cursor: pointer;
}
.btn-secondary:hover { border-color: var(--hs-gray-light); background: var(--hs-canvas); }
.btn-secondary:disabled { opacity: 0.6; cursor: default; }

.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--hs-border-light); }
.admin-tab-btn {
  background: none; color: var(--hs-gray); font-size: 13.5px; font-weight: 600; padding: 10px 4px;
  border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.admin-tab-btn:hover { color: var(--hs-ink); }
.admin-tab-btn.active { color: var(--hs-ink); border-bottom-color: var(--hs-orange); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-tile { background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: 16px 18px; box-shadow: var(--hs-shadow); }
.stat-label { font-size: 12px; color: var(--hs-gray); font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 700; margin-top: 6px; color: var(--hs-ink); }
.stat-description { font-size: 11.5px; color: var(--hs-gray); margin-top: 5px; line-height: 1.35; }

.dashboard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.card { background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: 18px; box-shadow: var(--hs-shadow); }
.card-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--hs-ink); }
.table-card { padding: 14px 4px; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hs-gray); font-weight: 700; padding: 0 14px 10px 14px; }
td { padding: 12px 14px; font-size: 13.5px; border-top: 1px solid var(--hs-border-light); color: var(--hs-ink); }
tr:hover td { background: var(--hs-canvas); }
.mono { font-family: 'JetBrains Mono', monospace; }

.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }
.badge-active { background: var(--hs-success-bg); color: var(--hs-success-text); }
.badge-past_due, .badge-open, .badge-uncollectible { background: var(--hs-error-bg); color: var(--hs-error-text); }
.badge-trialing, .badge-draft { background: var(--hs-neutral-bg); color: var(--hs-neutral-text); }
.badge-canceled, .badge-void { background: #eef0f2; color: #65727d; }
.badge-paid { background: var(--hs-success-bg); color: var(--hs-success-text); }

.bar-row { margin-bottom: 13px; }
.bar-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; color: var(--hs-ink); }
.bar-track { height: 7px; background: var(--hs-neutral-bg); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--hs-teal); }

.settings-card { max-width: 560px; }
.field-label { font-size: 13px; font-weight: 700; margin-bottom: 9px; color: var(--hs-ink); }
.field-row { margin-top: 12px; }
.field-row:first-of-type { margin-top: 0; }
.field-sublabel { display: block; font-size: 12px; color: var(--hs-gray); font-weight: 600; margin-bottom: 5px; }
.text-input { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); font-size: 13.5px; font-family: inherit; background: #fff; color: var(--hs-ink); }
.text-input:disabled { background: var(--hs-canvas); color: var(--hs-gray); }
.text-input:focus { outline: none; border-color: var(--hs-teal); box-shadow: 0 0 0 3px rgba(0, 164, 189, 0.15); }
.key-row { border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--hs-gray); background: var(--hs-canvas); }
.divider { height: 1px; background: var(--hs-border-light); margin: 20px 0; }
.pill-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pill { padding: 8px 14px; border-radius: var(--hs-radius-pill); font-size: 12.5px; font-weight: 600; cursor: pointer; background: #fff; color: var(--hs-ink); border: 1px solid var(--hs-border); }
.pill.active { background: #cbf1ef; color: var(--hs-teal-dark); border-color: #9ee2dd; }
.checkbox-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 6px; cursor: pointer; }
.checkbox-box { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--hs-border); display: flex; align-items: center; justify-content: center; flex: 0 0 18px; margin-top: 1px; }
.checkbox-box.checked { background: var(--hs-teal-dark); border-color: var(--hs-teal-dark); color: #fff; font-size: 11px; }
.checkbox-title { font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.checkbox-hint { font-size: 11.5px; color: var(--hs-gray); }
.save-msg { font-size: 12px; color: var(--hs-success-text); margin-left: 10px; }
.warning-banner { background: var(--hs-error-bg); color: var(--hs-error-text); border: 1px solid #f7c5bb; border-radius: var(--hs-radius-lg); padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.warning-banner a, .warning-banner strong { color: var(--hs-error-text); }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 4px 4px; }
.pager:empty { display: none; }
.pager-btn {
  background: var(--hs-canvas); border: 1px solid var(--hs-border); color: var(--hs-ink); border-radius: var(--hs-radius);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pager-btn:hover:not(:disabled) { background: var(--hs-border-light); }
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-info { font-size: 12px; color: var(--hs-gray); }

.tabs-grid { margin-bottom: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-tile.tab-btn {
  font-family: inherit; text-align: left; cursor: pointer; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stat-tile.tab-btn:hover { border-color: var(--hs-gray); }
.stat-tile.tab-btn.active { border-color: var(--hs-ink); box-shadow: 0 0 0 1px var(--hs-ink); }

.cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--hs-neutral-bg); border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg);
  padding: 14px 18px; margin-bottom: 14px;
}
.cta-row .cta-text { font-size: 13px; color: var(--hs-ink); }
.cta-row .cta-text strong { color: var(--hs-ink); }
.cta-row .cta-note { font-size: 11.5px; color: var(--hs-gray); margin-top: 2px; }

.title-suffix { font-size: 15px; font-weight: 500; color: var(--hs-gray); }

.table-lead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px 0; }
.table-lead-row .pager { padding: 0; flex-shrink: 0; }
.table-lead { text-align: left; margin: 0; }
.table-lead-row .cta-row { flex: 1 1 auto; margin-bottom: 0; }

.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--hs-ink); }
.sortable-th::after { content: ''; display: inline-block; width: 9px; margin-left: 4px; font-size: 9px; opacity: 0.5; }
.sortable-th.sort-asc::after { content: '\25B2'; opacity: 1; }
.sortable-th.sort-desc::after { content: '\25BC'; opacity: 1; }
.title-breadcrumb { color: var(--hs-gray); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

.filter-checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-checkbox-label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; color: var(--hs-ink); }
.filter-checkbox-label input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--hs-orange); }

tr.row-flagged td { background: var(--hs-warning-bg); }

/* Overview tile status tones - color communicates match confidence at a
   glance: solid green = strongest (Stripe ID), fading to soft-matches;
   orange = needs action (new in Stripe); red = needs attention (duplicate
   emails), matching the warning-banner color. Palette now draws from the
   HubSpot-inspired success/warning/error tokens above instead of the
   earlier earth-tone greens/oranges. */
.stat-tile.tone-green { background: #d5faee; border-color: #a6f0d2; }
.stat-tile.tone-green .stat-label, .stat-tile.tone-green .stat-description { color: #00805a; }
.stat-tile.tone-green .stat-value { color: #005c3f; }
.stat-tile.tone-green.tab-btn:hover { border-color: #6fdcb3; }
.stat-tile.tone-green.tab-btn.active { border-color: #00805a; box-shadow: 0 0 0 1px #00805a; }

.stat-tile.tone-green-light { background: var(--hs-success-bg); border-color: #a3ecA0; }
.stat-tile.tone-green-light .stat-label, .stat-tile.tone-green-light .stat-description { color: #2b8f3f; }
.stat-tile.tone-green-light .stat-value { color: #1a6b2b; }
.stat-tile.tone-green-light.tab-btn:hover { border-color: #8fd98c; }
.stat-tile.tone-green-light.tab-btn.active { border-color: #2b8f3f; box-shadow: 0 0 0 1px #2b8f3f; }

.stat-tile.tone-green-lighter { background: #eafbea; border-color: #cdf0cc; }
.stat-tile.tone-green-lighter .stat-label, .stat-tile.tone-green-lighter .stat-description { color: #4c9c55; }
.stat-tile.tone-green-lighter .stat-value { color: #336b3a; }
.stat-tile.tone-green-lighter.tab-btn:hover { border-color: #b1e6af; }
.stat-tile.tone-green-lighter.tab-btn.active { border-color: #4c9c55; box-shadow: 0 0 0 1px #4c9c55; }

.stat-tile.tone-orange { background: var(--hs-warning-bg); border-color: #f5dca3; }
.stat-tile.tone-orange .stat-label, .stat-tile.tone-orange .stat-description { color: var(--hs-warning-text); }
.stat-tile.tone-orange .stat-value { color: #6e4c0a; }
.stat-tile.tone-orange.tab-btn:hover { border-color: #ecc876; }
.stat-tile.tone-orange.tab-btn.active { border-color: var(--hs-warning-text); box-shadow: 0 0 0 1px var(--hs-warning-text); }

.stat-tile.tone-red { background: var(--hs-error-bg); border-color: #f5bcae; }
.stat-tile.tone-red .stat-label, .stat-tile.tone-red .stat-description { color: var(--hs-error-text); }
.stat-tile.tone-red .stat-value { color: #8f2a0b; }
.stat-tile.tone-red.tab-btn:hover { border-color: #ef9c87; }
.stat-tile.tone-red.tab-btn.active { border-color: var(--hs-error-text); box-shadow: 0 0 0 1px var(--hs-error-text); }

/* Dashboard mockup (design-review only, static sample data) */
.mockup-banner { background: var(--hs-neutral-bg); color: var(--hs-neutral-text); border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: 10px 16px; font-size: 12.5px; margin-bottom: 20px; }
.heartbeat-card { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.heartbeat-value { font-size: 38px; font-weight: 700; margin-top: 4px; color: var(--hs-ink); }
.heartbeat-value span { font-size: 16px; font-weight: 500; color: var(--hs-gray); }
.target-tracker-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--hs-gray); margin-bottom: 10px; }
.target-tracker-row strong { font-size: 15px; color: var(--hs-ink); }
.progress-track { background: var(--hs-neutral-bg); border-radius: 8px; height: 10px; overflow: hidden; }
.progress-fill { background: var(--hs-orange); height: 100%; }
.funnel-row { display: flex; gap: 10px; flex-wrap: wrap; }
.funnel-row .stat-tile { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
/* Stage titles vary a lot in length ("Interesse in mentor" vs "Actieve
   match") - clamp every title to the same 2-line box so the number below
   it lines up across every tile regardless of how long the label is. */
.funnel-row .stat-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.35em * 2);
  line-height: 1.35em;
}
.funnel-row .stat-value { margin-top: 6px; }
.funnel-row .stat-description { min-height: 1em; }
.invoice-link { color: var(--hs-teal); font-size: 12.5px; text-decoration: underline; }

/* Dashboard: light red background flags data that's still placeholder -
   either a business input we don't have (a HubSpot property/pipeline) or
   an integration not built yet (Deals API). */
.placeholder-tile { background: var(--hs-error-bg) !important; border-color: #f5bcae !important; }
.placeholder-tile .stat-value, .placeholder-tile .card-title { color: var(--hs-error-text); }
.placeholder-note { background: var(--hs-error-bg); border: 1px solid #f5bcae; border-radius: var(--hs-radius-lg); padding: 10px 14px; color: var(--hs-error-text); margin-top: 10px; }
.placeholder-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--hs-error-bg); border: 1px solid #f5bcae; vertical-align: middle; margin: 0 2px; }