:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-2: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-2: #0ea5e9;
  --ok: #22c55e;
  --err: #ef4444;
  --border: #334155;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
}
header .sub { color: var(--muted); margin: 0 0 1.5rem; }
.arrow { color: var(--accent); }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.page-header .top-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.page-header .top-nav .btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

/* My-account chip in the top-right */
.account-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  cursor: pointer; user-select: none;
  font-size: 0.85rem;
  transition: border-color 0.1s ease;
}
.account-chip:hover { border-color: var(--accent); }
.account-chip .initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent-2); color: #001018;
  border-radius: 999px; font-weight: 700;
  font-size: 0.78rem;
}
.account-chip .name { color: var(--text); }
.account-chip .caret { color: var(--muted); font-size: 0.7rem; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem);
  min-width: 220px; padding: 0.5rem;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  z-index: 50;
  display: none;
}
.account-menu.open { display: block; }
.account-menu .info {
  padding: 0.4rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.account-menu .info .full { font-weight: 600; color: var(--text); }
.account-menu .info .email { color: var(--muted); font-size: 0.78rem; }
.account-menu .info .role-pill {
  display: inline-block; margin-top: 0.25rem;
  padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(56,189,248,0.15); color: var(--accent);
  border: 1px solid var(--accent);
}
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left;
  padding: 0.45rem 0.6rem; border-radius: 6px;
  color: var(--text); font-size: 0.88rem;
  background: transparent; border: 0; cursor: pointer;
  text-decoration: none;
}
.account-menu a:hover, .account-menu button:hover {
  background: var(--panel-2);
}
.account-menu .danger { color: #fecaca; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

h2 { margin-top: 0; }
h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; color: var(--accent); }

.hidden { display: none; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.row.three {
  grid-template-columns: 110px 1fr 1fr;
}

label {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

input[type="text"], textarea {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  margin-top: 0.25rem;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  margin: 1rem 0;
  transition: all 0.15s ease;
}
.dropzone.drag {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.06);
}
.dropzone p { margin: 0.25rem 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.btn {
  display: inline-block;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #475569; }
.btn.primary {
  background: var(--accent-2);
  border-color: var(--accent);
  color: #001018;
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.file-label { margin-top: 0.75rem; color: var(--accent); font-weight: 500; }

.summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  background: var(--panel-2);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }

.subjects {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  max-width: 90%;
}
.toast.err { border-color: var(--err); color: #fecaca; }
.toast.ok  { border-color: var(--ok);  color: #bbf7d0; }

#done_body a {
  color: var(--accent);
  word-break: break-all;
}

.target-profile {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  display: grid;
  gap: 0.85rem;
}
.target-profile h4 {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.target-profile .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.target-profile .chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
}
.target-profile .copy-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-size: 0.78rem;
  margin-left: 0.5rem;
}
.target-profile .copy-btn:hover { background: var(--panel); }
.target-profile .notes {
  line-height: 1.5;
  color: var(--text);
}

.sanitize-note {
  margin: -0.25rem 0 0.5rem;
  padding: 0.4rem 0.65rem;
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid #fbbf24;
  border-radius: 4px;
}

.co-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.co-table thead th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.co-table tbody td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.co-table tbody tr:last-child td { border-bottom: none; }
.co-table .co-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.co-table .co-name a { color: var(--accent); text-decoration: none; }
.co-table .co-name a:hover { text-decoration: underline; }
.co-table .co-industry { color: var(--accent); white-space: nowrap; }
.co-table .co-context { color: var(--muted); }
.co-table .row-num {
  color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right; padding-right: 0.4rem; font-size: 0.85rem;
}
.co-table .title-cell {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
}
.co-table .social-cell { white-space: nowrap; }
.co-table .social-cell a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin: 0 0.1rem; border-radius: 5px;
  background: var(--panel-2); color: var(--accent);
  text-decoration: none; font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--border);
}
.co-table .social-cell a:hover {
  background: var(--accent-2); color: #001018; border-color: var(--accent);
}

/* Quick-lookup icon row next to company names — Google, Glassdoor, News */
.lookup-icons {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-left: 0.4rem; vertical-align: middle;
}
.lookup-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.lookup-icons a:hover {
  background: var(--panel);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lookup-icons img {
  width: 14px; height: 14px;
  display: block;
  background: white;
  border-radius: 2px;
}
.lookup-icons .news-icon {
  font-size: 0.78rem; line-height: 1;
}
.co-table .avatar {
  display: inline-block; vertical-align: middle;
  width: 26px; height: 26px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--border);
  margin-right: 0.3rem;
}
.co-table .avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 700; font-size: 0.7rem;
}
.co-table .logo {
  width: 20px; height: 20px;
  border-radius: 4px;
  background: white; padding: 1px;
  object-fit: contain;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 0.3rem;
}
.co-table .name-with-avatar { white-space: nowrap; }

.jobs-results {
  margin-top: 0.5rem;
  padding: 0.5rem 0 0 0;
}
.jobs-results table { margin-top: 0.5rem; }
.jobs-results a { color: var(--accent); }

.industry-picker {
  margin-top: 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.industry-controls {
  display: flex; gap: 0.5rem; margin-bottom: 0.6rem;
}
.industry-controls .btn.small {
  padding: 0.25rem 0.6rem; font-size: 0.78rem;
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.25rem 0.75rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.industry-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--text);
  cursor: pointer;
  padding: 0.15rem 0;
}
.industry-item input { margin: 0; }
.industry-item:hover { color: var(--accent); }
.industry-item.is-suggested { color: var(--accent); font-weight: 500; }
.industry-group-header {
  margin: 0 0 0.4rem; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}

