/* Add Contact modal — paired stylesheet for js/add-contact-modal.js (ISH-574, ISH-575).
 *
 * This file and that one are a pair: every host page that loads the module must
 * load this too.
 *
 * Every rule is scoped under #add-contact-popup-modal so nothing here can leak
 * into the other modals on a host page — see ISH-572, where a component
 * stylesheet's bare selectors restyled all 22 pages.
 *
 * The modal deliberately reuses each host's own `.modal-overlay`, `.modal-card`,
 * `.modal-header`, `.modal-body`, `.modal-footer`, `.edit-input`, `.btn-primary`,
 * `.btn-secondary` and `.autocomplete-item` rules rather than restating them: those
 * are established shared classes defined in all three hosts' <style> blocks, and
 * duplicating them here would fork the visual identity. Only the
 * add-contact-specific geometry lives in this file.
 *
 * ## Layout (ISH-575)
 *
 * The modal is one page, not two steps: `.acm-body` is a two-column grid — the form
 * on the left, a side panel on the right — collapsing to a single column below the
 * 760px breakpoint. Nothing is gated behind picking a company.
 *
 * Every control is 36px tall. The hosts disagree about this — `.edit-input` is 36px
 * on broker.html and sales-pipeline-detail.html and sets no height on contacts.html,
 * while `.sidebar-input` is 38px — and mixing the two in one column misaligns paired
 * fields by 2px, the bug ISH-564 hit in the Add Company modal.
 */

/* `box-sizing: border-box` is load-bearing, not tidying. Every host's `.modal-card`
 * is content-box with `padding: 1.75rem`, so a bare `max-width: 880px` renders a
 * 936px card — the padding lands outside the cap. Measured on the static mock.
 * Border-box makes the number mean what it says. */
#add-contact-popup-modal .acm-card {
  box-sizing: border-box;
  max-width: 880px;
  width: 95%;
}

#add-contact-popup-modal .acm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

#add-contact-popup-modal .acm-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#add-contact-popup-modal .acm-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
}

/* --- The two columns ------------------------------------------------------- */

#add-contact-popup-modal .acm-body {
  padding: 0;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

#add-contact-popup-modal .acm-col-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

#add-contact-popup-modal .acm-col-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  border-left: 1px solid var(--border-light);
  padding-left: 1.5rem;
}

/* Paired short fields — Role/Email, Phone/Address. `minmax(0, 1fr)` rather than
 * `1fr` so a long placeholder cannot push a column past its share. */
#add-contact-popup-modal .acm-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}

#add-contact-popup-modal .acm-side-block {
  min-width: 0;
}

/* Single column on a narrow viewport: the side panel drops below the form, and its
 * dividing rule moves from the left edge to the top, where the stack now needs it. */
@media (max-width: 760px) {
  #add-contact-popup-modal .acm-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  #add-contact-popup-modal .acm-col-side {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
  }

  #add-contact-popup-modal .acm-field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Fields ---------------------------------------------------------------- */

#add-contact-popup-modal .acm-field {
  margin-bottom: 0;
  min-width: 0;
  position: relative;
}

#add-contact-popup-modal .acm-field-label {
  font-size: 0.7rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
}

#add-contact-popup-modal .acm-field-input {
  height: 36px;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  box-sizing: border-box;
}

#add-contact-popup-modal .acm-notes {
  height: 64px;
  font-family: inherit;
  resize: vertical;
}

#add-contact-popup-modal .acm-subheading {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--text);
}

/* --- Autocomplete --------------------------------------------------------- */

#add-contact-popup-modal .acm-autocomplete-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hidden until a query runs; JS flips display to `block`. The pre-extraction copies
 * used z-index 1050 for the company list and 1045 for the contact list — unified
 * here, since the two dropdowns are never open at the same time. */
#add-contact-popup-modal .acm-autocomplete-results {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  max-height: 190px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  box-sizing: border-box;
}

#add-contact-popup-modal .acm-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
}

#add-contact-popup-modal .acm-autocomplete-primary {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

#add-contact-popup-modal .acm-autocomplete-secondary {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

#add-contact-popup-modal .acm-autocomplete-empty {
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

/* --- Selected-company chip ------------------------------------------------- */

/* Swapped in for the search input once a company is picked: JS flips this to `flex`
 * and hides #modal-company-picker.
 *
 * Exactly 36px, matching .acm-field-input, so the column does not reflow when the swap
 * happens. It is a single line for that reason: the first draft stacked a "SELECTED
 * COMPANY" eyebrow above the name and measured 54px against the input's 36px, so
 * picking a company shifted everything below it down by 18px. The eyebrow was
 * redundant anyway — the field's own "Platform Company *" label sits directly above. */
#add-contact-popup-modal .acm-selected-company {
  display: none;
  padding: 0 0.5rem;
  background: rgba(166, 38, 38, 0.05);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 36px;
  box-sizing: border-box;
}

