/* Lead page: document folders, resizable cards, click-to-edit contact info,
   and screenshots inside notes. Everything here is scoped to the lead page or
   to classes that only exist there, so nothing leaks onto another screen. */

/* ---- Documents ---- */

.doc-row {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.doc-row:last-child { border-bottom: none; }
.dfx .doc-row { cursor: grab; }
.dfx .doc-row.dragging { opacity: .4; }
.doc-row svg { width: 15px; height: 15px; }

.dfx-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 8px; border-bottom: 1px solid var(--border);
}
.dfx-bar .muted { flex: 1; min-width: 0; }
.dfx-root { padding-top: 4px; min-height: 40px; border-radius: 8px; }
.dfx-root.df-over { outline: 2px dashed var(--blue); outline-offset: 3px; background: #f0f6ff; }

.dfo { border-radius: 8px; }
.dfo.dragging { opacity: .45; }
.dfo.df-over > .dfo-head { background: #dbeafe; box-shadow: inset 0 0 0 1px var(--blue); }
.dfo-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 7px; cursor: grab;
}
.dfo-head:hover { background: var(--bg); }
.dfo-head .dfo-ico { color: var(--amber); display: inline-flex; }
.dfo-head .dfo-ico svg { width: 15px; height: 15px; }
.dfo-name { font-weight: 600; }
.dfo-head .icon-btn.tiny { opacity: 0; }
.dfo-head:hover .icon-btn.tiny { opacity: 1; }
.dfo-head .dfo-tw { opacity: 1; }
.dfo-kids { margin-left: 14px; padding-left: 8px; border-left: 1px solid var(--border); }
.dfo-empty { padding: 6px 2px; }

/* ---- Resizing a card ---- */
/* The grip sits on the bottom edge. It is deliberately not inside the card
   body: dragging the body's own scrollbar and dragging the size are different
   gestures and must not share a pixel. */
.card-resize {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 8px;
  cursor: ns-resize; border-radius: 0 0 var(--radius) var(--radius);
}
.card-resize::after {
  content: ''; position: absolute; left: 50%; bottom: 3px;
  width: 34px; height: 3px; margin-left: -17px; border-radius: 2px;
  background: var(--border); opacity: 0; transition: opacity .12s;
}
.pcard:hover .card-resize::after { opacity: 1; }
.card-resize:hover::after { opacity: 1; background: var(--blue); }

.pcol[data-col="left"] { position: relative; }
.col-resize {
  position: absolute; top: 0; bottom: 0; right: -10px; width: 10px;
  cursor: col-resize; z-index: 2;
}
.col-resize::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px;
  background: var(--blue); opacity: 0; transition: opacity .12s;
}
.col-resize:hover::after { opacity: .5; }
@media (max-width: 1000px) { .col-resize { display: none; } }

/* ---- Click to edit ---- */

