/* liidit — the lead list and the Uusi liidi dialog. Only layout of this view; colours, type and components are crm.css.
   Rows are one grid each; CSS places the cells: wide = columns, narrow (docked sheet, tablet, phone) = two lines. */

/* head: search beside + Uusi liidi (on a phone the search is the top bar's icon, and this head is hidden) */
.lt-search{width:280px}
.lt-search > .input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.lt-search > .input-end{right:4px; display:flex; align-items:center}
.lt-search > .input-end > .kbd{margin-right:6px}

/* tools under the head: scope, order, Suodata, chips, ⋯ — one row */
.lt-tools .lt-more{margin-left:auto}
.lt-tools.is-search .chips{opacity:.5}
.lt-chips{gap:6px}

/* rows: two text lines, the cells beside them centred on both */
.lt-row{grid-template-rows:auto auto; align-content:center; row-gap:2px; padding-top:12px; padding-bottom:12px}
.lt-row > *{min-width:0}
.lt-row .row-sub{margin-top:0}
.lt-name{grid-area:name; align-self:end}
.lt-sub{grid-area:sub; align-self:start}
.lt-sub2,.lt-when,.lt-ret{display:none}
.lt-row .lt-homes,.lt-row .lt-stage,.lt-row .lt-who,.lt-row .lt-src{align-self:center}
.lt-time,.lt-wait,.lt-when{justify-self:end; text-align:right; white-space:nowrap}
.lt-flame{grid-area:flame; align-self:center; justify-self:start}
.lt-fresh{animation:lt-fresh .18s ease-out}
@keyframes lt-fresh{from{opacity:.35}}

/* Uudet — the hero: name and what they want, their own words, how long they have waited, Ota */
.lt-new{
  min-height:76px;
  grid-template-columns:minmax(260px,1.2fr) minmax(0,1.6fr) 168px 132px;
  grid-template-areas:"name msg wait act" "sub msg wait act";
}
.lt-msg{grid-area:msg; align-self:center}
.lt-wait{grid-area:wait; align-self:center}
.lt-act{grid-area:act; align-self:center; justify-self:end; text-align:right; white-space:nowrap; min-width:0; max-width:100%}
.lt-act > .truncate{display:block}

/* Työn alla: flame · name / source · homes · stage · whose · time */
.lt-work{
  grid-template-columns:16px minmax(240px,2fr) minmax(140px,1fr) 150px 160px 72px;
  grid-template-areas:"flame name homes stage who time" ". sub homes stage who time";
}
.lt-work .lt-homes{grid-area:homes}
.lt-work .lt-stage{grid-area:stage}
.lt-work .lt-who{grid-area:who}
.lt-work .lt-time{grid-area:time; align-self:center}
.lt-work.no-who{
  grid-template-columns:16px minmax(240px,2fr) minmax(140px,1fr) minmax(150px,1fr) 72px;
  grid-template-areas:"flame name homes stage time" ". sub homes stage time";
}
.lt-work.no-who .lt-who{display:none}

/* Uusimmat: arrived + first contact · name / want · source · whose · stage · homes, under one quiet header row
   (paper, Inter 13 ink-3) that uses the rows' own columns. The section heading is for the narrow form only. */
.lt-flat-sec{--lt-flat-cols:176px minmax(180px,2fr) minmax(120px,1.2fr) 130px 120px minmax(80px,.8fr)}
.lt-flat-sec > .sec-h{display:none}
.lt-flat-head{display:grid; grid-template-columns:var(--lt-flat-cols); column-gap:20px; padding:0 20px; margin:0 0 8px; font-size:13px; line-height:1.4; color:var(--ink-3)}
.lt-flat{
  grid-template-columns:var(--lt-flat-cols);
  grid-template-areas:"tuli name src who stage homes" "tuli2 sub src who stage homes";
}
.lt-tuli{grid-area:tuli; align-self:end; color:var(--ink-2)}
.lt-tuli2{grid-area:tuli2; align-self:start}
.lt-flat .lt-src{grid-area:src}
.lt-flat .lt-who{grid-area:who}
.lt-flat .lt-stage{grid-area:stage}
.lt-flat .lt-homes{grid-area:homes}

/* Kaupat and Menetetyt: words on paper side by side; an opened one takes the full width with its rows */
.lt-folds{display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:28px; row-gap:8px; margin-top:28px}
.lt-fold{flex:none}
.lt-fold.is-open{flex:1 0 100%}
.lt-fold > .lt-rows{margin-top:8px}

.lt-none{display:flex; flex-direction:column; align-items:flex-start}
.lt-nohits{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:0 20px}
.lt-nohits > .empty{padding:20px 0}