.search-row {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.75rem 0;
}
.search-row label {
  display: flex; flex-direction: column;
  color: var(--muted); font-size: 0.85rem;
  flex: 0 1 220px;
}
.search-row label.grow { flex: 1 1 320px; }
.search-row .search-input {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.45rem 0.65rem; font-size: 0.9rem;
  margin-top: 0.25rem;
}
.search-row .checkbox-inline {
  flex-direction: row; align-items: center; gap: 0.4rem;
  flex: 0 0 auto; padding-top: 1.2rem;
  color: var(--text); font-size: 0.9rem;
}
.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.3rem 0.6rem;
  margin-top: 0.3rem;
  background: var(--panel-2);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.size-grid label {
  flex-direction: row !important;
  align-items: center; gap: 0.35rem;
  color: var(--text); font-size: 0.85rem;
  flex: 0 0 auto !important; margin: 0 !important;
}
.size-grid input { margin: 0; }

.clickable-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.1s ease;
  font-family: inherit;
}
.clickable-chip:hover {
  background: var(--panel-2);
  border-color: var(--accent);
}
/* Default-off chips look more muted when inactive so users see they're
 * "opt-in" categories like Staffing, Non-Profit, Government. */
.clickable-chip.default-off:not(.active) {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
  font-style: italic;
  opacity: 0.7;
}
.clickable-chip.default-off:not(.active):hover {
  opacity: 1;
  border-style: solid;
}
/* Active chip styling — matches the .btn.primary used by
 * "Open Smartlead campaigns" / "Push to Smartlead" / "Find hiring managers".
 * Deeper blue bg, sky-blue border, dark navy text. */
.clickable-chip.active,
button.clickable-chip.active {
  background: var(--accent-2) !important;
  background-color: var(--accent-2) !important;
  border: 1px solid var(--accent) !important;
  color: #001018 !important;
  font-weight: 600;
}
button.clickable-chip.active:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
}
.chip-row.clickable-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ================== Mobile responsive (< 768px) ================== */
@media (max-width: 768px) {
  .wrap {
    padding: 1rem 0.75rem 3rem;
  }
  header h1, .page-header h1 {
    font-size: 1.35rem;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .page-header .top-nav {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .page-header .top-nav .btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }
  /* Global search becomes full-width on mobile */
  .global-search { flex: 1 1 100%; margin-right: 0 !important; }
  .global-search input { width: 100% !important; }
  .global-search #global_search_results {
    width: 100% !important; right: 0 !important; left: 0 !important;
  }
  /* Account chip shows just initials on mobile to save room */
  .account-chip .name { display: none; }

  /* Card padding tightens up */
  .card { padding: 0.85rem 0.85rem; margin-bottom: 0.85rem; }

  /* Tables — let them scroll horizontally rather than overflow */
  table { display: block; overflow-x: auto; max-width: 100%; }
  thead, tbody { display: table; width: 100%; }
  /* Larger touch targets on mobile */
  .btn, button, input[type="text"], input[type="email"], input[type="password"], select {
    min-height: 38px;
  }

  /* Toolbars stack */
  .dir-toolbar, .co-toolbar, .search-row, .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .dir-toolbar input, .dir-toolbar select,
  .co-toolbar input, .co-toolbar select {
    width: 100%;
  }
  .dir-toolbar input.search { flex: 1 1 100% !important; }

  /* CRM grid collapses to one column */
  .crm-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .crm-row { display: block; margin-bottom: 0.5rem; }
  .crm-row .crm-label { display: block; font-size: 0.78rem; }

  /* Snapshot header shrinks logo, stacks meta */
  .snap-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .snap-meta {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modals get more breathing room */
  .modal { width: 96% !important; padding: 1rem !important; }

  /* MPC drag-and-drop area */
  .drop-zone { padding: 1.5rem 1rem !important; font-size: 0.95rem; }
}

/* Smaller phones */
@media (max-width: 420px) {
  .page-header .top-nav .btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
  .snap-meta { grid-template-columns: 1fr !important; }
  h1 { font-size: 1.2rem !important; }
}


/* APOLLO_VERIFIED_UI_v1: give the contacts results table breathing room.
   Phase 6B share page also opts into the same widening so the
   sanitized candidate brief uses the full available canvas on large
   monitors instead of staying boxed at 920px. */
@media (min-width: 1280px) {
  body .wrap,
  body .share-wrap { max-width: min(1600px, 95vw) !important; }
}
.contacts-results { overflow-x: auto; }
.contacts-results table { min-width: 100%; font-size: 0.85rem; }
.contacts-results th, .contacts-results td { white-space: nowrap; padding: 0.4rem 0.55rem; }
.contacts-results td:nth-child(2),  /* Company */
.contacts-results td:nth-child(5),  /* Title */
.contacts-results td:nth-child(11) { /* Location */
  white-space: normal;
  max-width: 220px;
}
.apollo-verified-banner {
  margin: 0.6rem 0 0.4rem;
  padding: 0.5rem 0.85rem;
  background: linear-gradient(135deg, #1f5a3a, #2c7a4e);
  color: #fff;
  border-radius: 6px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.apollo-verified-banner::before {
  content: "\2713";
  font-weight: bold;
  font-size: 1.05rem;
}