/* ============================================================
   TradeRail — Customer/CRM Hub styles (PR119)
   ============================================================ */

/* Full-page view container — sibling to #vHome, #vService, etc. */
.vch-view {
  min-height: calc(100vh - 60px);
  background: #f1f5f9;
}

.vch-host {
  position: relative;
  font-family: Barlow, system-ui, -apple-system, sans-serif;
  color: #141310;
  padding: 1rem 1.25rem;
}

.vch-root {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(13, 33, 55, .06);
  padding: 1.25rem;
}

.vch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.vch-header h2 { margin: 0; font-size: 1.4rem; }
.vch-id { font-family: ui-monospace, SFMono-Regular, monospace; color: #5b7894; font-size: .9rem; }

/* ---------- Filters ---------- */
.vch-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.vch-filters select,
.vch-filters input[type="search"] {
  border: 1px solid #c9d4df;
  border-radius: 8px;
  padding: .4rem .6rem;
  font: inherit;
  background: #fff;
}
.vch-filters input[type="search"] { min-width: 200px; flex: 1; }

/* ---------- List ---------- */
.vch-list {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.vch-list th, .vch-list td {
  text-align: left;
  padding: .55rem .55rem;
  border-bottom: 1px solid #eef2f6;
}
.vch-list th {
  background: #f5f8fb;
  color: #355274;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.vch-list tbody tr.vch-row { cursor: pointer; transition: background .12s ease; }
.vch-list tbody tr:hover { background: #f9fbfd; }
.vch-sub { font-size: .8rem; color: #5b7894; }
.vch-empty { color: #5b7894; text-align: center; padding: 1.5rem; }

/* ---------- Inline link-style button (used in footer note) ---------- */
.vch-link {
  background: none;
  border: none;
  color: #0a564a;
  padding: 0 .15rem;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.vch-link:hover { color: #084339; }

/* ---------- Chips ---------- */
.vch-chip {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.vch-chip-lead     { background: #fff4c4; color: #6a5400; }     /* warm yellow */
.vch-chip-prospect { background: #ffd9b3; color: #7a3d00; }     /* orange */
.vch-chip-customer { background: #c5ebe4; color: #0a564a; }     /* teal */
.vch-chip-inactive { background: #e0e6ec; color: #5b7894; }     /* gray */

.vch-type {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vch-type-residential { background: #e8f0ff; color: #1c4ea0; }
.vch-type-commercial  { background: #efe6ff; color: #4f2cae; }

.vch-chip-btn {
  border: 1px solid #c9d4df;
  background: #fff;
  border-radius: 999px;
  padding: .2rem .6rem;
  cursor: pointer;
  margin: 0 .15rem;
  font: inherit;
  font-size: .8rem;
  color: #355274;
}
.vch-chip-btn.on { background: #0a564a; color: #fff; border-color: #0a564a; }
.vch-chip-btn:hover:not(.on) { background: #f5f8fb; }

/* ---------- Buttons ---------- */
.vch-btn {
  border: 1px solid #c9d4df;
  background: #fff;
  border-radius: 8px;
  padding: .45rem .85rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  color: #141310;
}
.vch-btn:hover { background: #f5f8fb; }
.vch-btn-primary { background: #0a564a; color: #fff; border-color: #0a564a; }
.vch-btn-primary:hover { background: #084438; }
.vch-btn-sm { padding: .25rem .55rem; font-size: .82rem; }
.vch-btn-danger { background: #7a1f1a; color: #fff; border-color: #7a1f1a; }

/* ---------- Detail panel ---------- */
.vch-detail .vch-header h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.vch-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid #eef2f6;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.vch-tab {
  border: none;
  background: transparent;
  padding: .5rem .9rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #5b7894;
}
.vch-tab.on { color: #0a564a; border-bottom-color: #0a564a; }
.vch-tab:hover { color: #141310; }

.vch-panel { padding: .5rem 0; }

.vch-profile { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; }
.vch-profile dt { font-weight: 600; color: #355274; }
.vch-profile dd { margin: 0; }
.vch-status-flips { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed #eef2f6; }

/* ---------- Contacts ---------- */
.vch-contacts-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.vch-contact { padding: .5rem .75rem; border: 1px solid #eef2f6; border-radius: 8px; margin-bottom: .4rem; }
.vch-role { background: #e8f0ff; color: #1c4ea0; padding: .05rem .4rem; border-radius: 4px; font-size: .75rem; margin-left: .35rem; }
.vch-history-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: #5b7894;
  padding: .35rem 0;
}
.vch-contact-old { color: #5b7894; padding: .25rem 0; }

/* ---------- Comms timeline ---------- */
.vch-comms-toolbar { margin-bottom: .75rem; }
.vch-comms-timeline { list-style: none; padding: 0; margin: 0; }
.vch-comm {
  display: grid;
  grid-template-columns: 28px 18px 1fr;
  gap: .5rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid #f1f4f7;
  align-items: flex-start;
}
.vch-comm-ic { font-size: 1.1rem; }
.vch-comm-arrow { color: #5b7894; font-weight: 600; }
.vch-comm-body { display: flex; flex-direction: column; }
.vch-comm-meta { font-size: .78rem; color: #5b7894; margin-top: .15rem; }
.vch-comm-lily .vch-comm-ic { color: #d49500; }

/* ---------- Jobs ---------- */
.vch-jobs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vch-jobs th, .vch-jobs td { padding: .45rem .55rem; border-bottom: 1px solid #eef2f6; text-align: left; }
.vch-jobs th { background: #f5f8fb; font-size: .8rem; }

/* ---------- Notes ---------- */
.vch-notes {
  width: 100%;
  min-height: 120px;
  border: 1px solid #c9d4df;
  border-radius: 8px;
  padding: .55rem;
  font: inherit;
}

/* ---------- Onboarding / forms ---------- */
.vch-form { display: flex; flex-direction: column; gap: .55rem; }
.vch-form h3 { margin: 0 0 .5rem; }
/* PR129 — scope to .vch-form so the rule does not collide with
   <tr class="vch-row"> in the list table (which would otherwise
   collapse all <td> cells into a single column). */
.vch-form .vch-row { display: flex; flex-direction: column; gap: .25rem; }
.vch-form .vch-row label { font-size: .82rem; color: #355274; font-weight: 600; }
.vch-form .vch-row input, .vch-form .vch-row select, .vch-form .vch-row textarea {
  border: 1px solid #c9d4df;
  border-radius: 8px;
  padding: .4rem .55rem;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}
.vch-form .vch-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.vch-form .vch-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .55rem; }
.vch-form .vch-row-2 label, .vch-form .vch-row-3 label { display: block; }

.vch-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

.vch-footer-note { font-size: .8rem; color: #5b7894; margin-top: 1rem; text-align: right; font-style: italic; }

/* ---------- Modal overlay ---------- */
.vch-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 55, .55);
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.vch-modal-card {
  background: #fff;
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}

/* ---------- Lily intake autocomplete styling ---------- */
.vch-lily-suggestions {
  border: 1px solid #c9d4df;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fff;
  max-height: 230px;
  overflow-y: auto;
  margin-top: -2px;
}
.vch-lily-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid #eef2f6;
  padding: .45rem .6rem;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.vch-lily-suggestion:hover { background: #f5f8fb; }
.vch-lily-suggestion strong { color: #0a564a; }
.vch-lily-suggestion-meta { color: #5b7894; font-size: .78rem; margin-left: .35rem; }
.vch-lily-actions { display: flex; gap: .4rem; padding: .35rem .25rem; flex-wrap: wrap; }
.vch-lily-actions .vch-btn { font-size: .82rem; padding: .25rem .55rem; }

/* ============================================================
   PR128 — Customer typeahead component
   Reusable live-search picker used in the Customer Hub list
   header, the empty-state hero, and (PR129+) anywhere else in
   the portal that needs a customer picker.
   ============================================================ */
.vch-typeahead {
  position: relative;
  display: inline-block;
  min-width: 240px;
  flex: 1;
}
.vch-typeahead-input {
  width: 100%;
  border: 1px solid #c9d4df;
  border-radius: 8px;
  padding: .4rem .6rem;
  font: inherit;
  background: #fff;
  color: #141310;
}
.vch-typeahead-input:focus {
  outline: 2px solid #2bb29a;
  outline-offset: 1px;
  border-color: #2bb29a;
}
.vch-typeahead-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #c9d4df;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(13, 33, 55, .12);
  max-height: 320px;
  overflow-y: auto;
}
.vch-typeahead-dropdown[hidden] { display: none; }
.vch-typeahead-row {
  padding: .55rem .65rem;
  border-bottom: 1px solid #eef2f6;
  cursor: pointer;
  font-size: .92rem;
}
.vch-typeahead-row:last-child { border-bottom: none; }
.vch-typeahead-row:hover,
.vch-typeahead-row.is-active {
  background: #ecfaf7;
}
.vch-typeahead-row-name {
  color: #141310;
  font-weight: 600;
}
.vch-typeahead-row-sub {
  color: #5b7894;
  font-size: .82rem;
  margin-top: 2px;
}
.vch-typeahead-match {
  font-size: .7rem;
  color: #5b7894;
  font-weight: 400;
  font-style: italic;
  margin-left: .35rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.vch-typeahead-create {
  background: #f4faff;
}
.vch-typeahead-create .vch-typeahead-row-name {
  color: #0a564a;
}
.vch-typeahead-create.is-active,
.vch-typeahead-create:hover {
  background: #d6f1ea;
}
.vch-filter-typeahead {
  flex: 1;
  min-width: 220px;
  display: flex;
}

/* Empty-state hero variant — larger, centered. */
.vch-typeahead-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 2.25rem 1rem;
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}
.vch-typeahead-empty-state h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #141310;
  font-weight: 600;
}
.vch-typeahead-empty-state p {
  margin: 0;
  color: #5b7894;
  font-size: .95rem;
}
.vch-typeahead-empty-state .vch-typeahead {
  width: 100%;
  max-width: 420px;
}
.vch-typeahead-empty-state .vch-typeahead-input {
  padding: .65rem .8rem;
  font-size: 1rem;
}

/* ============================================================
   PR129 — Cohesion pass: dark teal hero strip + subnav row.
   Mirrors .svcw-hero / .svcw-subnav in service_center.css so the
   Customer Hub reads as a peer hub alongside Service Center,
   Bid Tracker, and Portal Partners.
   ============================================================ */
.vch-hero {
  background: linear-gradient(135deg, #141310, #D95A00);
  color: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  box-shadow: 0 12px 30px rgba(13, 33, 55, .18);
}
.vch-hero-ic {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .08);
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vch-hero-tx { flex: 1; min-width: 0; }
.vch-hero-tx h2 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 26px;
  margin: 0 0 4px;
  letter-spacing: .3px;
}
.vch-hero-tx p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.55;
}

.vch-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
  padding: 6px;
  border: 1px solid #c9d4df;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(13, 33, 55, .04);
}
.vch-subnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #355274;
  font-family: 'Barlow', sans-serif;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: all .15s;
}
.vch-subnav-tab:hover { background: #eef9f7; color: #0a564a; }
.vch-subnav-tab.on { background: #2bb29a; color: #fff; box-shadow: 0 4px 10px rgba(255,107,0,.28); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .vch-list { font-size: .85rem; }
  .vch-list th:nth-child(5), .vch-list td:nth-child(5),
  .vch-list th:nth-child(7), .vch-list td:nth-child(7) { display: none; }
  .vch-profile { grid-template-columns: 1fr; }
  .vch-form .vch-row-2, .vch-form .vch-row-3 { grid-template-columns: 1fr; }
  .vch-hero { flex-direction: column; align-items: flex-start; padding: 1.1rem; }
  .vch-hero-tx h2 { font-size: 22px; }
  .vch-subnav { padding: 5px; gap: 4px; }
}