/* Suodata: Asunto is a select-like button opening a check menu (a phone: the check rows in the sheet) */
.lt-filter{width:308px}
.lt-home-pick{display:block; width:100%; text-align:left; font:400 14px/30px var(--f-ui); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lt-filter-csv{display:flex; padding-top:10px; border-top:1px solid var(--line)}
.lt-filter-csv > .btn{margin-left:-8px}

/* narrow: a docked sheet beside the list, a tablet, a phone → every row is two lines */
@container page (max-width:919px){
  .lt-row{column-gap:12px}
  /* Uudet: line 1 name + waited, line 2 want · homes · source; Ota at the right, or whose it is under the time */
  .lt-new{grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"name wait act" "sub sub act"}
  .lt-new .lt-msg,.lt-new .lt-wait.is-ret{display:none}
  .lt-new .lt-ret{display:inline}
  .lt-new .lt-ret + .lt-line{display:none}
  .lt-new.no-take{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name wait" "sub act"}
  .lt-new.no-take:has(> .lt-wait.is-ret){grid-template-areas:"name name" "sub act"}
  .lt-new .lt-name,.lt-new .lt-wait{align-self:baseline}
  .lt-new.no-take .lt-act{align-self:baseline; max-width:160px}
  /* the flame moves onto the name's line, so names without one start at the edge like the rows above */
  .lt-work,.lt-work.no-who{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name time" "sub2 sub2"}
  .lt-work .lt-flame{grid-area:name; align-self:start; margin-top:3px}
  .lt-work:has(> .flame) .lt-name{padding-left:22px}
  .lt-work .lt-sub,.lt-work .lt-homes,.lt-work .lt-stage,.lt-work .lt-who{display:none}
  .lt-work .lt-time{align-self:baseline}
  .lt-flat-sec > .sec-h{display:flex}
  .lt-flat-head{display:none}
  .lt-flat{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name when" "sub2 sub2"}
  .lt-flat .lt-tuli,.lt-flat .lt-tuli2,.lt-flat .lt-sub,.lt-flat .lt-src,.lt-flat .lt-who,.lt-flat .lt-stage,.lt-flat .lt-homes{display:none}
  .lt-flat .lt-when{display:block; grid-area:when; align-self:baseline}
  .lt-work .lt-sub2,.lt-flat .lt-sub2{display:block; grid-area:sub2; align-self:start}
  .lt-work .lt-name,.lt-flat .lt-name{align-self:baseline}
}

/* the docked list (600 px column at 1440) and narrower: the title, search and + on one line; one row of tools — the
   order moves into Suodata */
@container page (max-width:640px){
  .lt-head{flex-wrap:nowrap}
  .lt-head > .page-actions{flex:1 1 auto; min-width:0; justify-content:flex-end}
  .lt-head .lt-search{flex:1 1 auto; width:auto; min-width:120px; max-width:280px}
  .lt-head .lt-search .kbd{display:none}
  .lt-head .lt-search > .input:has(+ .input-end){padding-right:12px}
  .lt-tools{flex-wrap:wrap}
  .lt-tools > .lt-order{display:none}
}

/* phone */
@media (max-width:759px){
  .lt-tools{gap:10px; margin-top:-4px}
  .lt-tools > .lt-scope{flex:1 1 auto}
  .lt-tools > .lt-scope > button{flex:1 1 auto; justify-content:center}
  .lt-tools > .lt-more{display:none}
  .lt-filter-btn{width:44px; padding:0}
  .lt-filter-btn > .lt-filter-word{display:none}
  .lt-row{padding:12px 16px}
  .lt-act .btn{height:44px; padding:0 18px}
  .lt-nohits{padding:0 16px}
  .lt-flat-head{padding:0 16px}
}

/* ── Uusi liidi ────────────────────────────────────────────────────── */
/* "Maija Testaaja on jo CRM:ssä · Bo · Lauri Katas → Avaa": paper inside the dialog, like a note */
.nl-dup{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-top:-6px; padding:10px 14px; border-radius:var(--r-s); background:var(--bg); font-size:14px; line-height:1.45; color:var(--ink-2)}
.nl-dup b{font-weight:600; color:var(--ink)}
.nl-dup .nl-open{font-weight:600; color:var(--ink)}
.nl-context{margin-top:-8px}
/* six ways of contact in a 464 px column: a little less air per option */
.nl-via > button{padding:0 7px}
@media (max-width:759px){
  .nl-via{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-self:stretch}
  .nl-via > button{justify-content:center}
}