/* ===========================================================================
   The reworked leads board.

   The old board put nine facts on every card and ran seven full-height
   columns, so about two cards fit on a laptop screen and nothing could be
   compared with anything. This is built the other way round: the smallest card
   that still answers "who, how much, and why does this matter", and columns
   narrow enough to see the whole pipeline at once.
   =========================================================================== */

.lead-bar { display: grid; gap: .6rem; margin-bottom: .9rem; }
.lead-bar-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lead-bar .search-wrap { flex: 1 1 260px; min-width: 0; }
.lead-bar .search-wrap input { width: 100%; }
.lead-bar-filters select { max-width: 190px; }

.seg-toggle {
  display: inline-flex; background: var(--bg-elev);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.seg-toggle button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: .5rem 1rem; font-weight: 650; font-size: .86rem; color: var(--text-dim);
}
.seg-toggle button.on {
  background: var(--bg-card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* --------------------------------------------------------------- summary */

.lead-summary { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.sumchip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 999px; padding: .4rem .85rem; cursor: pointer;
  font-size: .82rem; color: var(--text-dim);
}
.sumchip b { font-size: .98rem; color: var(--text); }
.sumchip.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sumchip-urgent { border-color: var(--warning); color: var(--warning); cursor: default; }
.sumchip-urgent b { color: var(--warning); }

/* --------------------------------------------------------------- columns */

.kboard {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  align-items: start;
}

.kcol {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .6rem .5rem;
  min-width: 0;
}
.kcol.is-urgent { border-color: var(--warning); }
.kcol.is-drop { border-color: var(--accent); background: var(--accent-soft); }

.kcol-head { display: flex; align-items: center; gap: .45rem; }
.kcol-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
.kcol-name { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.kcol-count {
  font-size: .78rem; font-weight: 700; color: var(--text-dim);
  background: var(--bg-card); border-radius: 999px; padding: .05rem .45rem;
}
.kcol-next { margin: .25rem 0 0; font-size: .72rem; color: var(--text-dim); }
.kcol-sum { margin: .15rem 0 .5rem; font-size: .74rem; font-weight: 700; color: var(--text-dim); }
.kcol-body {
  display: grid; gap: .45rem; min-height: 2.5rem;
  /* Each column scrolls inside itself rather than making the page 5,000px
     tall. The five headers then stay on screen together, which is the whole
     point of having a board. */
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.kcol-body::-webkit-scrollbar { width: 6px; }
.kcol-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.kcol-empty {
  margin: 0; padding: .8rem .2rem; font-size: .76rem;
  color: var(--text-faint); text-align: center;
}

/* ------------------------------------------------------------------ card */

.kcard {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .4rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: .55rem .6rem .45rem;
  cursor: pointer;
  /* Vertical scrolling still belongs to the page; horizontal movement is ours. */
  touch-action: pan-y;
}
.kcard:hover { border-color: var(--border-strong); }
.kcard.is-urgent { border-left: 3px solid var(--warning); }
.kcard.has-warn { border-right: 3px solid var(--danger); }

.kcard-grip {
  grid-row: 1 / span 2; align-self: start;
  color: var(--text-faint); font-size: .95rem; line-height: 1.2;
  cursor: grab; padding-top: .1rem; user-select: none;
}
.kcard-main { min-width: 0; }
.kcard-top { display: flex; align-items: baseline; gap: .5rem; }
.kcard-top h4 {
  margin: 0; font-size: .9rem; font-weight: 650; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard-value { font-size: .82rem; font-weight: 700; color: var(--text-dim); flex: none; }
.kcard-why {
  margin: .15rem 0 .3rem; font-size: .74rem; line-height: 1.4; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kcard-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.kcard-town { font-size: .7rem; color: var(--text-faint); }
.kcard-tag {
  font-size: .66rem; font-weight: 600; padding: .05rem .35rem; border-radius: 4px;
  background: var(--bg-elev); color: var(--text-dim);
}
.kcard-tag.is-warn { background: var(--danger-soft); color: var(--danger); }

.kcard-actions {
  grid-column: 2; display: flex; align-items: center; gap: .15rem;
  margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--border);
}
.kcard-icon, .kcard-move {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px; border-radius: 6px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--text-dim); font-size: .92rem;
}
.kcard-icon:hover, .kcard-move:hover { background: var(--bg-elev); color: var(--accent); }
.kcard-move:disabled { opacity: .25; cursor: default; }
.kcard-move[data-move="1"] { margin-left: auto; }

/* ------------------------------------------------------------------ drag */

.kcard.is-dragging { opacity: .35; }
.kboard.is-dragging-any .kcol { transition: border-color .12s ease, background .12s ease; }
.kcard-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35);
  transform: rotate(1.5deg); opacity: .95;
}

/* ------------------------------------------------------- the next-up list */

.nextlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.nextrow {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .75rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: .6rem .8rem; cursor: pointer;
}
.nextrow:hover { border-color: var(--border-strong); }
.nextrow.is-urgent { border-left: 3px solid var(--warning); }
.nextrow-rank {
  font-size: .78rem; font-weight: 700; color: var(--text-faint);
  min-width: 1.5rem; text-align: right;
}
.nextrow-main { min-width: 0; }
.nextrow-top { display: flex; align-items: baseline; gap: .5rem; }
.nextrow-top b { font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nextrow-stage {
  font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px;
  background: var(--bg-elev); flex: none;
}
.nextrow-why { margin: .1rem 0 0; font-size: .76rem; color: var(--text-dim); }
.nextrow-do { display: grid; text-align: right; }
.nextrow-action { font-size: .78rem; font-weight: 700; color: var(--accent); }
.nextrow-value { font-size: .74rem; color: var(--text-dim); }
.nextrow-icons { display: flex; gap: .15rem; }
.list-empty { padding: 2rem; text-align: center; color: var(--text-dim); }

@media (max-width: 780px) {
  /* One column at a time, swiped — comparing columns on a phone was never
     going to work, so it does not pretend to. */
  .kboard { grid-auto-columns: minmax(78vw, 1fr); scroll-snap-type: x mandatory; }
  .kcol-body { max-height: none; overflow-y: visible; }
  .kcol { scroll-snap-align: start; }
  .nextrow {
    grid-template-columns: auto 1fr;
    grid-template-areas: "rank main" ". do" ". icons";
    gap: .3rem .6rem;
  }
  .nextrow-rank { grid-area: rank; }
  .nextrow-main { grid-area: main; }
  .nextrow-do { grid-area: do; text-align: left; display: flex; gap: .6rem; align-items: baseline; }
  .nextrow-icons { grid-area: icons; }
}

@media (pointer: coarse) {
  .kcard-icon, .kcard-move { min-width: 44px; min-height: 44px; }
}

@media (pointer: coarse) {
  .seg-toggle button,
  .sumchip,
  .lead-bar .btn,
  .lead-bar select,
  .lead-bar input { min-height: 44px; }
  .seg-toggle { padding: 4px; }
}

/* On a 360px phone the five 44px touch targets in the action row add up to
   more than the card. Let them wrap rather than push the column open. */
.kcard { min-width: 0; }
.kcard-actions { flex-wrap: wrap; }
.kcol-body { min-width: 0; }

@media (max-width: 400px) {
  .kcard-icon, .kcard-move { min-width: 40px; }
}