/* pugdashboard shared styles.
   Design tokens mirror the existing puglab (app.uptown.com) so this
   dashboard reads as a sibling. Keep tokens in sync if puglab ever
   updates. */

:root {
  --navy: #013A52;
  --navy-dark: #012a3d;
  --navy-light: #edf3f6;
  --navy-mid: rgba(1,58,82,.06);

  --green: #1EB683;
  --green-dark: #18a374;
  --green-light: #e4f7f0;
  --green-glow: rgba(30,182,131,.15);

  --gray-100: #e8ecef;
  --gray-200: #d4dade;
  --gray-400: #8899a6;
  --gray-600: #4d5f6b;

  --white: #ffffff;
  --bg: #f4f6f8;
  --surface-1: #ffffff;
  --surface-2: #f7f9fb;
  --border: rgba(1,58,82,.08);

  --red: #e53e3e;
  --red-light: #fff0f0;

  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 4px rgba(1,58,82,.05), 0 0 0 1px rgba(1,58,82,.04);
  --shadow-sm: 0 2px 12px rgba(1,58,82,.08);
  --shadow-md: 0 8px 32px rgba(1,58,82,.10);
  --shadow-lg: 0 24px 64px rgba(1,58,82,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--navy);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, .font-montserrat {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- header ---------- */

.header {
  background: rgba(1,58,82,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
}

.header-left  { display: flex; align-items: center; gap: 20px; }
.header-right { display: flex; align-items: center; gap: 14px; }

.header-logo { display: flex; align-items: center; }
.header-logo img { height: 52px; width: auto; display: block; object-fit: contain; }

.header-pipe { width: 1px; height: 28px; background: rgba(255,255,255,.12); }
.header-sub {
  font-size: 11px;
  color: rgba(168,180,196,.8);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.header-user {
  font-size: 11px;
  color: rgba(168,180,196,.85);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-signout {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: all .15s;
}
.btn-signout:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ---------- nav tabs ---------- */

.nav {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  gap: 4px;
  position: sticky;
  top: 64px;
  z-index: 90;
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--gray-600);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.nav a:hover { color: var(--navy); }
.nav a.active {
  color: var(--navy);
  border-bottom-color: var(--green);
}

/* ---------- main ---------- */

.main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.main h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.main h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--gray-600);
}
.page-sub {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 22px;
}

/* ---------- account picker row ---------- */

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.picker-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ---------- form controls ---------- */

.input, .select {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: var(--r-pill);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, background .15s;
}
.input:hover, .select:hover {
  border-color: var(--gray-200);
  background-color: #fff;
}
.input:focus, .select:focus {
  border-color: var(--navy);
  background-color: #fff;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238899a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  min-width: 220px;
}

.btn-primary {
  height: 36px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--green) 0%, #18c992 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .03em;
  box-shadow: 0 2px 10px var(--green-glow);
  transition: all .2s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  box-shadow: 0 6px 20px var(--green-glow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px var(--green-glow); }
.btn-primary:disabled {
  background: var(--gray-200);
  color: var(--gray-600);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  height: 34px;
  padding: 0 16px;
  background: var(--bg);
  color: var(--gray-600);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--r-pill);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-light);
}

/* ---------- stat cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  animation: fadeUp .4s ease both;
}
.card:nth-child(1) { animation-delay:  0ms; }
.card:nth-child(2) { animation-delay: 40ms; }
.card:nth-child(3) { animation-delay: 80ms; }
.card:nth-child(4) { animation-delay:120ms; }
.card:nth-child(5) { animation-delay:160ms; }
.card:nth-child(6) { animation-delay:200ms; }
.card:nth-child(7) { animation-delay:240ms; }
.card:nth-child(8) { animation-delay:280ms; }

.card h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.card-stat {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.card-meta {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 6px;
}

/* ---------- placeholder / empty ---------- */

.placeholder {
  background: var(--surface-1);
  border: 1px dashed var(--gray-200);
  border-radius: var(--r-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  animation: fadeIn .3s ease both;
}
.placeholder strong {
  display: block;
  color: var(--gray-600);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ---------- login ---------- */

body.login-body {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
  animation: fadeUp .4s ease both;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.login-brand img {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.login-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .04em;
  line-height: 1;
}
.login-brand-sub {
  font-size: 10px;
  color: var(--gray-400);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 4px;
}

.login-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}

.login-field { margin-bottom: 12px; }
.login-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--navy);
  background: var(--surface-2);
  outline: none;
  transition: border-color .15s, background .15s;
}
.login-input:focus {
  border-color: var(--navy);
  background: #fff;
}

.login-submit {
  width: 100%;
  height: 42px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s;
}
.login-submit:hover:not(:disabled) { background: var(--navy-dark); }
.login-submit:disabled { opacity: .6; cursor: wait; }

.login-error {
  color: var(--red);
  font-size: 12px;
  min-height: 16px;
  margin-top: 10px;
  line-height: 1.4;
}

/* ---------- misc ---------- */

.hidden { display: none !important; }

.loading {
  color: var(--gray-400);
  font-size: 12px;
  padding: 16px 0;
}

@media (max-width: 800px) {
  .header { padding: 0 16px; }
  .nav    { padding: 0 16px; }
  .main   { padding: 20px 16px; }
  .header-pipe, .header-sub { display: none; }
  .header-user { max-width: 120px; }
}

/* ==============================================================
   Comparison dashboard + account drill-down (added in v2)
   ============================================================== */

/* ---------- filter bar (sticky under header) ---------- */

.filter-bar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 64px;
  z-index: 90;
  box-shadow: var(--shadow-xs);
}

.filter-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

.timeframe-pills {
  display: inline-flex;
  background: var(--bg);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}

.timeframe-pill {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .04em;
  transition: all .15s;
}
.timeframe-pill:hover { color: var(--navy); background: var(--navy-light); }
.timeframe-pill.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 4px rgba(1,58,82,.18);
}

/* ---------- wider main ---------- */

.main-wide { max-width: none; padding: 20px 28px; }

/* ---------- KPI strip (compact cards across the top) ---------- */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px 14px 18px;
  box-shadow: var(--shadow-xs);
  animation: fadeUp .35s ease both;
}
/* Colored left-border accent. Each card's accent color is tied to its
   position in the summary strip — keep renderKpis() card order stable or
   the colors drift off-metric. Order: Connections, Messages, Acc Rate,
   Responses, Resp Rate, Positives, Pos Resp Rate, Meetings, Pos Book Rate. */
