/* 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; }

/* ---- 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; } }