#add-contact-popup-modal .acm-selected-company-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

#add-contact-popup-modal .acm-clear-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--red);
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
}

/* --- Possible matches (ISH-577) --------------------------------------------
 *
 * ⚠️ This block alone is scoped by the **class** `.acm-match-scope`, not by
 * `#add-contact-popup-modal` like every other rule in this file. That is a
 * deliberate exception to the header's id-scoping rule, not an oversight of it.
 *
 * ISH-593 put the same panel in the Add Company modal
 * (`#add-platform-company-modal`, broker.html), which needs it for exactly the
 * reason the panel exists at all: the person you are about to enter as a new
 * company's primary contact is very often already on record. The two
 * alternatives were both worse than an opt-in class. Doubling all 14 selectors
 * by hand leaves two lists to keep in step, and the next consumer makes it
 * three. Copying the block under an `.ac-*` prefix forks the visual identity of
 * the match card — the exact failure the shared-stylesheet convention exists to
 * prevent — and it is a card whose strong/possible distinction carries real
 * meaning, so drift between two copies is drift in what the colours *mean*.
 *
 * A class scope is still an opt-in scope, so this does not reintroduce ISH-572's
 * bare-selector leak: a host gets these rules only by putting
 * `acm-match-scope` on an element, which two modals now do and nothing else
 * does. The markup comes from `AddContactModal.matchPanel.rowHtml()`, so these
 * classes and the HTML carrying them still have exactly one owner.
 *
 * Everything outside this block stays id-scoped — it is genuinely specific to
 * the Add Contact modal and has no second consumer.
 */

.acm-match-scope .acm-matches {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.acm-match-scope .acm-match {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: #fafafa;
}

/* A strong match is a claim ("this is almost certainly the same person"), so it gets
 * the accent stripe. A possible match is a prompt to look, and stays quiet — the panel
 * loses its meaning if everything shouts. */
.acm-match-scope .acm-match-strong {
  border-left: 3px solid var(--red);
  background: rgba(166, 38, 38, 0.04);
}

.acm-match-scope .acm-match-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.acm-match-scope .acm-match-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acm-match-scope .acm-match-tier {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.acm-match-scope .acm-match-strong .acm-match-tier {
  color: var(--red);
}

.acm-match-scope .acm-match-meta {
  font-size: 0.7rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reason is visible text, deliberately not a `title` tooltip: being able to tell
 * at a glance *why* someone is being suggested is the whole value of the panel, and a
 * tooltip hides exactly that behind a hover nobody thinks to try. */
.acm-match-scope .acm-match-why {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.3rem;
}

.acm-match-scope .acm-match-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}

.acm-match-scope .acm-match-link {
  height: 26px;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.acm-match-scope .acm-match-view {
  height: 26px;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Replaces the Link button rather than sitting beside it: there is nothing to do, and
 * a disabled button invites clicking to find out why. */
.acm-match-scope .acm-match-already {
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text-secondary);
}

/* ISH-593: the staged state, used by Add Company only.
 *
 * Add Contact's row action *writes* — clicking Link moves the contact and closes the
 * modal, so a row never has an "I picked this one" state to show. In Add Company the
 * company does not exist yet, so picking a match can only record an intention that the
 * save carries out, and that intention has to be visible or the operator has no way to
 * tell a click landed.
 *
 * Marked on the row rather than by swapping the button's text, so the whole card reads
 * as chosen at a glance in a panel where the rows are otherwise near-identical. The
 * accent is the same red the strong tier uses, at full border weight rather than the
 * left stripe — those two can co-occur (a strong match is the likeliest thing to stage)
 * and must stay distinguishable. */
.acm-match-scope .acm-match.is-staged {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(166, 38, 38, 0.12);
  background: rgba(166, 38, 38, 0.06);
}

.acm-match-scope .acm-match.is-staged .acm-match-staged-note {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

/* --- Currently linked contacts -------------------------------------------- */

#add-contact-popup-modal .acm-linked-list {
  max-height: 180px;
  overflow-y: auto;
}

.acm-match-scope .acm-linked-empty {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

#add-contact-popup-modal .acm-linked-row {
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  border: 1px solid var(--border-light);
  border-radius: 4px;
}

#add-contact-popup-modal .acm-linked-row-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

#add-contact-popup-modal .acm-linked-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#add-contact-popup-modal .acm-linked-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#add-contact-popup-modal .acm-primary-star {
  color: #ffc107;
  font-size: 0.9rem;
  margin-left: 0.25rem;
}

/* --- Footer --------------------------------------------------------------- */

#add-contact-popup-modal .acm-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  border-top: 1px solid var(--border-light);
  padding-top: 1rem;
}

#add-contact-popup-modal .acm-form-cancel,
#add-contact-popup-modal .acm-form-save {
  padding: 0 1rem;
  font-size: 0.8125rem;
  height: 34px;
  font-weight: 600;
}