/* Leads left panel (UX-172, components/lead-views.js): the Today box, quick views with counts, My views.
   Calm on purpose: the panel sits beside the most-used list in the app. One thing stands out, the Today box (a white
   card on the grey column); the rows below are quiet, counts in tabular figures, the active row in the app's blue.
   Colours only via tokens.css. */

.lv { display: flex; flex-direction: column; width: 240px; padding: var(--sp-5) var(--sp-4) var(--sp-6); }

/* ---- Today ------------------------------------------------------------------------------------------ */
.lv-today {
  margin: 0 0 var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg-surface);
}
.lv-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: 0 var(--sp-3) var(--sp-3); }
.lv-today-title { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.lv-today-date { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.lv-today-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.lv-today-line {
  position: relative; display: flex; align-items: baseline; gap: var(--sp-4); min-height: 30px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); border-radius: var(--r-md); color: var(--text);
  font-size: var(--fs-md); line-height: 22px; text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.lv-today:empty { display: none; }
/* A short coloured tick on the left says what kind of thing it is (new lead, call, reply, overdue, deadline). */
.lv-today-line::before {
  content: ''; position: absolute; left: var(--sp-2); top: 9px; width: 3px; height: 12px; border-radius: 2px;
  background: var(--lv-tone, var(--sec-new));
}
.lv-today-line:hover { background: var(--bg-hover); text-decoration: none; }
.lv-today-line:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lv-today-n { flex: none; min-width: 16px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.lv-today-text { min-width: 0; color: var(--text); }
.lv-today-line.tone-new { --lv-tone: var(--sec-new); }
.lv-today-line.tone-call { --lv-tone: var(--act-today); }
.lv-today-line.tone-reply { --lv-tone: var(--reply-blue); }
.lv-today-line.tone-overdue { --lv-tone: var(--act-overdue); }
.lv-today-line.tone-deadline { --lv-tone: var(--wait-amber); }
.lv-today-clear { margin: 0; padding: var(--sp-2) var(--sp-3); color: var(--text-2); font-size: var(--fs-md); }

/* ---- Views ------------------------------------------------------------------------------------------ */
.lv-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.lv .second-menu-item.lv-row { height: 34px; gap: var(--sp-4); padding: 0 var(--sp-4) 0 var(--sp-5); }
.lv-ic, .lv-ic svg { width: 16px; height: 16px; display: block; flex: none; }
.lv-row .lv-ic { color: var(--text-2); }
.lv-row.is-active .lv-ic { color: var(--link); }
.lv-ic-hot { color: var(--sec-hot) !important; }
.lv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-count {
  flex: none; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}
.lv-count.is-zero { color: var(--text-muted); }
.lv-row.is-active .lv-count { color: var(--link); font-weight: var(--fw-semibold); }
.lv-cap { margin: var(--sp-6) var(--sp-5) var(--sp-3); }
.lv-cap[hidden] { display: none; }

/* ---- My views --------------------------------------------------------------------------------------- */
.lv-saved-item { position: relative; display: flex; align-items: center; }
.lv-saved-item > .lv-row { flex: 1; min-width: 0; padding-left: var(--sp-2); padding-right: 30px; }
.lv-grip { display: grid; place-items: center; width: 12px; flex: none; color: var(--text-muted); opacity: 0;
  cursor: grab; transition: opacity var(--t-fast) var(--ease); }
.lv-grip .ic, .lv-grip svg { width: 12px; height: 12px; display: block; }
.lv-saved-item:hover .lv-grip, .lv-row:focus-visible .lv-grip { opacity: 1; }
.lv-row.is-dragging { opacity: .5; }
.lv-row.is-drop-before { box-shadow: inset 0 2px 0 var(--link); }
.lv-row.is-drop-after { box-shadow: inset 0 -2px 0 var(--link); }
.lv-saved-item:hover .lv-count, .lv-saved-item:focus-within .lv-count { visibility: hidden; }
.lv-more {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2);
  cursor: pointer; opacity: 0;
}
.lv-more .ic, .lv-more svg { width: 16px; height: 16px; display: block; }
.lv-saved-item:hover .lv-more, .lv-more:focus-visible, .lv-more[aria-expanded="true"] { opacity: 1; }
.lv-more:hover { background: var(--bg-hover); color: var(--text); }
.lv-more:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lv-rename.input { width: 100%; height: 34px; }

.lv-save {
  display: flex; align-items: center; gap: var(--sp-4); height: 34px; margin-top: var(--sp-3); padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-md); background: none; color: var(--link); font: inherit; font-size: var(--fs-md);
  cursor: pointer; text-align: left;
}
.lv-save:hover { background: var(--bg-hover); }
.lv-save:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.lv-save-menu { width: 280px; padding: var(--sp-5) var(--sp-6); }
.lv-save-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.lv-save-title { color: var(--text); font-weight: var(--fw-semibold); }
.lv-save-help { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.lv-save-name.input { width: 100%; height: var(--control-h); }
.lv-save-error { color: var(--red); font-size: var(--fs-sm); }
.lv-save-error:empty { display: none; }
.lv-save-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); }

/* ---- Phone width: the panel drops down from the button above the toolbar ----------------------------- */
.lv-phone { display: none; }
@media (max-width: 639px) {
  .lv-phone {
    display: flex; align-items: center; gap: var(--sp-4); width: 100%; height: var(--control-h-lg, 40px);
    margin: 0 0 var(--sp-5); padding: 0 var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--bg-surface); color: var(--text); font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
  }
  .lv-phone:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
  .lv-phone-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  .lv-phone-count { color: var(--text-2); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
  .lv-phone-caret, .lv-phone-caret svg { width: 8px; height: 8px; display: block; }
  .lv-phone[aria-expanded="true"] .lv-phone-caret { transform: rotate(180deg); }

  .leads-page > .second-menu .lv { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .leads-page > .second-menu, .lv-today-line, .lv-grip { transition: none; }
}