.ied { border-radius: 5px; cursor: text; padding: 0 2px; margin: 0 -2px; }
.ied:hover { background: #eef2ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
.ied[data-iedtype="user"], .ied[data-iedtype="select"], .ied[data-iedtype="checkbox"] { cursor: pointer; }
.ied .tag { cursor: pointer; }
.ied-input {
  width: 100%; min-width: 120px; padding: 3px 7px;
  border: 1px solid var(--blue); border-radius: 6px; background: #fff;
}
textarea.ied-input { min-height: 60px; resize: vertical; }

/* The number itself is now the edit control, so calling and mailing move to
   their own icon. Tap-to-call on a phone was worth keeping. */
.val-link { color: var(--muted); display: inline-flex; }
.val-link:hover { color: var(--blue); }
.val-link svg { width: 13px; height: 13px; }

.val-grip { color: #cbd5e1; cursor: grab; display: inline-flex; opacity: 0; }
.multi-row:hover .val-grip { opacity: 1; }
.val-grip svg { width: 13px; height: 13px; }
.multi-row[draggable="true"].dragging { opacity: .45; }
.multi-row.val-over { box-shadow: 0 -2px 0 0 var(--blue); }

/* A checked number says when, not just what. The tooltip that used to carry
   the date was invisible, which made a stale verdict look like a fresh one. */
.num-checked { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---- A phone number on its own line ----

   styles.css sets `.multi-row { display: flex; align-items: center }` and
   `.person-layout .kv .v { overflow-wrap: anywhere }`. The second is right: a
   long email address has to be allowed to break rather than push the column
   open. But `overflow-wrap: anywhere` also sets the min-content width of every
   child to one character, so once the row held a grip, a Bad tick, the number,
   a dial link, a label, a carrier badge and a "checked 3 weeks ago" note, the
   flex algorithm had permission to shrink each of them to a single character
   and take the number down with it. That is the one-digit-per-row bug, and it
   is a min-width problem, not a width problem: widening the column only moves
   it to the next size down, and the column is resizable.

   So the row is two lines now. `min-width: 0` lets the line shrink without
   overflowing, `overflow-wrap: normal` on the number itself takes back the
   permission to break between digits, and everything that is a footnote about
   the number wraps freely underneath it. */
.person-layout .multi-row { display: block; min-width: 0; padding: 3px 0 5px; }
.person-layout .multi-row .mr-line {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  /* At the narrowest the column can be dragged to, the dial link and the Bad
     tick drop to a second line rather than squeezing the number. Losing the
     number is the failure this whole section is about; losing the alignment of
     a tick is not. */
  flex-wrap: wrap;
}
.person-layout .multi-row .mr-fill { flex: 1 1 auto; min-width: 0; }
.person-layout .multi-row .mr-value {
  /* An email address is allowed to break inside itself: it is long, and the
     alternative is a column that will not narrow. */
  min-width: 0; overflow-wrap: anywhere;
}
/* A phone number is one atom. `flex: none` is the half that matters as much as
   `nowrap`: without it the flex algorithm still shrinks the box to a few pixels
   and the digits paint straight over the dial icon next to them. */
.person-layout [data-valgroup="phones"] .mr-value {
  flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
}
.person-layout .multi-row .mr-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 1px 0 0 19px; font-size: 11.5px; color: var(--muted); min-width: 0;
}
.person-layout .multi-row .mr-meta:empty { display: none; }
.num-seen { white-space: nowrap; }

/* The tick and its word travel together, and `.field input { width: 100% }`
   from styles.css would otherwise make the box as wide as the card. */
.badbox input[type="checkbox"] { width: 13px; height: 13px; padding: 0; flex: none; }
.badbox { white-space: nowrap; }

/* A bad number is struck through by styles.css, which selects every span in
   the row. Now that the label, the carrier badge and the reason live in the
   row rather than in a sibling, striking them too makes the reason it was
   marked bad the hardest thing on the card to read. */
.person-layout .multi-row.num-bad .mr-meta span:not(.badbox) {
  text-decoration: none; opacity: 1;
}

/* ---- Choosing the number or address a message goes out on ---- */

.comp-sender {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; max-width: 100%;
}
.comp-sender select { min-width: 0; max-width: 230px; }
.comp-sender > .muted { flex: none; }

/* ---- Screenshots in notes ---- */

.note-shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.note-shot { position: relative; width: 84px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.note-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-shot-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 1;
  border: none; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff; font-size: 14px;
}
#comp-body.dropping { outline: 2px dashed var(--blue); outline-offset: -3px; }

/* The timeline item keeps its own border, so the wrapper takes it over when
   an entry carries images: otherwise the rule cuts between the note and its
   screenshot. */
.tl-entry { border-bottom: 1px solid var(--border); }
.tl-entry:last-child { border-bottom: none; }
.tl-entry > .tl-item { border-bottom: none; }
.tl-shots { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 12px 46px; }
.tl-shots img {
  max-width: 220px; max-height: 170px; border-radius: 8px;
  border: 1px solid var(--border); display: block;
}
@media (max-width: 700px) { .tl-shots { padding-left: 0; } }

/* ---- Selecting, copying and editing a note on the timeline ----

   The cursor is the promise: an I-beam over the text says a press and drag will
   select it, which it now does (see bindCardDragging for the half of that which
   is not CSS). */
.person-layout .tl-entry .text,
.person-layout .tl-entry .subj { cursor: text; }
.person-layout .tl-entry .tl-item { border-radius: 7px; }
.person-layout .tl-entry .tl-item[data-acttype="note"]:hover { background: #f8fafc; }

.tl-edited {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: #f1f5f9; color: var(--muted);
  border-radius: 5px; padding: 1px 6px; cursor: help;
}

textarea.note-edit {
  width: 100%; min-height: 84px; resize: vertical;
  border: 1px solid var(--blue); border-radius: 8px; padding: 8px 10px;
  font: inherit; outline: none; background: #fff;
}
.note-edit-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px;
}
.note-edit-row .muted { min-width: 0; }

/* ---- Dragging a Contact info row ---- */

/* The grip hangs into the card's own padding rather than taking a column of its
   own, so switching a row from fixed to draggable does not shift the labels. */
.person-layout .ci-row { display: flex; align-items: flex-start; min-width: 0; }
.person-layout .ci-row > .ci-body { flex: 1; min-width: 0; }
.ci-grip {
  flex: none; display: inline-flex; margin-left: -14px; padding-top: 9px;
  color: #cbd5e1; cursor: grab; opacity: 0; transition: opacity .12s;
}
.ci-grip:active { cursor: grabbing; }
.person-layout .ci-row:hover .ci-grip { opacity: 1; }
.ci-grip svg { width: 12px; height: 12px; }
.person-layout .ci-row.dragging { opacity: .45; }
.person-layout .ci-row.ci-over { box-shadow: 0 -2px 0 0 var(--blue); }
.person-layout .ci-row.ci-over-after { box-shadow: 0 2px 0 0 var(--blue); }

/* ---- Switch to inbox, on the composer's tab strip ----

   styles.css styles every button in `.composer .tabs` as a tab at (0,2,1). A
   button that is not a tab has to outrank that, which three classes do. */
.composer .tabs .comp-tabfill { flex: 1; }
.composer .tabs .comp-inbox {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  margin: 4px 8px 4px 0; padding: 5px 11px;
  border: 1px solid var(--border); border-bottom: 1px solid var(--border);
  border-radius: 999px; background: #fff;
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.composer .tabs .comp-inbox:hover { color: var(--blue); border-color: var(--blue); }
.composer .tabs .comp-inbox svg { width: 14px; height: 14px; }

/* ---- Saving a layout as a default for some leads ---- */

.lr-tag {
  margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: #e0e7ff; color: #4338ca;
  border-radius: 5px; padding: 1px 5px;
}
.lr-pick { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.lr-opt {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
}
.lr-opt:hover { border-color: var(--blue); }
.lr-opt input[type="radio"] { width: 14px; height: 14px; margin: 3px 0 0; padding: 0; flex: none; }
.lr-opt > span { flex: 1; min-width: 0; }
.lr-opt select { margin-top: 5px; max-width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; }

.lr-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
}
.lr-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.lr-row:last-child { border-bottom: none; }
.lr-row.on { background: #eff6ff; }
.lr-row .spacer { flex: 1; }
.lr-row .lr-kind {
  flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border-radius: 5px; padding: 2px 6px;
}
.lr-row .lr-what { min-width: 0; overflow-wrap: anywhere; }
.lr-row .icon-btn.tiny { padding: 3px; }
.lr-row .icon-btn.tiny svg { width: 13px; height: 13px; }
.lr-row .icon-btn.tiny[disabled] { opacity: .3; cursor: default; }
.lr-list .empty { padding: 14px; }