/* ---- Hover notes ---- */
/* The bubble a "?" opens. Appended to <body> and positioned in script, because
   these sit inside modals and scrolling panels where an absolutely positioned
   child gets clipped by the first ancestor with overflow set. */
.tip-pop {
  position: fixed;
  z-index: 10000;
  max-width: 300px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .3);
  pointer-events: none;
}

/* ---- Call summaries ---- */
.cs-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.cs-transcript {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  max-height: 60vh;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
}


/* ---- Weekly seller update ---- */
.sr-floors { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.sr-floor { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sr-floor span { flex: 1; color: var(--muted); }
.sr-floor input { width: 78px; }

/* ---- Listing activity extras ---- */
.la-uniq { display: flex; align-items: baseline; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border); }
.la-uniq b { font-size: 22px; }
.la-uniq span { color: var(--muted); font-size: 13px; }
.la-perhour { margin-top: 12px; }
.la-perhour > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.la-perhour b { font-size: 26px; }
.la-perhour span { color: var(--muted); font-size: 13px; }

/* ---- Calls view ---- */
.call-list { display: flex; flex-direction: column; gap: 2px; }
.call-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px;
  border-bottom: 1px solid var(--border); }
.call-row:hover { background: var(--bg); }
.call-dir { display: inline-flex; width: 24px; height: 24px; border-radius: 50%;
  align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.call-dir svg { width: 13px; height: 13px; }
.call-dir.in { background: #dcfce7; color: #166534; }
.call-dir.out { background: #dbeafe; color: #1d4ed8; }
.call-who { width: 190px; flex: none; min-width: 0; }
.call-what { flex: 1; min-width: 0; }
.call-head { font-weight: 600; font-size: 13px; }
.call-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.call-acts audio { height: 30px; max-width: 200px; }

/* ---- Deadlines that can be typed over ------------------------------------- */
/* The date on the Deadlines tab is the deal's own field, edited in place. It
   is sized to the text so a table of them still reads as a column of dates
   rather than a column of form controls. */
.dl-date {
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: inherit; font: inherit; width: auto; max-width: 150px;
}
.dl-date:focus { border-color: var(--accent); outline: none; }
.dl-mute {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap; margin-right: 8px;
}
.dl-mute input[type="checkbox"] { width: 13px; height: 13px; flex: none; }

/* ---- Lead page: column count and the jump ribbon -------------------------- */
/* Two columns is what this page has always been and stays the default. One is
   for a narrow screen or somebody who wants to read straight down; three splits
   the wide right-hand column in two, which is where the roomy cards live. */
.person-layout[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.person-layout[data-cols="3"] { grid-template-columns: 300px minmax(0, 1fr); }
.person-layout[data-cols="3"] > .pcol[data-col="right"] {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
/* Below the width where two columns already collapse to one, a three-column
   split is nonsense, so it folds back with everything else. */
@media (max-width: 1200px) {
  .person-layout[data-cols="3"] > .pcol[data-col="right"] { grid-template-columns: minmax(0, 1fr); }
}
/* And the OUTER split has to fold too. The rule above only unstacks the right
   half; `[data-cols="3"]` still asked for `300px 1fr` at every width, and an
   attribute selector outranks the plain `.person-layout` inside the 1000px
   media query - so a phone asked for three columns got a 300px sidebar and a
   sliver beside it. Now three behaves like two below that width. */
@media (max-width: 1000px) {
  .person-layout[data-cols="3"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- One column: the cards fold ----------------------------------------- */
/*
 * Why this exists: below 1000px the two-column layout already collapses to
 * one, so picking 1 produced a layout identical to 2 and the button looked
 * broken. It was not doing nothing - there was nothing left for it to do.
 * One column now means a page of headings you can open one at a time, which
 * is what makes it worth having on a phone.
 *
 * Scoped to one column deliberately. Folding a card in a two or three column
 * grid would leave a ragged hole beside its neighbour.
 */
.person-layout[data-cols="1"] .pcard[data-folded="1"] > *:not(.card-head) { display: none; }
.person-layout[data-cols="1"] .pcard[data-folded="1"] { padding-bottom: 0; }

/* The chevron points down when the card is open and right when it is shut,
   which is the direction people expect from a disclosure triangle. */
.pcard-fold svg { transition: transform .12s ease; }
.pcard[data-folded="1"] .pcard-fold svg { transform: rotate(-90deg); }

/* The five cards that build their own markup have no header to hang the
   control on, so one is made for them. Slim, and visually part of the card
   rather than a second title bar above it. */
.pcard-madehead {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
}
.pcard-madehead h3 { font-size: 14px; }

/* A card that made its own header is not a `.card` and has no chrome, so
   folded it was a bare heading on the page background next to a tidy white
   box. It borrows the same chrome while it is foldable. */
.person-layout[data-cols="1"] .pcard-wrapped {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Open, the made header needs the rule under it that a real card-head has. */
.person-layout[data-cols="1"] .pcard-wrapped:not([data-folded="1"]) > .pcard-madehead {
  border-bottom: 1px solid var(--border);
}

.col-pick { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.col-pick-b {
  border: 0; background: var(--bg); color: var(--muted);
  padding: 6px 10px; font: inherit; font-weight: 600; cursor: pointer;
}
.col-pick-b + .col-pick-b { border-left: 1px solid var(--border); }
.col-pick-b:hover { color: inherit; }
.col-pick-b.on { background: var(--accent, #2563eb); color: #fff; }

.jump-ribbon {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.jump-b {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer;
}
.jump-b:hover { color: inherit; border-color: var(--muted); }
/* A brief outline so it is obvious which card the ribbon just jumped to. */
.jump-hit { box-shadow: 0 0 0 2px var(--accent, #2563eb); transition: box-shadow .2s; }

/* Admin, Data: what is on the volume and the sweeps that clear it. */
.sto-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.sto-cols h4 { margin: 0 0 5px; font-size: 12px; color: var(--muted); font-weight: 700; }
.sto-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sto-tbl td { padding: 3px 0; border-bottom: 1px solid var(--line); }
.sto-tbl td.num { text-align: right; color: var(--muted); white-space: nowrap; padding-left: 8px; }
.sto-sweeps { display: flex; flex-direction: column; gap: 10px; }
.sto-sweep { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.sto-sweep-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.sto-sample { margin: 8px 0 10px; padding-left: 18px; font-size: 12.5px; }
.sto-sample li { margin-bottom: 2px; }

/* Admin, Data: mapping another CRM's values onto this one's. */
.imp-group { margin-bottom: 14px; }
.imp-group h4 { margin: 0 0 5px; font-size: 12.5px; font-weight: 700; }
.imp-group h4 .muted { font-weight: 400; margin-left: 6px; }
.imp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-tbl td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.imp-tbl select { max-width: 260px; }
.imp-from { font-weight: 600; }
.imp-count { color: var(--muted); white-space: nowrap; }
/* An undecided row is the thing to look at, so it says so rather than looking
   the same as one that has been answered. */
.imp-todo .imp-from { color: var(--amber); }
.imp-todo select { border-color: var(--amber); }
.imp-cmd {
  background: #0f172a; color: #e2e8f0; padding: 8px 11px; border-radius: 8px;
  font-size: 12px; overflow-x: auto; margin: 0;
}

/* ---- Action plans on a lead --------------------------------------------
 *
 * The card lists what is running and offers what could be. The picker sits
 * under the list rather than in the card header: it is a second-order action
 * on a card whose job is to say what is happening now.
 */
.pl-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.pl-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pl-pick select { flex: 1; min-width: 180px; }
.pl-pick .btn { flex: none; }