.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #8899a6;
}
.kpi-card:nth-child(1)::before { background: #3b9fd4; }
.kpi-card:nth-child(2)::before { background: #013A52; }
.kpi-card:nth-child(3)::before { background: #1EB683; }
.kpi-card:nth-child(4)::before { background: #3b9fd4; }
.kpi-card:nth-child(5)::before { background: #f59e0b; }
.kpi-card:nth-child(6)::before { background: #1EB683; }
.kpi-card:nth-child(7)::before { background: #013A52; }
.kpi-card:nth-child(8)::before { background: #013A52; }
.kpi-card:nth-child(9)::before { background: #f59e0b; }

.kpi-card:nth-child(1) { animation-delay:   0ms; }
.kpi-card:nth-child(2) { animation-delay:  30ms; }
.kpi-card:nth-child(3) { animation-delay:  60ms; }
.kpi-card:nth-child(4) { animation-delay:  90ms; }
.kpi-card:nth-child(5) { animation-delay: 120ms; }
.kpi-card:nth-child(6) { animation-delay: 150ms; }
.kpi-card:nth-child(7) { animation-delay: 180ms; }
.kpi-card:nth-child(8) { animation-delay: 210ms; }
.kpi-card:nth-child(9) { animation-delay: 240ms; }

.kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.kpi-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}

/* ---------- table section ---------- */

.table-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.section-head h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}
.section-meta {
  font-size: 11px;
  color: var(--gray-400);
}

/* "+ Add new account" button sits in the section header, right-aligned
   via margin-left:auto so the h2 + count meta stay left. Uses the navy
   primary vibe — compact pill, Montserrat uppercase like the sign-out
   button, but filled (not ghost) so it reads as the primary action. */
.btn-add-account {
  margin-left: auto;
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn-add-account:hover:not(:disabled) {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.btn-add-account:active:not(:disabled) {
  transform: translateY(1px);
}
.btn-add-account:disabled {
  opacity: .6;
  cursor: progress;
}

.table-wrap {
  overflow-x: auto;
}

.client-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.client-table thead th {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.client-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border-2, var(--border));
  color: var(--navy);
}
.client-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}
.client-table tbody tr:hover {
  background: var(--navy-light);
}
.client-table th.num, .client-table td.num { text-align: right; white-space: nowrap; }
.client-table th.trend, .client-table td.trend { width: 100px; text-align: right; }
.client-cell .client-name {
  font-weight: 600;
  color: var(--navy);
}
.client-table .loading {
  text-align: center;
  color: var(--gray-400);
  padding: 22px 0;
}

/* rate colors — matches puglab's convention */
.rate-good { color: #107a3e; font-weight: 600; }
.rate-ok   { color: var(--navy); }
.rate-bad  { color: #c01111; }

/* ---------- sparkline (inline SVG) ---------- */

.spark {
  display: inline-block;
  vertical-align: middle;
}

/* ---------- dashboard: extended filter bar ---------- */
/* Accounts + Companies multiselect, Status select, and the date range
   inputs that sit to the right of the Timeframe pills. filter-group is
   a small inline cluster of a label + control. filter-spacer pushes
   timeframe + date-range to the right edge. */

.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-spacer { flex: 1 1 auto; }

.filter-select {
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--bg);
  padding: 0 10px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
  cursor: pointer;
}
.filter-select:hover { border-color: var(--navy-light, #cfd9e2); }

.filter-daterange {
  gap: 4px;
}
.filter-date {
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--bg);
  padding: 0 10px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
  min-width: 130px;
}
.filter-date:focus { border-color: var(--navy); outline: none; }
.filter-range-sep {
  font-size: 11px;
  color: var(--gray-400);
  padding: 0 2px;
}
.filter-date-clear {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.filter-date-clear:hover { color: var(--navy); }

/* ---------- multiselect popover (Accounts / Companies) ---------- */

.ms-wrap { position: relative; }

.ms-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--bg);
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
  cursor: pointer;
  min-width: 120px;
  max-width: 220px;
}
.ms-button:hover { border-color: var(--navy-light, #cfd9e2); }
.ms-button[aria-expanded="true"] { border-color: var(--navy); }
.ms-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-caret { color: var(--gray-400); font-size: 10px; }

.ms-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  max-width: 320px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(1, 58, 82, 0.12);
  padding: 6px;
}
.ms-popover.hidden { display: none; }

.ms-head {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border-2, var(--border));
  margin-bottom: 4px;
}
.ms-link {
  background: none;
  border: none;
  color: var(--navy);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
}
.ms-link:hover { text-decoration: underline; }

/* Type-to-filter search input inside the popover. Sits between the
   "Select all / Clear" row and the options list. */
.ms-search {
  width: 100%;
  height: 28px;
  margin: 4px 0 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
  background: var(--bg);
  outline: none;
  box-sizing: border-box;
}
.ms-search:focus { border-color: var(--navy); }
/* Remove the ugly "cancel" affordance Chrome/Edge add to type=search on
   some platforms — we'd rather operators just clear with backspace. */
.ms-search::-webkit-search-decoration,
.ms-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.ms-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
}
.ms-option:hover { background: var(--navy-light); }
.ms-option input[type="checkbox"] { margin: 0; accent-color: var(--navy); cursor: pointer; }
/* Rows filtered out by the search input. Hidden, not removed — their
   checked state is preserved so clearing the search restores the UI. */
.ms-option.ms-hidden { display: none; }

.ms-empty {
  color: var(--gray-400);
  font-size: 11px;
  font-style: italic;
  padding: 8px 6px;
}

/* ---------- account table: new columns + in-place editing ---------- */

/* Editable cells (Company / Start Date / End Date). Empty state shows
   an italic placeholder "— set —" so operators know the cell is
   editable without a distracting pencil icon on every row. */
.client-table td.editable {
  cursor: text;
  position: relative;
}
.client-table td.editable:hover .editable-value { background: var(--navy-light); }
.client-table td.editable .editable-value {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.client-table td.editable .editable-empty {
  color: var(--gray-400);
  font-style: italic;
}
.client-table td.editing { padding: 6px 8px; }
.editable-input {
  width: 100%;
  min-width: 110px;
  border: 1.5px solid var(--navy);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--navy);
  background: var(--bg);
  outline: none;
}

/* Status column: colored dot + text. Green = active, grey = inactive. */
.status-cell {
  white-space: nowrap;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.status-active   { background: #1EB683; box-shadow: 0 0 0 3px rgba(30, 182, 131, 0.15); }
.status-inactive { background: #8899a6; box-shadow: 0 0 0 3px rgba(136, 153, 166, 0.15); }
.status-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  vertical-align: middle;
}

/* Sortable column headers: cursor + caret indicator. Caret is empty
   when unsorted, ▲ when ascending, ▼ when descending. */
.client-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.client-table th.sortable:hover { color: var(--navy); }
.client-table th.sortable .sort-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  color: var(--navy);
  min-width: 9px;
}
.client-table th.sorted-asc,
.client-table th.sorted-desc {
  color: var(--navy);
}

/* ==============================================================
   Account drill-down page
   ============================================================== */

.header-breadcrumb {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  transition: background .15s;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .03em;
}
.header-breadcrumb:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.account-titlebar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 18px 32px 12px;
  box-shadow: var(--shadow-xs);
}
.account-titlebar h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.account-meta {
  font-size: 12px;
  color: var(--gray-400);
}
.account-meta a {
  color: var(--navy);
  text-decoration: none;
}
.account-meta a:hover { text-decoration: underline; }

/* ---------- sub-tabs ---------- */

.sub-tabs {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  gap: 0;
  position: sticky;
  top: 64px;
  z-index: 80;
  box-shadow: var(--shadow-xs);
}

.sub-tab {
  background: none;
  border: none;
  padding: 12px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.sub-tab:hover { color: var(--navy); }
.sub-tab.active {
  color: var(--navy);
  border-bottom-color: var(--green);
}

.sub-panel { animation: fadeIn .25s ease both; }

/* ---------- chart card ---------- */

.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
  margin-top: 12px;
}

.chart-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.chart-head h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
}

.chart-container {
  position: relative;
  height: 340px;
  width: 100%;
}

/* ---------- summary panel (KPI strip + chart in one card) ---------- */

/* Extends .panel-card. KPI strip sits above the chart with a little breathing
   room so the inline chart subhead + legend read as a second sub-section. */
.summary-panel .kpi-strip {
  margin-bottom: 18px;
}

.chart-head-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chart-subhead {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e7a87;
  margin: 0;
}

/* ---------- chart legend (custom checkbox) ---------- */

.chart-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-family: Inter, sans-serif;
  font-size: 12px;
}
.legend-box {
  width: 14px;
  height: 14px;
  border: 2px solid var(--c);
  border-radius: 3px;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 120ms ease;
}
.legend-box.checked {
  background: var(--c);
}
/* White checkmark when the box is filled. Pure CSS — no icon font. */
.legend-box.checked::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: -0.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.legend-label {
  font-weight: 600;
}

/* Subtle "+" / "−" pill that gates the optional series (regular
   followups, positive followups, inmails, retargeting). Sits inline
   right after Meetings booked. Default: dim gray ring, no fill. Hover:
   tints navy so it's discoverable without being loud. */
.legend-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: -4px; /* hugs the last default item */
  border: 1px dashed rgba(1, 58, 82, 0.30);
  border-radius: 50%;
  background: transparent;
  color: #6e7a87;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.legend-toggle:hover {
  color: var(--navy, #013A52);
  border-color: rgba(1, 58, 82, 0.55);
  background: rgba(1, 58, 82, 0.04);
}
.legend-toggle:focus-visible {
  outline: 2px solid var(--navy, #013A52);
  outline-offset: 2px;
}

/* ==============================================================
   Follow-ups tab (mirrors extension sidebar pattern)
   ============================================================== */

.fu-root { display: flex; flex-direction: column; gap: 14px; }

.fu-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.fu-section-head {
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.fu-section-overdue  { background: #fff0f0; color: #c01111; }
.fu-section-today    { background: var(--green-light); color: #107a3e; }
.fu-section-upcoming { background: var(--navy-light);  color: var(--navy); }

.fu-count {
  background: rgba(0,0,0,.08);
  color: inherit;
  font-size: 10px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
}

.fu-list {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

.fu-row {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fu-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.fu-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
}
.fu-due {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  white-space: nowrap;
}

.fu-meta, .fu-step {
  font-size: 11px;
  color: var(--gray-600);
}
.fu-step { color: var(--gray-400); }

.fu-preview {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.4;
  min-height: 40px;
  white-space: pre-wrap;
}
.fu-notemplate { color: var(--gray-400); font-style: italic; }

/* Editable preview textarea on follow-up cards. Soft grey border at
   rest (matches the extension's .sn-fu-preview-edit) so it reads as
   a textarea but isn't visually loud. Focus deepens the border to
   navy + lifts the background to white. */
textarea.fu-preview-edit {
  width: 100%;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--navy);
  min-height: 56px;
  max-height: 240px;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 100ms ease;
}
textarea.fu-preview-edit:focus { border-color: var(--navy); }

.fu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.fu-btn {
  border: 1px solid var(--gray-100);
  background: var(--surface-1);
  color: var(--gray-600);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s;
}
.fu-btn:hover:not(:disabled) {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-light);
}
.fu-btn:disabled { opacity: .5; cursor: not-allowed; }

.fu-btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.fu-btn-primary:hover:not(:disabled) {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
}

.fu-btn-success {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.fu-btn-success:hover:not(:disabled) {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

.fu-btn-ghost {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
}

/* ---- toolbar (view toggle + count) ----------------------------- */

.fu-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.fu-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
.fu-view-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fu-view-btn:hover  { background: var(--surface-2); }
.fu-view-btn.active {
  background: var(--navy);
  color: #fff;
  cursor: default;
}
.fu-toolbar-count {
  font-size: 12px;
  color: var(--gray-400);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- per-card right-side cluster (due + cancel X) -------------- */

.fu-row-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fu-cancel {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  color: var(--gray-300);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.fu-cancel:hover {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-light);
}

/* Click-to-edit due-date button on follow-up cards. Always shows a
   dashed underline so the affordance is obvious at rest (operators
   shouldn't have to discover-by-hover that the date is clickable).
   Hover lifts to solid + navy color. On manual rows the date edits
   the row directly; on cadence rows it shifts the whole sequence
   forward via cadence_snooze_days. */
.fu-due-editable {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  border-bottom: 1px dashed var(--gray-200);
  transition: color 80ms ease, border-color 80ms ease, border-style 80ms ease;
  white-space: nowrap;
}
.fu-due-editable:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
  border-bottom-style: solid;
}
.fu-due-list-btn {
  /* List view variant — same click-to-edit semantics, but lives in a
     table cell so doesn't need the .fu-due wrapper styling. */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.fu-due-input {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff;
  outline: none;
}
.fu-due-input:focus {
  border-color: var(--navy);
}

/* "Manual" badge on follow-up rows — distinguishes operator-scheduled
   one-off tasks from cadence-derived steps. Indigo to match the
   InMail status pill so the visual language stays consistent across
   "out-of-band action" indicators. */
.fu-source-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.fu-source-manual {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
.fu-source-positive {
  background: rgba(30, 182, 131, 0.16);
  color: #107a3e;
}
/* Subtle left-border tint on the whole row so it scans as "different
   from cadence" without being loud. Indigo for manual, green for
   positive — matches the badge colors. */
.fu-row.fu-row-manual {
  border-left: 3px solid #6366f1;
}
.fu-list-row.fu-row-manual td:first-child {
  border-left: 3px solid #6366f1;
}
.fu-row.fu-row-positive {
  border-left: 3px solid #1EB683;
}
.fu-list-row.fu-row-positive td:first-child {
  border-left: 3px solid #1EB683;
}

/* ---- source filter pills (All / Follow-up / Positive / Manual) -- */
.fu-source-pills {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
}
.fu-source-pill {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fu-source-pill:hover { color: var(--navy); border-color: var(--gray-300); }
.fu-source-pill.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.fu-source-pill.fu-source-pill-positive.active {
  background: #1e6e45;
  border-color: #1e6e45;
}
.fu-source-pill.fu-source-pill-manual.active {
  background: #4338ca;
  border-color: #4338ca;
}
.fu-source-pill-count {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.fu-source-pill.active .fu-source-pill-count {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Cadence tab "Skip weekends" rule row ─────────────────────────────
   Single per-client setting that governs both cadence cards below.
   Sits above .cad-grid as a compact toggle + description row. */
.cad-skip-weekends-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--border, #dfe4ea);
  border-radius: 8px;
}
.cad-skip-weekends-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.cad-skip-weekends-text strong {
  font-weight: 600;
  color: var(--text, #15212b);
}
.cad-skip-weekends-sub {
  font-size: 12px;
  color: var(--muted, #5b6673);
}

/* ---- Cadence tab — side-by-side editors on desktop, stacked on
   mobile. .cad-grid wraps the two .cad-editor cards. */
.cad-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.cad-grid > .cad-editor {
  /* Override the existing max-width: 720px cap so each card fills
     its column on desktop. */
  max-width: none;
}
@media (max-width: 1100px) {
  .cad-grid {
    grid-template-columns: 1fr;
  }
}

/* Positive editor accent — green top border. */
.cad-editor-positive {
  border-top: 3px solid rgba(30, 182, 131, 0.4);
}

/* Header row inside each editor — title on the left, ON/OFF toggle
   pinned to the right. */
.cad-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cad-head-row h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

/* ---- Slider toggle (.cad-toggle) ------------------------------- */
/* Layout: hidden checkbox + visual track/thumb + adjacent text label.
   Green when ON (checked), grey when OFF. The text changes between
   "On" / "Off" via JS so we don't need separate label nodes. */
.cad-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.cad-toggle-input {
  /* Hide the native checkbox but keep it focusable + keyboard-toggleable. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.cad-toggle-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--gray-300);
  border-radius: 999px;
  transition: background 120ms ease;
  flex-shrink: 0;
}
.cad-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: left 120ms ease;
}
.cad-toggle-input:checked ~ .cad-toggle-track {
  background: #1EB683;
}
.cad-toggle-input:checked ~ .cad-toggle-track .cad-toggle-thumb {
  left: 18px;
}
.cad-toggle-input:focus-visible ~ .cad-toggle-track {
  box-shadow: 0 0 0 3px rgba(30, 182, 131, 0.25);
}
.cad-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums; /* keeps "On"/"Off" widths stable */
  min-width: 22px;
}
.cad-toggle-input:checked ~ .cad-toggle-label {
  color: #107a3e;
}

/* ====================================================================
   Follow-up log modal — pencil icon on a card opens this.
   ====================================================================
   Port of the extension's .sn-fu-modal-* with class names rebranded.
   Two paths: ✓ Meeting booked (one-click sequence-exit) or
   Log a response (textarea + sentiment pills). Submit fires the same
   logFollowupAction / outreach-insert paths as the existing buttons. */

.fu-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 24, 38, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fu-modal-fadein 140ms ease;
}
@keyframes fu-modal-fadein { from { opacity: 0; } to { opacity: 1; } }

.fu-modal {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 48px rgba(15, 24, 38, 0.28);
  font-family: inherit;
  color: var(--navy);
}

.fu-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.fu-modal-close:hover { background: var(--surface-2); color: var(--navy); }

.fu-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  padding-right: 32px;
  margin-bottom: 2px;
}
.fu-modal-sub {
  font-size: 12.5px;
  color: var(--gray-400);
  margin-bottom: 14px;
  line-height: 1.35;
}

.fu-modal-meeting {
  display: block;
  width: 100%;
  background: #1e6e45;
  color: #fff;
  border: 1px solid #1e6e45;
  border-radius: 6px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.fu-modal-meeting:hover:not(:disabled) { background: #155534; border-color: #155534; }
.fu-modal-meeting:disabled { opacity: 0.5; cursor: wait; }

.fu-modal-hint {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-top: 4px;
  margin-bottom: 14px;
  text-align: center;
}

.fu-modal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  color: var(--gray-400);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fu-modal-divider::before,
.fu-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.fu-modal-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 4px;
}

.fu-modal-response {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--navy);
  background: #fff;
  resize: vertical;
  min-height: 96px;
  max-height: 260px;
  outline: none;
  box-sizing: border-box;
}
.fu-modal-response:focus { border-color: var(--navy); }

.fu-modal-pills {
  display: flex;
  gap: 6px;
}
.fu-modal-pill {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 120ms ease;
}
.fu-modal-pill:hover { border-color: var(--navy); }
.fu-modal-pill-emoji { font-size: 15px; line-height: 1; }
.fu-modal-pill-pos.selected { background: #e7f5ed; border-color: #1e6e45; color: #155534; }
.fu-modal-pill-neu.selected { background: #fff4e5; border-color: #b87400; color: #8a5700; }
.fu-modal-pill-neg.selected { background: #fde8e8; border-color: #9a2c1f; color: #7a1e14; }

/* Log response + Schedule follow-up — full-width navy buttons that
   visually echo the Meeting Booked button's layout (block, 100%
   width, same padding rhythm) just in navy instead of green. The
   inline X in the top-right serves as Cancel, so explicit Cancel
   buttons would be redundant. */
.fu-modal-log-response,
.fu-modal-add-fu {
  display: block;
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: 6px;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 14px;
  transition: background 120ms ease, border-color 120ms ease;
}
.fu-modal-log-response:hover:not(:disabled),
.fu-modal-add-fu:hover:not(:disabled) {
  background: var(--navy-dark, #0a1827);
  border-color: var(--navy-dark, #0a1827);
}
.fu-modal-log-response:disabled,
.fu-modal-add-fu:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Schedule-follow-up section (third option in the modal). Same
   spacing rhythm as the response section. The end-current-cadence
   slider sits in a label row aligned right. */
.fu-modal-fu-date,
.fu-modal-fu-msg {
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--navy);
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.fu-modal-fu-msg {
  resize: vertical;
  min-height: 64px;
  max-height: 200px;
  line-height: 1.4;
}
.fu-modal-fu-date:focus,
.fu-modal-fu-msg:focus { border-color: var(--navy); }

.fu-modal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 10px;
}
.fu-modal-toggle-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}
.fu-modal-hint-left {
  text-align: left;
  margin-bottom: 0;
}

/* ---- list view ------------------------------------------------- */

.fu-list-wrap {
  padding: 0;
  background: var(--surface-1);
}
.fu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fu-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-400);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.fu-table .fu-col-check {
  width: 32px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.fu-table .fu-col-step,
.fu-table .fu-col-due {
  white-space: nowrap;
}
.fu-table .fu-col-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%; /* shrink-to-fit */
}
.fu-table .fu-col-actions .fu-btn {
  padding: 4px 10px;
  font-size: 11px;
}
.fu-table .fu-col-actions .fu-cancel {
  font-size: 14px;
  margin-left: 4px;
}
.fu-list-row td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}
.fu-list-row:hover {
  background: var(--surface-2);
}
.fu-list-row.selected {
  background: rgba(22, 58, 82, 0.04);
}
.fu-check, .fu-check-all {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--navy);
  margin: 0;
}

/* ---- bulk action bar (list view selection) --------------------- */

.fu-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(22, 58, 82, 0.06);
  border-bottom: 1px solid rgba(22, 58, 82, 0.12);
}
.fu-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}
.fu-bulk-action {
  font-size: 12px;
  padding: 6px 12px;
}
.fu-bulk-action.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.fu-bulk-action.btn-danger:hover {
  background: #c53030;
  border-color: #c53030;
}

/* ==============================================================
   Cadence editor tab
   ============================================================== */

.cad-editor {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  max-width: 720px;
}

.cad-head h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.cad-head .page-sub {
  margin-bottom: 16px;
  font-size: 12px;
}
.cad-head code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--navy);
  font-family: 'Consolas', monospace;
}

.cad-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.cad-step {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cad-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cad-step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 56px;
}
.cad-step-day-label {
  font-size: 11px;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cad-step-day {
  width: 72px;
  height: 32px;
  border: 1.5px solid var(--gray-100);
  border-radius: 8px;
  padding: 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.cad-step-day:focus { border-color: var(--navy); }

.cad-step-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all .15s;
}
.cad-step-remove:hover {
  background: #ffecec;
  color: #c01111;
}

.cad-step-template {
  width: 100%;
  border: 1.5px solid var(--gray-100);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
  background: #fff;
  outline: none;
  resize: vertical;
  /* autoGrow (/account/) sizes height to content; min/max bound the range.
     min = ~4 lines so an empty step still reads as a message field; max caps
     around 25 lines before falling back to scroll. */
  min-height: 84px;
  max-height: 540px;
  overflow-y: auto;
  box-sizing: border-box;
  transition: border-color .15s;
}
.cad-step-template:focus { border-color: var(--navy); }

.cad-add {
  width: 100%;
  background: var(--surface-1);
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--r);
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  letter-spacing: .03em;
  transition: all .15s;
}
.cad-add:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-light);
}

.cad-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.cad-save {
  background: var(--navy);
  border: none;
  border-radius: var(--r-pill);
  padding: 9px 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s;
}
.cad-save:hover:not(:disabled) { background: var(--navy-dark); }
.cad-save:disabled {
  background: var(--gray-200);
  color: var(--gray-600);
  cursor: not-allowed;
}

.cad-feedback {
  font-size: 12px;
  color: var(--gray-400);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cad-feedback.ok  { color: #107a3e; }
.cad-feedback.err { color: #c01111; }

/* ---------- Templates tab (dashboard) ---------- */
/* `-d` suffix keeps these distinct from the popup's .tmpl-* classes,
   which share file paths mentally in my head but live in popup.css. */

.tmpl-list-d {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.tmpl-row-d {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tmpl-row-head-d {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tmpl-name-d {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  background: transparent;
  outline: none;
  min-width: 0;
}
.tmpl-name-d:hover { border-color: var(--border); }
.tmpl-name-d:focus { border-color: var(--accent); background: #fff; }

.tmpl-copy-d, .tmpl-remove-d {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: var(--gray-600);
  line-height: 1.3;
}
.tmpl-copy-d:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tmpl-copy-d.copied {
  border-color: #107a3e;
  color: #107a3e;
}
.tmpl-remove-d {
  padding: 4px 9px;
  font-size: 14px;
}
.tmpl-remove-d:hover {
  background: #ffecec;
  border-color: #c01111;
  color: #c01111;
}

.tmpl-body-d {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  outline: none;
  resize: vertical;
  /* autoGrow (/account/) sizes height to content; min/max bound the range.
     min = ~6 lines so a lengthy message is visible at a glance even when
     loaded; max caps around 30 lines before we fall back to scroll. */
  min-height: 124px;
  max-height: 620px;
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
}
.tmpl-body-d:focus { border-color: var(--accent); }

/* ---------- Reply Instructions tab ---------- */

.rpl-text-d {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  outline: none;
  resize: vertical;
  /* autoGrow (/account/) sizes height to content; min/max bound the range.
     Austin wants to see a "whole sheet of paper" if needed — max ≈ 44 lines
     (~900px) fits well more than a letter page of typed instructions before
     scroll kicks in. min = ~13 lines so the field always feels substantial. */
  min-height: 260px;
  max-height: 900px;
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.rpl-text-d:focus { border-color: var(--accent); }

/* ---------- trends by period + period comparison ---------- */

.panel-card {
  background: #fff;
  border: 1px solid rgba(1, 58, 82, 0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
  animation: fadeUp .35s ease both;
}
.panel-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-card-head h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy, #013A52);
  margin: 0;
}
.panel-card-sub {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: #6e7a87;
}

.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.trend-chart {
  background: #f8fafb;
  border: 1px solid rgba(1, 58, 82, 0.06);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
.trend-chart-label {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6e7a87;
  margin-bottom: 4px;
}
.trend-chart-main {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy, #013A52);
  line-height: 1.1;
}
.trend-chart-sub {
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: #6e7a87;
  margin-top: 2px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trend-svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.period-wrap {
  overflow-x: auto;
}

/* Daily Activity navigator (prev / week label / next / Today).
   Same metric rows as Period Comparison but one column per day of
   the visible week. Cells with .daily-future show '—' in muted
   color; .daily-today-col highlights today's column subtly. */
.daily-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.daily-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #cad5dd;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #0f2138;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.daily-nav-btn:hover:not(:disabled) {
  background: #f7fafc;
}
.daily-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.daily-nav-label {
  min-width: 170px;
  text-align: center;
  font-weight: 600;
  color: #0f2138;
}
.daily-nav-today {
  margin-left: 4px;
  padding: 4px 10px;
  border: 1px solid #cad5dd;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #0f2138;
}
.daily-nav-today:hover {
  background: #f7fafc;
}
.daily-future {
  color: #cad5dd;
}
.daily-today-col {
  background: rgba(15, 33, 56, 0.04);
}
.period-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 13px;
  min-width: 760px;
}
.period-table th,
.period-table td {
  padding: 10px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(1, 58, 82, 0.06);
  white-space: nowrap;
}
.period-table thead th {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6e7a87;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(1, 58, 82, 0.12);
}
.period-table tbody th {
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: var(--navy, #013A52);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.period-table tbody tr:hover {
  background: rgba(1, 58, 82, 0.02);
}
.period-table td.rate-good { color: #107a3e; font-weight: 600; }
.period-table td.rate-ok   { color: var(--navy, #013A52); }
.period-table td.rate-bad  { color: #c01111; font-weight: 600; }
.period-table td.rate-none { color: #9aa5b1; }
.period-table .period-all {
  background: rgba(1, 58, 82, 0.03);
  font-weight: 700;
}

/* Funnel rate rows (Acceptance / Response / Pos. Response / Pos. Booking)
   pop a touch above the count rows around them: bold the row label, add
   a tabular-nums weight, and lay a soft inset shadow that runs the full
   width of the row so the eye reads it as a "stand-out" line. The shadow
   uses a top + bottom inset so it brackets the row without changing its
   height. */
.period-table tr.period-rate-row > th,
.period-table tr.period-rate-row > td {
  font-weight: 700;
  background: rgba(1, 58, 82, 0.035);
  box-shadow:
    inset 0  1px 0 rgba(1, 58, 82, 0.10),
    inset 0 -1px 0 rgba(1, 58, 82, 0.10),
    0 1px 2px rgba(1, 58, 82, 0.06);
}
.period-table tr.period-rate-row > th {
  color: var(--navy, #013A52);
}
/* When a rate cell is in the All-Time column, layer the period-all tint
   on top of the rate-row tint without doubling up the shadow. */
.period-table tr.period-rate-row > td.period-all {
  background: rgba(1, 58, 82, 0.06);
}

/* "Additional Outreach" section divider row. Sits between the funnel
   rows (Pos. Booking Rate) and the supplementary count rows (regular
   followups, positive followups, inmails, retargeting). Italic gray
   label, no hover, slight top gap so it reads as a divider. */
.period-table tr.period-section-row {
  background: transparent;
}
.period-table tr.period-section-row:hover {
  background: transparent;
}
.period-table tr.period-section-row > th {
  padding: 18px 10px 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 700;
  color: #8899a6;
  font-family: Montserrat, sans-serif;
  border-bottom: 1px dashed rgba(1, 58, 82, 0.10);
  background: transparent;
}

/* Cell layout: main value + delta chip right-aligned. Chip hugs the value
   and wraps below on very narrow columns. */
.period-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.period-cell-val {
  font-variant-numeric: tabular-nums;
}

.period-subhead {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: #8899a6;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ---------- delta chips (↑22% / ↓11% / →) ---------- */

.pct-change {
  display: inline-flex;
  align-items: center;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.pct-up   { color: #107a3e; background: rgba(30, 182, 131, 0.14); }
.pct-down { color: #c01111; background: rgba(224, 72, 72, 0.12); }
.pct-flat { color: #9aa5b1; background: rgba(154, 165, 177, 0.12); }

/* Inline chips inside trend-chart subhead reuse the colors without the pill
   background for a cleaner look. */
.trend-chart-sub .pct-change {
  background: transparent;
  padding: 0;
  font-size: 11px;
}

/* ---------- small responsive tweaks ---------- */

@media (max-width: 900px) {
  .main-wide { padding: 16px; }
  .filter-bar, .sub-tabs, .account-titlebar { padding-left: 16px; padding-right: 16px; }
  .fu-list { grid-template-columns: 1fr; }
  .chart-container { height: 280px; }
  .panel-card { padding: 16px 18px; }
}

/* ==============================================================
   Prospects tab
   ============================================================== */

.pr-head {
  /* Title + toolbar on one row with graceful wrap on narrow viewports. */
  align-items: center;
}

.pr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pr-search {
  height: 32px;
  min-width: 240px;
  max-width: 320px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--navy);
  background: var(--surface-2);
  outline: none;
  transition: border-color .15s, background .15s;
}
.pr-search::placeholder { color: var(--gray-400); }
.pr-search:hover { border-color: var(--gray-200); background: #fff; }
.pr-search:focus { border-color: var(--navy); background: #fff; }

.pr-export { height: 32px; }

/* ---------- filter row (status + sentiment chip groups) ---------- */

.pr-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pr-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-filter-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.pr-filter-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.pr-chip {
  height: 26px;
  padding: 0 11px;
  border: 1.5px solid var(--gray-100);
  background: var(--bg);
  color: var(--gray-600);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .12s;
}
.pr-chip:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: #fff;
}
.pr-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- meta + table ---------- */

.pr-meta {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 8px;
}

.pr-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--surface-1);
}
.pr-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.pr-table thead th.num { text-align: right; }

.pr-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--navy);
  vertical-align: middle;
}
.pr-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Prospect rows are clickable; timeline rows are not.

   content-visibility: auto opts each row into browser-level
   virtualization: when a row is far enough off-screen, the engine
   skips its style/layout/paint passes entirely. On accounts with
   thousands of prospects (John Kratz: ~3,600), this is the
   difference between the browser painting every row on every
   scroll frame and only painting the rows near the viewport.
   contain-intrinsic-size gives the engine a height hint so the
   scrollbar reflects the true table height before un-skipped rows
   measure themselves. Supported in Chrome/Edge 85+, Firefox 125+,
   Safari 18+. */
.pr-row {
  cursor: pointer;
  transition: background .12s;
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
.pr-row:hover    { background: var(--navy-light); }
.pr-row.expanded { background: var(--navy-light); }
.pr-row.expanded .pr-name-main { color: var(--navy); }

/* Same trick for the timeline row, which stays hidden via the
   .hidden class until expanded and otherwise renders a several-
   hundred-px tall timeline view. */
.pr-timeline-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 0px;
}

.pr-name-main {
  font-weight: 700;
  color: var(--navy);
}
.pr-company, .pr-title {
  color: var(--gray-600);
}
.pr-last {
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* LinkedIn link in its own compact column on the right of every prospect
   row. Renders as a small pill so it doesn't visually compete with the
   status/sentiment pills earlier in the row. */
.pr-col-link { width: 1%; white-space: nowrap; }
.pr-link { text-align: right; padding-right: 12px !important; }
.pr-link-btn {
  display: inline-block;
  padding: 4px 9px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.pr-link-btn:hover {
  background: var(--surface-1);
  border-color: var(--gray-400);
}

/* ---- Rating + Notes columns -----------------------------------
   Per-prospect operator-set fields. Rating is a paired thumb
   toggle (NULL/up/down); Notes is a click-to-expand pill. Both
   are dashboard-only — they don't show up in the Sales Nav
   sidebar. Writing them never touches outreach rollups. */

.pr-col-rating { width: 1%; white-space: nowrap; }
.pr-rating-cell { white-space: nowrap; vertical-align: middle; }

.pr-thumb {
  background: none;
  border: 0;
  padding: 4px 5px;
  margin: 0 1px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  /* Outline-feel by default: desaturate + dim. Active state drops
     the filter so the emoji renders in full color. */
  filter: grayscale(1) opacity(0.4);
  transition: filter .12s, transform .12s;
  border-radius: 4px;
}
.pr-thumb:hover {
  filter: grayscale(0.4) opacity(0.85);
  background: var(--surface-1);
}
.pr-thumb.active {
  filter: none;
  transform: scale(1.08);
}
.pr-thumb.active.pr-thumb-up    { background: rgba(40, 167, 69, 0.10); }
.pr-thumb.active.pr-thumb-down  { background: rgba(220, 53, 69, 0.10); }

/* Notes column: spreadsheet-style inline editor. The cell is
   capped to ~300px wide so it doesn't blow out the table; static
   text wraps + clamps to ~6 lines, click swaps in a textarea. */
.pr-col-notes  { width: 300px; max-width: 300px; }
.pr-notes-cell {
  vertical-align: top;
  padding: 6px 8px;
  width: 300px;
  max-width: 300px;
  /* Allow rows to grow with content. The static .pr-notes-display
     and edit-mode <textarea> both sit inside this cell. */
}

.pr-notes-display {
  /* Wrap long text + clamp display height to roughly 6 lines so
     one prospect's novel doesn't make a row twice as tall as the
     table. Click to enter edit mode reveals the full content
     inside an internally-scrollable textarea. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  line-clamp: 6;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.4;
  color: var(--navy);
  cursor: text;
  min-height: 20px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.pr-notes-display:hover {
  background: var(--surface-1);
  border-color: var(--border);
}
.pr-notes-display.pr-notes-empty {
  color: var(--gray-400);
  font-style: italic;
}

.pr-notes-edit {
  width: 100%;
  min-height: 24px;
  max-height: 200px;
  padding: 4px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 3px;
  resize: none;
  box-sizing: border-box;
  overflow-y: auto;
}
.pr-notes-edit:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(15, 33, 56, 0.10);
}

/* ---- Email column + Enrich button --------------------------- */
.pr-col-email  { width: 1%; max-width: 260px; }
.pr-email-cell {
  font-size: 12px;
  color: var(--navy);
  white-space: nowrap;
}
.pr-contact-link {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px dotted var(--gray-300);
}
.pr-contact-link:hover {
  border-bottom-color: var(--navy);
}

/* Click-to-copy email cell. Plain text by default, dotted underline
   on hover hints at clickability. Briefly turns green + says
   "Copied!" after a successful clipboard write. */
.pr-contact-text {
  color: var(--navy);
  cursor: pointer;
  border-bottom: 1px dotted var(--gray-300);
  user-select: none;
}
.pr-contact-text:hover {
  border-bottom-color: var(--navy);
}
.pr-contact-copied {
  color: var(--good, #228b22);
  border-bottom-color: transparent;
  font-weight: 600;
}
.pr-contact-copy-fail {
  color: var(--danger, #b41e1e);
  border-bottom-color: transparent;
}
.pr-enrich-btn {
  display: inline-block;
  padding: 3px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.pr-enrich-btn:hover {
  background: var(--accent-soft);
}
.pr-enrich-btn-disabled,
.pr-enrich-btn-disabled:hover {
  color: var(--gray-400);
  border-color: var(--border);
  background: #fff;
  cursor: not-allowed;
}

/* N/A — Apollo couldn't find a value. Click to retry resets the
   attempted_at flag and runs a fresh enrichment call. Visually
   muted so it reads as "tried, no match" not "actionable now". */
.pr-na-btn {
  display: inline-block;
  padding: 3px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  background: var(--surface-1);
  border: 1px dashed var(--gray-300);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.pr-na-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}
.pr-na-btn-disabled,
.pr-na-btn-disabled:hover {
  color: var(--gray-400);
  border-color: var(--border);
  background: var(--surface-1);
  cursor: not-allowed;
}

.pr-bulk-action-disabled,
.pr-bulk-action-disabled:hover {
  color: var(--gray-400);
  cursor: not-allowed;
}

/* ---- Auto-enrich settings pill + popover --------------------- */
.pr-enrich-wrap { position: relative; }
.pr-enrich-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.pr-enrich-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(15, 33, 56, 0.12);
  padding: 14px 16px;
}
.pr-enrich-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}
.pr-enrich-label input { cursor: pointer; }
.pr-enrich-help {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
  margin: 8px 0 0;
}
.pr-enrich-status {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 8px;
  min-height: 14px;
}

/* Truncate long titles / companies so rows stay single-height. */
.pr-table td.pr-company, .pr-table td.pr-title {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- status + sentiment pills ---------- */

.pr-status {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  white-space: nowrap;
}
.pr-status-connection { background: rgba(107,154,184,.14); color: #4d7594; }
.pr-status-inmail     { background: rgba(99,102,241,.14);  color: #4338ca; }
.pr-status-message    { background: rgba(59,159,212,.16);  color: #1f6a95; }
.pr-status-response   { background: rgba(245,158,11,.14);  color: #b97706; }
.pr-status-meeting    { background: rgba(30,182,131,.16);  color: #107a3e; }
.pr-status-other      { background: var(--gray-100);       color: var(--gray-400); }

.pr-sent {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  text-transform: capitalize;
}
.pr-sent-positive { background: rgba(30,182,131,.14); color: #107a3e; }
.pr-sent-neutral  { background: rgba(136,153,166,.18); color: var(--gray-600); }
.pr-sent-negative { background: rgba(224,72,72,.14); color: #c01111; }
.pr-sent-none     { color: var(--gray-400); font-size: 11px; }

/* ---------- timeline (expanded row) ---------- */

.pr-timeline-cell {
  background: var(--surface-2);
  padding: 14px 18px 18px !important;
  border-bottom: 1px solid var(--border);
}

.pr-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pr-timeline-who {
  font-size: 12px;
  color: var(--navy);
}
.pr-timeline-who strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.pr-timeline-title { color: var(--gray-600); }

/* Email + phone line under the name/company/title. Either or both links
   appear; both are mailto: / tel: so they work from the OS. */
.pr-timeline-contact {
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--gray-600);
}
.pr-timeline-contact a {
  color: var(--accent-blue, #3b9fd4);
  text-decoration: none;
}
.pr-timeline-contact a:hover { text-decoration: underline; }

.pr-open-linkedin { height: 30px; font-size: 11px; }

/* ---- timeline actions (Mark meeting / Mark responded / Open LI) ---- */
.pr-timeline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pr-action {
  height: 30px;
  font-size: 11px;
  padding: 0 12px;
  white-space: nowrap;
}
.pr-action-status {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1EB683;
  background: rgba(30, 182, 131, 0.1);
  border-radius: 6px;
}

/* ---- Log-response inline form --------------------------------------- */
.pr-response-form {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pr-response-form.hidden { display: none; }
.pr-response-text {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.pr-response-text:focus {
  outline: none;
  border-color: var(--accent, #1EB683);
  box-shadow: 0 0 0 2px rgba(30, 182, 131, 0.15);
}
.pr-response-form-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Add-follow-up form — mirrors .pr-response-form's container styling
   so the two forms read as siblings (one for "they responded", one
   for "I'll send another later"). Date picker on top, optional
   message textarea below, action buttons at bottom-right. */
.pr-add-followup-form {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pr-add-followup-form.hidden { display: none; }
.pr-followup-form-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.pr-followup-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.pr-followup-field input[type="date"] {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
}
.pr-followup-field input[type="date"]:focus {
  border-color: var(--navy);
}
.pr-followup-text {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.pr-followup-text:focus {
  outline: none;
  border-color: var(--navy);
}
.pr-followup-form-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pr-sentiment-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--navy);
}
.pr-sentiment-picker label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}
.pr-form-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  margin-right: 4px;
}
.pr-response-form-buttons {
  display: flex;
  gap: 8px;
}

/* ---- Edit-info inline form ----------------------------------------- */
.pr-info-form {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pr-info-form.hidden { display: none; }
.pr-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.pr-info-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pr-info-field input {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  color: var(--navy);
  box-sizing: border-box;
  width: 100%;
}
.pr-info-field input:focus {
  outline: none;
  border-color: var(--accent, #1EB683);
  box-shadow: 0 0 0 2px rgba(30, 182, 131, 0.15);
}
.pr-info-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pr-info-note {
  font-size: 10px;
  color: var(--gray-600);
  font-style: italic;
}

/* ---- Editable sentiment pill (appears inside each response event) --- */
.pr-sent-edit {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  cursor: pointer;
  color: var(--navy);
  -webkit-appearance: none;
  appearance: none;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 2l3 3 3-3' fill='none' stroke='%238899a6' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.pr-sent-edit:focus { outline: 1px solid var(--accent, #1EB683); }
.pr-sent-edit-positive { background-color: rgba(30, 182, 131, 0.1); color: #0d7a4f; }
.pr-sent-edit-neutral  { background-color: rgba(107, 154, 184, 0.1); color: #4a7a99; }
.pr-sent-edit-negative { background-color: rgba(239, 68, 68, 0.1);   color: #b91c1c; }
.pr-sent-edit-none     { color: var(--gray-600); }

.pr-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pr-event {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  border-left: 3px solid var(--gray-200);
}
.pr-event-connection     { border-left-color: #6B9AB8; }
.pr-event-inmail         { border-left-color: #6B9AB8; }
.pr-event-message        { border-left-color: #3b9fd4; }
.pr-event-followup       { border-left-color: #3b9fd4; }
.pr-event-retargeting    { border-left-color: #8899a6; }
.pr-event-response       { border-left-color: #f59e0b; }
.pr-event-meeting_booked { border-left-color: #1EB683; }

.pr-event-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pr-event-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: .04em;
  white-space: nowrap;
}
.pr-event-type {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pr-event-body {
  margin-top: 6px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .pr-toolbar { justify-content: flex-start; }
  .pr-search  { min-width: 0; width: 100%; }
  .pr-filter-row { flex-direction: column; gap: 10px; }
  .pr-table td.pr-company, .pr-table td.pr-title { max-width: 160px; }
}


/* =============================================================
   Phase A: admin affordances on the account table
   ============================================================= */

/* ---------- seat usage chip ---------- */
/* Sits alongside the "— 181 accounts" count in the section header.
   Neutral colour by default; warms to amber near cap (>= 90%), flips
   red + bold at cap so admins notice when "+ Add new account" will
   fail before they click it. */
.seat-usage {
  font-size: 11px;
  color: var(--gray-400);
  transition: color .15s;
}
.seat-usage.near-cap { color: #b46a00; font-weight: 600; }
.seat-usage.at-cap   { color: #c01111; font-weight: 700; }

/* ---------- section head layout ---------- */
/* Spacer pushes the "Show archived" toggle + add-account button to
   the right edge while leaving h2 + counts + seat chip clustered
   on the left. The existing .btn-add-account margin-left:auto is a
   no-op once the spacer absorbs all free space — kept as-is so the
   button still right-aligns on pages that don't use a spacer. */
.section-head-spacer { flex: 1 1 auto; }

/* "Show archived" label is a compact inline toggle styled to sit
   comfortably next to the Add button. Muted grey text so it reads
   as a secondary control. */
.show-archived {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  user-select: none;
}
.show-archived input[type="checkbox"] {
  accent-color: var(--navy);
  margin: 0;
  cursor: pointer;
}

/* ---------- trailing row-actions column ---------- */
.client-table th.col-actions,
.client-table td.col-actions {
  width: 96px;
  text-align: right;
  white-space: nowrap;
  padding-right: 14px;
}

/* Compact, secondary-styled row action button. Archive is a muted
   grey outline (destructive-ish but reversible, so not red). When
   the row is archived, the button becomes "Unarchive" in the filled
   navy style to emphasise the restore action. */
.btn-row-action {
  display: inline-block;
  padding: 4px 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: transparent;
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn-row-action:hover:not(:disabled) {
  color: var(--navy);
  border-color: var(--navy);
  background: var(--navy-light);
}
.btn-row-action.btn-unarchive {
  color: var(--navy);
  border-color: var(--navy);
}
.btn-row-action.btn-unarchive:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
}
.btn-row-action:active:not(:disabled) { transform: translateY(1px); }
.btn-row-action:disabled { opacity: .6; cursor: progress; }

/* ---------- archived row visual ---------- */
/* Mute all data cells except the action column so the Unarchive
   button stays fully legible. Row becomes nearly-normal on hover
   so data is still readable when the admin reaches for the restore. */
.client-table tbody tr.is-archived td:not(.col-actions)       { opacity: .55; }
.client-table tbody tr.is-archived:hover td:not(.col-actions) { opacity: .85; }

/* Amber-gold dot for the Archived status. Neither success nor
   failure — archival is a deliberate admin action, not an error. */
.status-archived { background: #c89b3c; box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.15); }

/* ==============================================================
   Platform admin: nav link + drill-in banner + listing table
   ============================================================== */

/* Nav link in the dashboard header. Sits between user-email and
   sign-out, styled as a pill with a translucent white fill to read as
   a secondary action (sign-out is the primary white-on-dark action).
   Hidden by default via .hidden; revealed at runtime by JS when the
   isPlatformAdmin() probe returns true. */
.btn-platform-admin {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-platform-admin:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

/* Drill-in banner: sits directly below the sticky header on the
   dashboard when ?as_org=<id> is active. Amber/gold palette to
   distinguish from red error banners (the extension's no-account
   banner) and from green success. "You're viewing someone else's
   data — don't forget it's not yours." is the feeling. */
.drill-in-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff8e1;         /* pale amber */
  color: #7a5300;
  border-bottom: 1px solid #f0d79a;
  padding: 10px 32px;
  font-size: 12px;
  font-weight: 500;
}
.drill-in-banner strong {
  color: #5a3b00;
  font-weight: 700;
}
.drill-in-banner .drill-in-exit {
  color: #5a3b00;
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.drill-in-banner .drill-in-exit:hover { color: #3a2600; }

/* Pending-invite banner on /dashboard/. One card per open invite
   that targets the signed-in operator. Stacked vertically so multiple
   invites read cleanly; each card is a flex row with body on the left
   and Accept / Decline on the right.

   Visually distinct from the drill-in banner (amber): uses a pale
   navy tint so it reads as "informational, action available" instead
   of "caution, you're in someone else's data". Sits outside the
   sticky header so it scrolls off once the user has dealt with it. */
.pending-invites-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 32px;
  background: #eef3f9;
  border-bottom: 1px solid #cfdbea;
}
.pending-invites-banner.hidden { display: none; }
.invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #cfdbea;
  border-radius: 8px;
  padding: 10px 14px;
}
.invite-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.invite-card-title {
  font-size: 13px;
  color: var(--navy-dark);
  font-weight: 500;
}
.invite-card-title strong { font-weight: 700; }
.invite-card-sub {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 2px;
}
.invite-card-pending {
  font-size: 11px;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 4px;
}
.invite-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Seats Used / Paid / Gifted cell on /platform-admin/. Only the
   gifted (third) value is clickable to edit; used + paid are read-
   only. The .editable-value class is now applied only to the
   gifted span, so hover/click affordance lights up just there. */
.client-table td.editable-seats {
  cursor: default;
  position: relative;
}
.client-table td.editable-seats .editable-value {
  cursor: pointer;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.client-table td.editable-seats:hover .editable-value { background: var(--navy-light); }
.client-table td.editable-seats .seats-sep {
  color: var(--gray-300);
  margin: 0 4px;
  user-select: none;
}
.client-table td.editable-seats.editing {
  padding: 6px 8px;
  text-align: right;
  white-space: nowrap;
}
.seats-used-prefix {
  color: var(--gray-400);
  margin-right: 4px;
}
.editable-input-seats {
  width: 70px;
  min-width: 0;
  text-align: right;
}

/* Colorize the "used / paid" chip when the org is at or near cap, so
   Austin can scan the listing and spot who's about to run out of
   seats. Mirrors the .seat-usage chip on the main dashboard. */
.client-table td.seats-near-cap .seats-used { color: #b46a00; font-weight: 600; }
.client-table td.seats-at-cap   .seats-used { color: #c01111; font-weight: 700; }

/* "View as org" row-action link. Re-uses .btn-row-action for the
   pill shape; overrides text-decoration (a tag) and uses the navy
   palette to signal that this is the primary drill-in action. */
.btn-row-action.btn-drill-in {
  text-decoration: none;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-row-action.btn-drill-in:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Platform-admin rows aren't click-navigable (no row-level anchor),
   so unset the cursor:pointer that .client-table tbody tr applies by
   default. The inline edit cell and "View as org" link set their
   own cursors (text and pointer respectively). */
#org-table tbody tr { cursor: default; }
#org-table tbody tr:hover { background: transparent; }
#org-table tbody tr:hover td.editable-seats .editable-value { background: var(--navy-light); }

/* ---------- Guides nav link ---------- */
/* Public docs link — leftmost button in the header-right cluster.
   Same pill shape as Team / Platform admin so the cluster reads as
   one group; always visible (not gated by role). */
.btn-guides-link {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-guides-link:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

/* ---------- Team nav link ---------- */
/* Matches the Platform admin pill so the header-right cluster reads
   as one group of utility nav. Same palette; same reveal pattern
   (hidden by default, revealed at runtime by JS). */
.btn-team-link {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-team-link:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

/* "Get the Chrome extension" link in the dashboard header. Same pill
   shape as the team / platform-admin buttons, slightly different tone
   so it reads as a CTA rather than a nav. Hidden by default; revealed
   when window.SUPABASE_CONFIG.chromeExtensionUrl is set. */
.btn-chrome-ext {
  display: inline-flex;
  align-items: center;
  background: rgba(30, 182, 131, .14);
  border: 1px solid rgba(30, 182, 131, .35);
  color: #b8eed8;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-chrome-ext:hover {
  background: rgba(30, 182, 131, .24);
  border-color: rgba(30, 182, 131, .55);
  color: #fff;
}

/* ---------- Login: signup-mode switcher ---------- */
/* Small prompt + link at the bottom of the login card that flips
   between "Sign in" and "Create account" modes without a reload. */
/* Forgot-password link, top-right of the password input. Visible in
   sign-in mode only; hidden in signup + reset (the password field
   is hidden in reset mode entirely). */
.login-forgot {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gray-400);
  text-decoration: none;
}
.login-forgot:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* Shown on /reset/ when the URL has no recovery hash — i.e. someone
   navigated here directly instead of through a password-reset email. */
.login-no-token {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft, #4a5562);
  background: var(--gray-50, #f7f8fa);
  border: 1px solid var(--gray-100, #eef0f3);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 8px 0 4px;
}
.login-no-token p { margin: 0 0 8px; }
.login-no-token p:last-child { margin-bottom: 0; }
.login-no-token-link {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.login-no-token-link:hover { text-decoration: underline; }

.login-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
}
.login-switch a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.login-switch a:hover { text-decoration: underline; }

/* Info-style message for the "check your inbox" confirm-email flow.
   Distinct from .login-error (red) so a success-ish state doesn't
   shout at the user. */
.login-info {
  color: var(--navy);
  font-size: 12px;
  min-height: 16px;
  margin-top: 6px;
  line-height: 1.4;
}

/* "or" divider between password sign-in and OAuth providers.
   Centered short text with horizontal lines on each side. */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin: 16px 0 12px;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Google sign-in button. Neutral "white with subtle border + the
   four-color G mark" treatment per Google's branding guidelines. */
.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.login-google:hover {
  background: var(--surface-2);
  border-color: var(--gray-400);
}
.login-google:active {
  background: var(--gray-200);
}
.login-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Post-signup confirmation card. Sits in the same .login-card as
   the form replaces (hidden until showConfirmPanel runs). Body
   text larger than .login-info so the "check your email" step
   reads as the primary instruction, not a side note. */
.login-confirm-body {
  font-size: 14px;
  color: var(--navy);
  line-height: 1.5;
  margin: 16px 0 8px;
}
.login-confirm-body strong {
  color: var(--navy-2);
  font-weight: 700;
}
.login-confirm-note {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.45;
  margin: 0 0 14px;
}

/* ---------- Team page ---------- */
/* Stack of sections on /team/. Mirrors .table-section spacing but
   gives the invite form its own visual block above the table stack. */
.team-section {
  margin-top: 28px;
}
.team-section:first-of-type { margin-top: 12px; }

/* Enrichment integration section. Admin-only, hidden by default
   until the loadEnrichment loader reveals it. */
.section-description {
  font-size: 13px;
  color: var(--gray-500);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.section-description a { color: var(--accent); }

.enrichment-config {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.enrichment-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.enrichment-connected-meta { font-size: 13px; color: var(--navy); }
.enrichment-connected-actions { display: flex; gap: 8px; }

.enrichment-form { display: flex; flex-direction: column; gap: 8px; }
.enrichment-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.enrichment-help-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
.enrichment-input {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: #fff;
}
.enrichment-input:focus { outline: 0; border-color: var(--navy); }
.enrichment-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.enrichment-form-error {
  font-size: 12px;
  color: var(--danger, #b41e1e);
  min-height: 16px;
}

.enrichment-usage { margin-top: 16px; }
.enrichment-usage-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 8px;
}
.enrichment-usage-empty {
  font-size: 13px;
  color: var(--gray-500);
  padding: 14px;
  background: var(--surface-1);
  border: 1px dashed var(--border);
  border-radius: var(--r);
}
.enrichment-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.enrichment-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
}
.enrichment-stat-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.1;
}
.enrichment-stat-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
}
.enrichment-stat-label {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
  letter-spacing: .04em;
}
.enrichment-stat-foot {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px;
}
.enrichment-usage-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* Enrichment log modal — wider than the access modal so the
   table doesn't squeeze. */
.enrichment-log-modal-card {
  max-width: 900px;
  width: 92vw;
}
.enrichment-log-table {
  width: 100%;
  font-size: 12px;
}
.enrichment-log-table th { font-size: 10px; }
.enrichment-log-pill {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.enrichment-log-pill-none {
  background: var(--gray-100);
  color: var(--gray-500);
}
.enrichment-log-fail {
  color: var(--danger, #b41e1e);
  font-weight: 600;
}

/* Invite form — email + role + submit on one row, wrapping on narrow
   viewports. Kept inline (not modal) because invite is the highest-
   frequency action on this page and shouldn't be hidden behind a click. */
.invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 10px;
}
.invite-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 240px;
  min-width: 0;
}
.invite-field-role { flex: 0 1 280px; }
.invite-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 6px;
}
.invite-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: #fff;
  color: var(--navy-dark);
  transition: border-color .15s, box-shadow .15s;
}
.invite-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-light);
}
.invite-submit {
  height: 38px;
  padding: 0 22px;
  white-space: nowrap;
}

/* Invite result surface: rendered below the form after a submit.
   Three visual states (ok / info / error) matching the three outcomes
   of invite_member. */
.invite-result {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.invite-result-ok {
  background: #e8f5ea;
  color: #1f5a2e;
  border: 1px solid #bce0c4;
  padding: 10px 14px;
  border-radius: 8px;
}
.invite-result-info {
  background: var(--navy-light);
  color: var(--navy-dark);
  border: 1px solid rgba(0,45,90,.12);
  padding: 10px 14px;
  border-radius: 8px;
}
.invite-result-error {
  background: #fdecec;
  color: #7b1414;
  border: 1px solid #f3c2c2;
  padding: 10px 14px;
  border-radius: 8px;
}
/* The copyable signup-link row. Monospaced input so URLs don't get
   ligature-ed, plus a button hugging its right edge. */
.invite-link-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
.invite-link {
  flex: 1 1 auto;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--navy-dark);
  background: #fff;
}
.invite-link:focus { outline: 2px solid var(--navy); outline-offset: -1px; }

/* Role badges on member + invite rows. Admins get the primary navy
   color; members get a neutral gray so the table reads calmly. */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.role-badge.role-admin  { background: var(--navy); color: #fff; }
.role-badge.role-member { background: var(--gray-100); color: var(--gray-600); }
/* The role cell is a button for easy toggle; strip native chrome
   so it looks like a plain badge until hovered. */
.role-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 2px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.role-btn:hover { border-color: var(--gray-200); background: var(--surface-2); }
.row-action-note {
  color: var(--gray-400);
  font-size: 11px;
  font-style: italic;
  margin-left: 6px;
}

/* Destructive row action (Remove, Revoke). Same shape as .btn-row-action
   but the hover tints red so the admin knows what they're about to do. */
.btn-row-action.btn-row-action-danger:hover:not(:disabled) {
  color: #b01818;
  border-color: #d88888;
  background: #fdecec;
}

/* Team tables: unset the cursor:pointer that .client-table tbody tr
   inherits from the dashboard, because team rows aren't row-clickable. */
#member-table tbody tr,
#invite-table tbody tr { cursor: default; }
#member-table tbody tr:hover,
#invite-table tbody tr:hover { background: transparent; }

/* Explanatory copy that sits between a section head and its table.
   Used on /team/ to spell out the admin/member access rule so
   the "Manage access" button doesn't feel mysteriously absent on
   admin rows. */
.section-blurb {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-600);
}
.section-blurb strong { color: var(--navy-dark); }
.section-blurb em { font-style: italic; color: var(--navy); }

/* Footnote that sits UNDER a section's table. Used for conditional
   hints like "everyone on this team is an admin — here's how to
   narrow visibility". Slightly lighter visual weight than
   .section-blurb so it doesn't compete with the primary copy. */
.section-footnote {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-600);
  background: transparent;
  border-left: 3px solid var(--gray-200);
}
.section-footnote strong { color: var(--navy-dark); }

/* ---------- Team: client access modal ---------- */
/* Opens from the "Manage access" button on a non-admin member row.
   Backdrop + centered card; closed by clicking the backdrop, the ×,
   or pressing Escape. */
.access-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.access-modal.hidden { display: none; }
.access-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, .45);
}
.access-modal-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(10, 20, 35, .25);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.access-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--gray-100);
}
.access-modal-head h3 {
  margin: 0 0 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
}
.access-modal-sub {
  font-size: 12px;
  color: var(--gray-400);
}
.access-modal-close {
  background: transparent;
  border: none;
  color: var(--gray-400);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.access-modal-close:hover { background: var(--surface-2); color: var(--navy-dark); }
.access-modal-body {
  padding: 14px 22px 20px;
  overflow-y: auto;
}
.access-grid-head {
  font-size: 12px;
  color: var(--gray-600);
  margin-bottom: 10px;
}
.access-grid-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--gray-100);
}
.access-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.access-grid-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--navy-dark);
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}
.access-grid-check {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
}
.access-grid-status {
  font-size: 11px;
  color: var(--gray-400);
  font-style: italic;
  white-space: nowrap;
  margin-left: 10px;
}

/* Toolbar sitting above the account checklist inside the modal.
   Holds Select all / Clear all + a live status that reports how many
   rows changed when a bulk action ran. */
.access-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0;
}
.access-grid-bulk-status {
  font-size: 11px;
  color: var(--gray-600);
  font-style: italic;
  margin-left: auto;
  min-height: 1em;
}

/* Access count column on the members table. Admins show a muted
   "All N" to signal the org-wide default; members show "N of M"
   with a subtle warning tint when N=0 so a zero-access member
   doesn't hide in plain sight. */
.access-count-cell {
  white-space: nowrap;
}
.access-count {
  font-size: 12px;
  color: var(--gray-600);
}
.access-count-all {
  color: var(--navy);
  font-weight: 600;
}
.access-count-none {
  color: var(--gray-400);
  font-style: italic;
}

/* ---------- Recent activity panel ----------
   Append-only event log for team mutations. Each .activity-item is a
   single line: text on the left (with subtle emphasis on actor /
   target / role), relative time on the right. The text container can
   wrap on narrow viewports; the timestamp stays in its own column so
   the right edge lines up. */
.activity-list {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border: 1px solid var(--gray-100);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}
.activity-list .loading {
  padding: 16px 18px;
  color: var(--gray-400);
  font-size: 13px;
}
.activity-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--gray-100);
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.45;
}
.activity-item:first-child { border-top: none; }
.activity-item:hover { background: var(--surface-2); }
.activity-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.activity-text strong { color: var(--navy-dark); font-weight: 600; }
.activity-actor,
.activity-target {
  color: var(--navy-dark);
  font-weight: 500;
}
.activity-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: var(--gray-100);
  color: var(--navy-dark);
  padding: 1px 5px;
  border-radius: 4px;
}
.activity-time {
  flex: 0 0 auto;
  color: var(--gray-400);
  font-size: 11.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
   Spreadsheet-style edit/delete UI for the Prospects tab
   ====================================================================
   Three additions on top of the existing .pr-table:
     1. Per-event actions (X + pencil) on each timeline row
     2. Inline edit form per event (response: body + sentiment;
        outgoing-message types: body only)
     3. Prospect-level checkboxes + bulk action bar + sortable header
   ==================================================================== */

/* ---- per-event actions (X / pencil) on timeline rows -------------- */

.pr-event-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Fade in only on event-row hover so the timeline reads cleanly at
     rest. The buttons are still keyboard-focusable; opacity-only hide
     keeps them in the tab order. */
  opacity: 0;
  transition: opacity 80ms ease;
}
.pr-event:hover .pr-event-actions,
.pr-event:focus-within .pr-event-actions {
  opacity: 1;
}

.pr-event-action {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  color: var(--gray-400);
  cursor: pointer;
}
.pr-event-action:hover {
  border-color: var(--gray-200);
  color: var(--navy);
}
.pr-event-edit-btn:hover  { color: var(--navy); }
.pr-event-delete-btn      { font-size: 16px; line-height: 0.7; }
.pr-event-delete-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}

/* ---- inline edit form per event ----------------------------------- */

/* Hidden by default; .pr-event-editing on the parent <li> swaps the
   readonly body for the edit textarea. We toggle a class rather than
   re-render the timeline so unrelated rows keep their state and the
   timeline doesn't flicker. */
.pr-event-edit-form {
  display: none;
  margin-top: 6px;
  flex-direction: column;
  gap: 6px;
}
.pr-event-editing .pr-event-edit-form { display: flex; }
.pr-event-editing .pr-event-body      { display: none; }
.pr-event-editing .pr-event-actions   { display: none; }

.pr-event-edit-text {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  color: var(--navy);
  outline: none;
  resize: vertical;
  background: #fff;
  box-sizing: border-box;
}
.pr-event-edit-text:focus { border-color: var(--navy); }

.pr-event-edit-sent {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--navy);
}
.pr-event-edit-sent label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.pr-event-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Response event body — the response text is the headline (no label,
   since "RESPONSE" already appears in the head). Same typography as
   the default outgoing-event body. */
.pr-event-body-resp {
  margin-top: 6px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Nested "Message sent" sub-box on response events — the paired
   outreach that triggered the response. Purple left-border accent
   distinguishes it from the yellow-trimmed parent event. Tighter
   padding so the response stays the visual headline. */
.pr-event-msg-pair {
  margin-top: 8px;
  padding: 6px 10px 7px 10px;
  border-left: 2px solid #a855f7;
  background: rgba(168, 85, 247, 0.04);
  border-radius: 0 4px 4px 0;
}
.pr-event-body-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7e3ad6;
  margin-bottom: 2px;
}
.pr-event-body-text {
  font-size: 11.5px;
  color: var(--navy);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Inline-editable contenteditable bodies on response events
   (.pr-event-body-resp + .pr-event-body-text inside .pr-event-msg-pair
   when the parent event is a response). Click anywhere inside the
   text → cursor lands at the click position → operator types → blur
   triggers the save. Hover state hints editability without being
   noisy at rest; focus state gives a clear "I'm editing this now"
   visual. */
.pr-inline-edit {
  outline: none;
  cursor: text;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: border-color 80ms ease, background 80ms ease;
}
.pr-inline-edit:hover {
  border-color: var(--gray-200);
}
.pr-inline-edit:focus {
  border-color: var(--navy);
  background: #fff;
}

/* Empty placeholder. contenteditable elements need a :empty hack since
   CSS placeholder doesn't apply to them. Hidden when focused so the
   cursor isn't competing with placeholder text. */
.pr-inline-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-300);
  font-style: italic;
  pointer-events: none;
}
.pr-inline-edit:focus:empty::before {
  content: "";
}

/* Saving / saved indicators. Saving = subtle dashed border (request
   in flight); saved = quick green flash (confirmation). */
.pr-inline-edit-saving {
  border-color: var(--gray-300) !important;
  border-style: dashed !important;
}
.pr-inline-edit-saved {
  border-color: #1EB683 !important;
  background: rgba(30, 182, 131, 0.05);
}

/* Edit form on response events. Response textarea up top (headline),
   then sentiment radios, then the Message Sent textarea in a purple-
   accented sub-section that mirrors the readonly .pr-event-msg-pair
   box. Same color treatment so the visual mode-switch is minimal. */
.pr-event-edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pr-event-edit-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.pr-event-edit-field-msg {
  margin-top: 4px;
  padding: 6px 10px 8px 10px;
  border-left: 2px solid #a855f7;
  background: rgba(168, 85, 247, 0.04);
  border-radius: 0 4px 4px 0;
}
.pr-event-edit-field-msg .pr-event-edit-label {
  color: #7e3ad6;
  font-size: 9.5px;
}

/* ---- prospect checkbox column ------------------------------------- */

.pr-col-check {
  width: 32px;
  padding: 0 4px;
  text-align: center;
}
.pr-check-cell {
  vertical-align: middle;
}
.pr-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  /* Larger hit target than the bare checkbox so misclicks don't toggle
     the row's timeline. */
}
.pr-check,
.pr-check-all {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--navy);
  margin: 0;
}
.pr-row.selected {
  background: rgba(22, 58, 82, 0.04);
}
.pr-row.selected:hover {
  background: rgba(22, 58, 82, 0.07);
}

/* ---- bulk action bar ---------------------------------------------- */

.pr-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: rgba(22, 58, 82, 0.06);
  border: 1px solid rgba(22, 58, 82, 0.12);
  border-radius: 6px;
}
.pr-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-right: auto;
}
.pr-bulk-action {
  font-size: 12px;
  padding: 6px 12px;
}
.pr-bulk-action.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.pr-bulk-action.btn-danger:hover {
  background: #c53030;
  border-color: #c53030;
}

/* ---- sortable Last touch header ----------------------------------- */

.pr-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.pr-table th.sortable:hover {
  color: var(--navy);
}
.pr-table th.sortable .sort-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
  min-width: 8px;
}
.pr-table th.sorted-asc,
.pr-table th.sorted-desc {
  color: var(--navy);
}
.pr-table th.sorted-asc  .sort-caret,
.pr-table th.sorted-desc .sort-caret {
  color: var(--navy);
}

/* ====================================================================
   Sales Nav + LinkedIn URL columns (was a single empty header)
   ====================================================================
   Two side-by-side cells at the right edge of the prospects table.
   Sales Nav opens the lead's messaging thread; LinkedIn opens the
   canonical profile. Empty URL → muted dash so the column footprint
   stays even and the operator can spot missing fields at a glance. */

.pr-table .pr-col-sn,
.pr-table .pr-col-link {
  white-space: nowrap;
  /* Slightly tighter than the rest of the table — these are short, fixed
     content cells. */
  padding-left: 8px;
  padding-right: 8px;
}

.pr-link-empty {
  color: var(--gray-300);
  font-size: 12px;
  cursor: help;
  /* No background; this is a placeholder, not an interactive element. */
}

/* The Edit info form has 5-column grid for the original short fields
   (name/company/title/email/phone). LinkedIn + Sales Nav URLs are long,
   so they break onto their own line at full width. */
.pr-info-field-wide {
  grid-column: 1 / -1;
}

/* ====================================================================
   Manual merge/split overrides
   ====================================================================
   Two affordances:
     - Merge: surfaces in the bulk bar (already styled) when 2+
       prospects are selected. The .btn-primary class supplies most of
       the look; we just nudge spacing here.
     - Split: timeline-scoped — operator clicks "Split events…" in the
       timeline head, the .pr-timeline-cell gets .pr-split-mode, and
       this CSS reveals per-event checkboxes + a sticky split bar.
   ==================================================================== */

/* Per-event split checkbox — hidden at rest, revealed when the parent
   .pr-timeline-cell has .pr-split-mode. */
.pr-event-split-check {
  display: none;
  align-items: center;
  cursor: pointer;
  margin-right: 4px;
}
.pr-event-split-check input {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--navy);
  margin: 0;
}
.pr-split-mode .pr-event-split-check {
  display: inline-flex;
}

/* The split bar — top-of-timeline action panel. Hidden when
   .pr-split-mode is absent. Appears between the timeline head and the
   <ol> of events when active. */
.pr-split-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .25);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--navy);
}
.pr-split-mode .pr-split-bar {
  display: flex;
}
.pr-split-bar-label {
  font-weight: 500;
  flex: 1;
}
.pr-split-bar-count {
  font-weight: 600;
  color: #4338ca;
  font-variant-numeric: tabular-nums;
}
.pr-split-confirm:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* While split mode is active, dim the regular per-event hover actions
   (X / pencil) so the operator's eye stays on the checkboxes. */
.pr-split-mode .pr-event-actions {
  opacity: 0.25;
  pointer-events: none;
}

/* Click-to-edit event date. The date span is interactive — hover state
   and underline-on-hover signal that. While editing, the span gets
   swapped for an <input type="date"> by the click handler; CSS here
   styles that input to fit visually with the surrounding row. */
.pr-event-date-editable {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: border-color 80ms ease, color 80ms ease;
}
.pr-event-date-editable:hover {
  color: var(--navy);
  border-bottom-color: var(--gray-300);
}
.pr-event-date-input {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff;
  outline: none;
}
.pr-event-date-input:focus {
  border-color: var(--navy);
}

/* ====================================================================
   Site-wide footer for legal links
   ====================================================================
   Lives at the bottom of every signed-in dashboard page (dashboard,
   account, team, platform-admin). /terms/ and /privacy/ bring
   their own self-contained footers so they don't rely on app.css. */

.app-footer {
  padding: 18px 28px 22px;
  border-top: 1px solid var(--gray-100);
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  background: #fff;
  margin-top: 40px;
}
.app-footer a {
  color: var(--gray-400);
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.app-footer .sep {
  margin: 0 8px;
  color: var(--gray-200);
  user-select: none;
}

/* Click-wrap consent line at the bottom of the login card. Style is
   intentionally subdued — visible enough for legal notice, quiet enough
   not to compete with the primary action. */
.login-legal {
  font-size: 11px;
  color: var(--gray-400);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}
.login-legal a {
  color: var(--gray-400);
  text-decoration: underline;
}
.login-legal a:hover {
  color: var(--accent);
}

/* ==============================================================
   Meeting Links tab (/account/)
   ==============================================================
   Per-account list of up to 10 meeting links. Each card stacks:
     - row 1: name input + delete (×)
     - row 2: URL input + copy button
     - status: tinted band (gray = unconfigured, amber = pending, green = listening)
     - picker: collapsible config UI when operator clicks "Pick event type / form" */

.ml-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.ml-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(1, 58, 82, 0.04);
}
.ml-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}
.ml-row:last-of-type { margin-bottom: 0; }

.ml-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--navy, #013A52);
  background: #fff;
}
.ml-input:focus { outline: none; border-color: var(--accent, #2d7ab8); }
.ml-name { font-weight: 600; }
.ml-url  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

.ml-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy, #013A52);
  font-family: inherit;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ml-btn:hover:not(:disabled) { background: rgba(1, 58, 82, 0.05); }
.ml-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ml-btn-primary {
  background: var(--navy, #013A52);
  color: #fff;
  border-color: var(--navy, #013A52);
}
.ml-btn-primary:hover:not(:disabled) {
  background: #02263a;
  border-color: #02263a;
}

.ml-btn-link {
  background: transparent;
  border: none;
  color: var(--accent, #2d7ab8);
  padding: 6px 8px;
  font-weight: 500;
}
.ml-btn-link:hover { text-decoration: underline; background: transparent; }

.ml-btn-delete {
  width: 32px;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  color: #6e7a87;
  border-color: var(--border);
}
.ml-btn-delete:hover:not(:disabled) {
  color: #c01111;
  border-color: #c01111;
  background: #fff5f5;
}

.ml-btn-connect {
  font-size: 11px;
  background: #fff;
  border-color: var(--accent, #2d7ab8);
  color: var(--accent, #2d7ab8);
}
.ml-btn-connect:hover:not(:disabled) {
  background: var(--accent, #2d7ab8);
  color: #fff;
}

/* Status band — three states. Color conveys "where is this in setup?" */
.ml-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.4;
}
.ml-status-unconfigured { background: #f6f8fb; color: #4a5763; }
.ml-status-pending      { background: #fff8eb; color: #8a5a06; border: 1px solid rgba(138, 90, 6, 0.15); }
.ml-status-listening    { background: #ecfdf3; color: #0f6b3c; border: 1px solid rgba(15, 107, 60, 0.15); }
.ml-status-label { flex: 1; min-width: 200px; }
.ml-status-badge { font-weight: 600; flex: 1; min-width: 200px; }
.ml-status-meta  { opacity: 0.7; font-size: 11px; flex-basis: 100%; }

/* Resource picker — appears below the status band when operator clicks
   "Pick event type / form" or "Change …". Hidden by default; the JS
   appends/removes the .ml-picker element in place. */
.ml-picker {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(1, 58, 82, 0.03);
  border-left: 3px solid var(--accent, #2d7ab8);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ml-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft, #5b6673);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 90px;
}
.ml-select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--navy, #013A52);
}
.ml-select:focus { outline: none; border-color: var(--accent, #2d7ab8); }
.ml-picker-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ml-picker-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--text-soft, #5b6673);
  margin: 0;
  line-height: 1.5;
}

/* Post-save success panel for HubSpot configure. Shows the webhook URL
   in a copyable input + numbered steps the operator follows in their
   HubSpot Workflows builder. Replaces the old alert() that was hard to
   read and incorrectly said "form submission". */
.ml-postsave {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.ml-postsave-header {
  font-weight: 700;
  font-size: 13px;
  color: #0f6b3c;
}
.ml-postsave-intro {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy, #013A52);
}
.ml-postsave-steps {
  margin: 0 0 0 18px;
  padding: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--navy, #013A52);
}
.ml-postsave-steps li {
  margin-bottom: 4px;
}
.ml-postsave-steps code {
  background: rgba(1, 58, 82, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.ml-postsave-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 4px 0 4px 18px;
}
.ml-postsave-url {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--navy, #013A52);
  background: #fff;
}
.ml-postsave-url:focus { outline: none; border-color: var(--accent, #2d7ab8); }
.ml-postsave-hint {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: var(--text-soft, #5b6673);
  line-height: 1.5;
}
.ml-postsave-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ==============================================================
   Account Performance — drill-zone POP + extras toggle
   ==============================================================
   Scoped to #client-table (the dashboard's account table) so the
   other tables that share .client-table — #org-table on
   platform-admin, #member-table / #invite-table on team — are
   untouched.

   Goals:
   - Make the data cells (Connections … Trend) read as a clearly
     clickable region. Operator clicks them to drill into the
     per-account dashboard, and the visual cue should match.
   - Toggle to expand the "Additional Outreach" columns (Regular FU,
     Positive FU, InMails, Retargeting) that mirror the per-account
     Period Comparison table. Default-collapsed so the table stays
     readable for the common case. */

#client-table tbody td.drill {
  /* Subtle navy tint always-on so the drill zone reads as a single
     "card" running through each row, distinct from the edit-zone on
     the left (Account/Company/dates/Status) and the Archive-zone on
     the right. */
  background: rgba(1, 58, 82, 0.025);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
/* Rate cells (Acc / Resp / Pos. Resp / Pos. Booking) get a darker
   tint so the funnel rates pop out from the count cells around them.
   Headers also tint so the column reads as a unified vertical band.
   The existing rate-good / rate-bad text colors layer on top. */
#client-table tbody td.drill.rate-cell {
  background: rgba(1, 58, 82, 0.07);
}
#client-table thead th.rate-cell {
  background: rgba(1, 58, 82, 0.04);
}
#client-table tbody tr:hover td.drill {
  background: rgba(1, 58, 82, 0.10);
}
#client-table tbody tr:hover td.drill.rate-cell {
  background: rgba(1, 58, 82, 0.14);
}
/* Override the broad .client-table tbody tr:hover navy-light tint —
   we want hover to feel like an "elevation" on the drill zone, not a
   wash across the whole row. The non-drill cells still get a softer
   tint below so the row reads as a cohesive unit. */
#client-table tbody tr:hover {
  background: transparent;
}
#client-table tbody tr:hover td:not(.drill):not(.col-actions) {
  background: rgba(1, 58, 82, 0.04);
}
/* Soft inset+drop shadow on hover so the row visibly "lifts". Pure
   visual cue — no transform/translate that would jitter the table
   layout. */
#client-table tbody tr:hover td.drill {
  box-shadow:
    0 1px 0 rgba(1, 58, 82, 0.10) inset,
    0 -1px 0 rgba(1, 58, 82, 0.10) inset;
}
#client-table tbody tr:hover td.drill:first-of-type {
  box-shadow:
    0 1px 0 rgba(1, 58, 82, 0.10) inset,
    0 -1px 0 rgba(1, 58, 82, 0.10) inset,
    1px 0 0 rgba(1, 58, 82, 0.10) inset;
}
#client-table tbody tr:hover td.drill:last-of-type {
  box-shadow:
    0 1px 0 rgba(1, 58, 82, 0.10) inset,
    0 -1px 0 rgba(1, 58, 82, 0.10) inset,
    -1px 0 0 rgba(1, 58, 82, 0.10) inset;
}

/* Per-row chevron in the col-extras-spacer cell. Lives at the far
   right of the drill zone (just before the Archive button column),
   faint always, brighter + slight rightward shift on hover — a
   classic "click here to drill in" affordance. */
#client-table tbody td.col-extras-spacer::after {
  content: "›";
  display: inline-block;
  color: rgba(1, 58, 82, 0.30);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: color .15s ease, transform .15s ease;
}
#client-table tbody tr:hover td.col-extras-spacer::after {
  color: var(--navy);
  transform: translateX(2px);
}

/* The col-extras-spacer + col-extras-toggle column is narrow — just
   enough to host the chevron / the header toggle pill. */
#client-table th.col-extras-toggle,
#client-table td.col-extras-spacer {
  width: 36px;
  text-align: center;
  padding: 4px;
}

/* Hidden additional outreach columns. .show-extras on the table
   reveals them. We render the cells (display:none, not detached)
   so flipping is instantaneous and the data is already in the DOM
   when the operator opens the panel — no second render pass. */
#client-table th.extra-col,
#client-table td.extra-col {
  display: none;
}
#client-table.show-extras th.extra-col,
#client-table.show-extras td.extra-col {
  display: table-cell;
}

/* The "→" / "←" expand pill in the header. Subtle dashed ring,
   tints navy on hover. Mirrors the popup's streak-toggle styling
   so the two affordances feel like the same family of control. */
.extras-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px dashed rgba(1, 58, 82, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--gray-400);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.extras-toggle:hover {
  color: var(--navy);
  border-color: var(--navy);
  border-style: solid;
  background: rgba(1, 58, 82, 0.04);
}
.extras-toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ============================================================
   Billing modal (billing.js)
   ============================================================ */
.ub-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(1,58,82,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ub-modal {
  background: #fff; border-radius: 10px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}
.ub-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid rgba(1,58,82,0.08);
}
.ub-modal-head h2 {
  margin: 0; font-family: Montserrat, sans-serif; font-weight: 700;
  font-size: 18px; color: var(--navy);
}
.ub-modal-close {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: #8899a6; cursor: pointer; padding: 4px 8px;
}
.ub-modal-close:hover { color: var(--navy); }
.ub-modal-body { padding: 18px 22px; }
.ub-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px; border-top: 1px solid rgba(1,58,82,0.08);
  background: #f8f9fb;
}
.ub-modal-intro { margin: 0 0 14px; font-size: 14px; color: #4b5d6b; line-height: 1.5; }
.ub-interval-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}
.ub-interval-opt {
  border: 1.5px solid rgba(1,58,82,0.15); border-radius: 8px;
  padding: 12px; cursor: pointer; display: block; transition: all 120ms;
}
.ub-interval-opt:has(input:checked) {
  border-color: var(--navy); background: rgba(1,58,82,0.04);
}
.ub-interval-opt input { margin-right: 6px; }
.ub-interval-name { font-weight: 600; color: var(--navy); display: block; }
.ub-interval-price { font-size: 12.5px; color: #4b5d6b; display: block; margin-top: 4px; }
.ub-interval-price em { color: #1EB683; font-style: normal; font-weight: 600; }
.ub-qty-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.ub-qty-label { font-weight: 600; color: var(--navy); font-size: 14px; }
.ub-qty-control { display: flex; align-items: center; gap: 0; }
.ub-qty-btn {
  width: 32px; height: 32px; border: 1px solid rgba(1,58,82,0.15);
  background: #fff; cursor: pointer; font-size: 16px; color: var(--navy);
}
.ub-qty-btn:first-child { border-radius: 6px 0 0 6px; }
.ub-qty-btn:last-child  { border-radius: 0 6px 6px 0; }
.ub-qty-input {
  width: 50px; height: 32px; text-align: center;
  border: 1px solid rgba(1,58,82,0.15); border-left: none; border-right: none;
  font-size: 14px; color: var(--navy); font-weight: 600;
}
.ub-qty-input::-webkit-inner-spin-button,
.ub-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ub-summary {
  background: #f8f9fb; border-radius: 6px; padding: 12px 14px;
  margin-bottom: 16px; display: flex; justify-content: space-between;
  align-items: center;
}
.ub-summary-line { font-size: 13px; color: #4b5d6b; }
.ub-summary-total { font-weight: 700; font-size: 16px; color: var(--navy); font-family: Montserrat, sans-serif; }
.ub-card-row { margin-top: 8px; }
.ub-card-label { font-size: 13px; font-weight: 600; color: var(--navy); display: block; margin-bottom: 6px; }
.ub-card-element {
  border: 1.5px solid rgba(1,58,82,0.15); border-radius: 6px;
  padding: 12px; background: #fff;
}
.ub-card-error { color: #c0392b; font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.ub-btn {
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.ub-btn-secondary { background: #fff; color: #4b5d6b; border-color: rgba(1,58,82,0.15); }
.ub-btn-secondary:hover { background: #f1f4f7; }
.ub-btn-primary { background: var(--navy); color: #fff; }
.ub-btn-primary:hover { background: #022a3d; }
.ub-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Subtle billing card on /team/ */
.team-billing-card {
  background: #fff; border: 1px solid rgba(1,58,82,0.08);
  border-radius: 8px; padding: 18px 20px; margin-top: 24px;
  font-size: 13.5px; color: #4b5d6b;
}
.team-billing-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.team-billing-card-head h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  color: var(--navy); font-family: Montserrat, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.team-billing-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.team-billing-grid div { font-size: 13px; }
.team-billing-grid strong { color: var(--navy); font-weight: 600; }
.team-billing-actions {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.team-billing-actions button {
  font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 500;
  background: #fff; border: 1px solid rgba(1,58,82,0.15);
  color: #4b5d6b; padding: 6px 11px; border-radius: 5px; cursor: pointer;
}
.team-billing-actions button:hover { background: #f1f4f7; color: var(--navy); }
.team-billing-status-trial { color: #d97706; font-weight: 600; }
.team-billing-status-active { color: #1EB683; font-weight: 600; }
.team-billing-status-past_due,
.team-billing-status-unpaid { color: #c0392b; font-weight: 600; }
.team-billing-status-canceled { color: #8899a6; }


/* ==============================================================
   Mobile UX: hamburger drawer, mobile selects, sticky columns,
   follow-ups pill wrap, etc.
   --------------------------------------------------------------
   All wired by /mobile-nav.js. This block is a single
   self-contained mobile-responsiveness layer added 2026-05-05;
   keep it at the bottom of app.css so its overrides win without
   needing !important everywhere upstream.
   ============================================================== */

/* Period-comparison table labels: full label visible on desktop,
   shortened "%" / "FU's" version visible on mobile. Defaults here;
   the @media block below flips them at <= 800px. */
.period-table .period-label-full  { display: inline; }
.period-table .period-label-short { display: none; }


/* ==============================================================
   Danger zone (archived-account terminal actions on /account/)
   --------------------------------------------------------------
   Reveal-gated by JS (admin + archived_at not null). Three actions:
   delete, transfer, merge. Each opens a shared modal with per-action
   form content rendered by the JS in account/index.html.
   ============================================================== */

.panel-card-danger {
  border-left: 3px solid #d93025;
  background: #fff8f8;
}
.panel-card-danger .panel-card-head h2 { color: #b3261e; }

.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 18px;
}
.danger-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  flex-wrap: wrap;
}
.danger-action-text { flex: 1 1 300px; min-width: 0; }
.danger-action h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}
.danger-action p {
  font-size: 12.5px;
  color: var(--gray-500);
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
}

.btn-danger {
  background: #d93025;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-danger:hover:not(:disabled) { background: #b3261e; }
.btn-danger:disabled { background: #e7a8a4; cursor: not-allowed; }

.btn-danger-soft {
  background: #fff;
  color: #b3261e;
  border: 1.5px solid #b3261e;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
.btn-danger-soft:hover:not(:disabled) { background: #b3261e; color: #fff; }
.btn-danger-soft:disabled { opacity: 0.5; cursor: not-allowed; }

/* Danger-zone modal: shared shell, JS swaps body content per action. */
.dz-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 33, 56, 0.55);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dz-modal-backdrop.open { display: flex; }
.dz-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.dz-modal h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
}
.dz-modal p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0 0 14px;
}
.dz-modal-warn {
  background: #fff8f8;
  border-left: 3px solid #d93025;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  color: #6d201d;
  line-height: 1.5;
  margin-bottom: 14px;
}
.dz-modal-warn strong { color: #b3261e; }
.dz-modal label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dz-modal input[type="text"],
.dz-modal input[type="email"],
.dz-modal select {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  margin-bottom: 14px;
  background: #fff;
  color: var(--navy);
}
.dz-modal input:focus, .dz-modal select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(1,58,82,.08);
}
.dz-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.dz-modal-feedback {
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 16px;
}
.dz-modal-feedback.error { color: #b3261e; }
.dz-modal-feedback.ok    { color: #2f7d52; }


/* ==============================================================
   API key reveal modal (Integrations tab on /account/)
   --------------------------------------------------------------
   One-shot display of a freshly generated key. Visual treatment
   reuses .dz-modal-backdrop / .dz-modal; .ak-reveal-* classes
   target the inner content layout (key row + copy button).
   ============================================================== */
.ak-reveal-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ak-reveal-name {
  font-size: 14px;
  color: #15212b;
}
.ak-reveal-key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ak-reveal-key {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid #cad5dd;
  border-radius: 6px;
  background: #f7fafc;
  color: #0f2138;
  letter-spacing: 0;
}
.ak-reveal-copy {
  padding: 0 16px;
  white-space: nowrap;
}
.ak-reveal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Integrations tab: Connect to Zapier section. The how-to list mirrors
   the four-step setup flow and the button is the primary CTA. */
.integrations-howto {
  margin: 12px 0 16px;
  padding-left: 20px;
  font-size: 14px;
  color: #15212b;
  line-height: 1.6;
}
.integrations-howto li {
  margin-bottom: 4px;
}
.btn-zapier-connect {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #ff4a00;
  border: 1px solid #ff4a00;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn-zapier-connect:hover {
  background: #e64200;
}
.btn-zapier-connect:focus-visible {
  outline: 2px solid #0f2138;
  outline-offset: 2px;
}


/* ==============================================================
   Orphan empty-state on /dashboard/
   --------------------------------------------------------------
   Shown when the signed-in user has no organization_members row
   (left their org, was removed, signed up before auto-create-on-
   signup landed). Replaces the filter-bar + accounts table while
   visible. Pending-invite banner above stays as an alternative.
   ============================================================== */
.orphan-empty-state {
  max-width: 720px;
  margin: 60px auto;
  padding: 0 24px;
}
.orphan-empty-state.hidden { display: none; }
.orphan-empty-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15,33,56,0.04);
}
.orphan-empty-card h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
}
.orphan-empty-card p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 20px;
}
.orphan-empty-card .btn-primary {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 6px;
  border: 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.orphan-empty-card .btn-primary:hover:not(:disabled) { background: var(--navy-soft, #1c3550); }
.orphan-empty-card .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }


/* ---- Leave-organization row on /team/ ---- */
.leave-org-row {
  margin: 28px 32px 12px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  justify-content: flex-end;
}

/* ---- 1. Header hamburger button + drawer ---- */
.header-hamburger {
  display: none;
  background: none;
  border: 0;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  align-items: center;
  transition: background .15s, color .15s;
}
.header-hamburger:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.header-hamburger svg { display: block; }

.header-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  max-width: 320px;
  background: #fff;
  z-index: 1100;
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform .25s ease-out;
  padding: 56px 18px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.header-drawer.open { transform: translateX(0); }

.header-drawer-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
}
.header-drawer-close:hover { background: var(--gray-100); color: var(--text); }

.header-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 33, 56, 0.55);
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.header-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

body.header-drawer-open { overflow: hidden; }

.header-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.header-drawer-items > * {
  display: block !important;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  text-decoration: none;
  cursor: pointer;
}
.header-drawer-items > a:hover,
.header-drawer-items > button:hover {
  background: var(--accent-soft, #e9f2fa);
  color: var(--accent, #2d7ab8);
}
.header-drawer-items .header-drawer-email {
  background: transparent !important;
  border: 0 !important;
  color: var(--gray-500) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  padding: 4px 14px 12px !important;
  cursor: default;
}

/* ---- 2. Mobile pill→select dropdowns ---- */
.mobile-pill-select {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 7px 28px 7px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23013A52' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  max-width: 100%;
}

/* ---- 3. Mobile-only layout adjustments (<= 800px) ---- */
@media (max-width: 800px) {
  /* Hide the original header right-cluster; show only the hamburger
     (the drawer takes over). The original cluster items remain in
     the DOM so handlers wired via id (e.g. signout) keep working. */
  .header-right > * { display: none !important; }
  .header-right > .header-hamburger { display: inline-flex !important; }

  /* Pill groups → hide pills, show the JS-injected select. */
  .timeframe-pills { display: none !important; }
  .timeframe-pills + .mobile-pill-select { display: inline-block; }

  .sub-tabs { display: none !important; }
  .sub-tabs + .mobile-pill-select {
    display: block;
    margin: 10px 16px 0;
    width: calc(100% - 32px);
    max-width: 480px;
    padding: 9px 32px 9px 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
  }

  /* Section head: let "+ Add new account" wrap below the title
     instead of overflowing. */
  .section-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .section-head h2 { flex: 1 1 auto; min-width: 0; }
  .btn-add-account {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
  }

  /* Account column sticky on horizontal scroll. The table wrap
     already does overflow-x; we just pin the first column so the
     account name stays visible while metrics columns scroll past. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .client-table th:first-child,
  .client-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 var(--gray-100);
  }
  .client-table thead th:first-child {
    z-index: 3;
    background: var(--surface-1, #fff);
  }
  .client-table tbody tr:hover td:first-child {
    background: var(--gray-50);
  }
  .client-table tbody tr.is-archived td:first-child {
    background: #fafbfc;
  }

  /* Period-comparison table (account.html "Trends by Period"):
     freeze the first column so metric labels stay visible while
     the period columns scroll horizontally. !important on the
     background is required because rate-rows (selector
     `.period-table tr.period-rate-row > th`, specificity 0,2,2)
     and section-rows set their own row-level background that would
     otherwise show through the sticky cell — letting the rate-cell
     chips bleed visibly behind the metric label. */
  .period-table th:first-child,
  .period-table td:first-child,
  .period-table tbody th {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff !important;
    box-shadow: 1px 0 0 rgba(1, 58, 82, 0.06);
    /* Tighten the sticky first column on mobile so the data columns
       have more room. Combined with the .period-label-short toggle
       below, brings the column from ~half the chart down to ~110px.
       padding-right gets a smidge extra so the label doesn't bump up
       against the first data column. */
    padding-left: 8px;
    padding-right: 16px;
    max-width: 130px;
  }
  .period-table thead th:first-child {
    z-index: 4;
  }

  /* Mobile-only short labels in the first column.
     Rendered alongside the full label as a sibling span; CSS hides
     the full and shows the short below 800px. Desktop keeps the
     full labels (the short span is display: none).
     Replacements: "Rate" → "%", "Follow Ups" → "FU's". */
  .period-table .period-label-full  { display: none; }
  .period-table .period-label-short { display: inline; }

  /* Follow-ups toolbar: let pills wrap to a second row instead of
     overflowing. Count chip drops to its own line below the pills. */
  .fu-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .fu-source-pills {
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 100%;
    order: 2;
  }
  .fu-view-toggle  { order: 1; }
  .fu-toolbar-count {
    order: 3;
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* ---- 4. Account-name pencil edit (account/index.html) ---- */
.account-titlebar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.account-name-edit {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--gray-400);
  transition: background .15s, color .15s;
  line-height: 1;
}
.account-name-edit:hover {
  background: var(--gray-50);
  color: var(--navy);
}
.account-name-input {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  padding: 4px 10px;
  outline: none;
  width: 100%;
  max-width: 420px;
}
.account-name-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(1,58,82,.08);
}


/* ==============================================================
   Integrations tab two-column layout
   --------------------------------------------------------------
   Splits the Integrations sub-panel into a left box (Zapier +
   API Keys, wrapped in a .cad-editor) and a right box (HubSpot
   native sync card on its own). Stacks vertically below 1100px.
   ============================================================== */
.integrations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.integrations-grid > .cad-editor {
  margin-top: 0;
  /* Override the global .cad-editor max-width: 720px so the left
     box fills its grid column instead of leaving a gap to the
     right. Mirrors the .cad-grid > .cad-editor override pattern. */
  max-width: none;
}
.integrations-grid > .panel-card {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .integrations-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================================================
   Native HubSpot integration card (Integrations tab)
   --------------------------------------------------------------
   Phase 2 of the integrations roadmap. Lives alongside the Zapier
   card and API Keys card in #panel-integrations. Two visual
   states: disconnected (short blurb + Connect button) and
   connected (status pill, triggers, field mapping editor,
   disconnect button).
   ============================================================== */

.hubspot-status-pill {
  display: inline-block;
  padding: 2px 10px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: default;
}
.hubspot-status-pill-ok      { background: #e8f5ee; color: #107a3e; border-color: #c8e8d4; }
.hubspot-status-pill-err     { background: #fdecec; color: #c01111; border-color: #f3c8c8; }
.hubspot-status-pill-neutral { background: var(--gray-100, #f1f3f5); color: var(--gray-600, #6e7a87); border-color: rgba(0,0,0,.06); }

.hubspot-portal-info {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--gray-600, #6e7a87);
  margin-bottom: 12px;
}
.hubspot-portal-info strong {
  color: var(--navy, #013A52);
  font-weight: 600;
}

.hubspot-feedback {
  min-height: 18px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  margin: 4px 0 12px 0;
}
.hubspot-feedback.ok  { color: #107a3e; }
.hubspot-feedback.err { color: #c01111; }

.hubspot-subsection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(1, 58, 82, 0.06);
}
.hubspot-subsection h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy, #013A52);
  margin: 0 0 6px 0;
}
.hubspot-blurb-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-600, #6e7a87);
}

.hubspot-triggers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.hubspot-trigger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--navy, #013A52);
  cursor: pointer;
}
.hubspot-trigger-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--navy, #013A52);
}
.hubspot-sentiment-select {
  margin-left: 12px;
  padding: 3px 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--navy, #013A52);
  border: 1px solid var(--gray-200, #e1e5e9);
  border-radius: 6px;
  background: #fff;
}
.hubspot-sentiment-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hubspot-mapping-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px 0;
}
.hubspot-mapping-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, auto) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.hubspot-mapping-row select,
.hubspot-mapping-row input[type="text"] {
  width: 100%;
  padding: 6px 10px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: var(--navy, #013A52);
  border: 1px solid var(--gray-200, #e1e5e9);
  border-radius: 6px;
  background: #fff;
}
.hubspot-mapping-row select:focus,
.hubspot-mapping-row input[type="text"]:focus {
  outline: none;
  border-color: var(--navy, #013A52);
  box-shadow: 0 0 0 3px rgba(1,58,82,.08);
}
.hubspot-mapping-val {
  display: block;
}
.hubspot-mapping-val select,
.hubspot-mapping-val input[type="text"] {
  width: 100%;
}

.hubspot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(1, 58, 82, 0.06);
}
.hubspot-actions .btn-row-action-danger {
  margin-left: auto;
}

@media (max-width: 720px) {
  .hubspot-mapping-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "prop  remove"
      "src   src"
      "val   val";
  }
  .hubspot-mapping-prop { grid-area: prop; }
  .hubspot-mapping-src  { grid-area: src; }
  .hubspot-mapping-val  { grid-area: val; }
  .hubspot-mapping-row > .btn-row-action { grid-area: remove; }
  .hubspot-sentiment-select { margin-left: 0; margin-top: 4px; }
}