/* asunnot — the list of homes and the apartment sheet. Layout only: type, colour and components come from ../crm.css. */

/* ── the list: nro · what it is · price · state and holder · interest ── */
.apt-rows .apt-row{
  grid-template-columns:72px minmax(0,1.15fr) 132px minmax(0,1.45fr) 132px;
  grid-template-areas:"nro what price state int";
  column-gap:24px; min-height:80px; padding:0 24px;
}
.apt-nro{grid-area:nro; white-space:nowrap; line-height:1}
.apt-what{grid-area:what; min-width:0}
.apt-l1{font-size:14px; line-height:1.4; color:var(--ink)}
.apt-l2{margin-top:3px; font-size:13px; line-height:1.4; color:var(--ink-2)}   /* never cut: it may carry the rust errand */
.apt-dirty{color:var(--rust); font-weight:500}
.apt-note{color:var(--ink-3)}
.apt-l2 > * + *::before,.apt-foot > * + *::before{content:'·'; margin:0 .45em; color:var(--ink-3); font-weight:400}
.apt-price{grid-area:price; justify-self:end; min-width:0; text-align:right}
.apt-price-host{display:flex; justify-content:flex-end}
.apt-price-v,.apt-price-btn{font:600 15px/1.4 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.apt-price-btn{display:inline-block; margin:-3px -7px; padding:3px 7px; border:0; border-radius:6px; background:none; cursor:text; transition:background-color .15s ease-out}
.apt-price-btn:hover{background:rgba(19,38,46,.06)}
.apt-per{margin-top:3px; font-size:13px; line-height:1.4; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
/* under a price being typed: how to save it, and that it is not saved yet once the hand went elsewhere */
.apt-price-hint{display:block; margin-top:2px; font-size:12px; line-height:1.4; color:var(--ink-3); white-space:nowrap}
.apt-price-hint.is-unsaved{color:var(--ink); font-weight:500}
/* in the sheet the hint hangs under the field, out of the row, so price, €/m² and the seg keep one baseline */
.apt-price-box{position:relative; display:block}
.apt-price-box > .apt-price-hint{position:absolute; left:0; top:100%; margin-top:6px}
.apt-price-edit{display:block; width:132px; margin:-6px 0 -5px}
.apt-price-input{height:32px; padding:0 30px 0 8px; text-align:right; font-size:15px; font-weight:600}
.apt-state{grid-area:state; min-width:0}
.apt-who{margin-top:3px; padding-left:16px; font-size:13px; line-height:1.4; color:var(--ink-2)}   /* starts under the word, past the dot */
.apt-who .apt-sep{color:var(--ink-3)}
.apt-who .apt-late{color:var(--rust)}
.apt-int{grid-area:int; justify-self:end; text-align:right; font-size:14px; color:var(--ink-2); white-space:nowrap}
.apt-foot{display:none}
.apt-row.is-sold .apt-nro,.apt-row.is-sold .apt-price-v,.apt-row.is-sold .apt-per{color:var(--ink-3)}
.apt-row.is-new{animation:apt-new 1.6s ease-out}
.apt-off .sec-toggle + .apt-rows{margin-top:12px}
@keyframes apt-new{from{background:var(--sunk)}}
/* a saved value settles in */
.apt-fade{animation:apt-fade .15s ease-out}
@keyframes apt-fade{from{opacity:.3}}

/* narrow page (a phone, a tablet in portrait): nro at the left; what it is, its state, then price and interest */
@container page (max-width:880px){
  .apt-rows .apt-row{
    grid-template-columns:60px minmax(0,1fr);
    grid-template-areas:"nro what" "nro state" "nro foot";
    align-items:baseline; column-gap:12px; row-gap:3px; min-height:0; padding:14px 16px 15px;
  }
  .apt-nro{align-self:start; padding-top:2px}
  .apt-l2,.apt-price,.apt-int{display:none}
  /* the state reads as one sentence that may wrap, never a line that starts with a dot */
  .apt-state{display:block; font-size:14px; line-height:1.45}
  .apt-state > .state{display:inline-flex; vertical-align:baseline}
  .apt-who{display:inline; margin:0; padding:0; white-space:normal; overflow:visible; font-size:14px}
  .apt-who::before{content:'·'; margin:0 .4em; color:var(--ink-3)}
  .apt-foot{display:block; grid-area:foot; font-size:13px; line-height:1.45; color:var(--ink-2)}
  /* the reminder is an errand of its own: its own line, no dot before it */
  .apt-foot .apt-dirty{display:block}
  .apt-foot .apt-dirty::before{content:none}
  .apt-foot .apt-foot-price{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
  .apt-row.is-sold .apt-foot .apt-foot-price{color:var(--ink-3)}
}

/* ── the sheet: the home, its price, its state, its people ─────────── */
.apt-head{gap:8px}
.apt-sub{font-size:14px; line-height:1.45; color:var(--ink-2)}
.apt-head-state{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin-top:2px}
.apt-offsale{font-size:13px; color:var(--ink-3)}
.apt-keys{margin-top:32px}
/* labels on one line, values on the next, the asking price under a sold one */
.apt-facts{
  display:grid; grid-template-columns:repeat(3, auto); justify-content:start; align-items:last baseline;   /* price, €/m² and the seg's words share one line */
  grid-template-areas:"l1 l2 l3" "v1 v2 v3" "f1 . .";
  column-gap:48px; row-gap:6px;
}
.apt-k-l1,.apt-k-l2,.apt-k-l3{font-size:13px; line-height:1.3; color:var(--ink-2)}
.apt-k-l1{grid-area:l1} .apt-k-l2{grid-area:l2} .apt-k-l3{grid-area:l3}
.apt-k-v1{grid-area:v1} .apt-k-v2{grid-area:v2} .apt-k-v3{grid-area:v3}
.apt-k-f1{grid-area:f1; font-size:13px; color:var(--ink-3)}
.apt-price-btn.is-big{margin:-2px -8px; padding:2px 8px; border-radius:8px}
.apt-price-host .d-36{white-space:nowrap}
.apt-price-edit:has(.is-big){width:236px; margin:-4px 0 -4px -8px}
.apt-price-input.is-big{height:48px; padding:0 34px 0 8px; text-align:left; font:500 36px/1 var(--f-display); font-variant-numeric:lining-nums}
.apt-demand{margin-top:14px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.apt-keys:has(.apt-price-box) .apt-demand{margin-top:34px}   /* room for the hint under a price being typed */
@container main (max-width:440px){
  .apt-facts{grid-template-columns:repeat(2, auto); grid-template-areas:"l1 l2" "v1 v2" "f1 f1" "l3 l3" "v3 v3"; column-gap:32px}
  .apt-k-l3{margin-top:14px}
}

/* Tila: the seg, what a reservation can do next, and the form a choice opens */
.apt-tila{margin-top:36px}
.apt-tila-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.apt-tila-side{display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.apt-tila-side:empty{display:none}
.apt-tila-why{margin-top:10px; font-size:13px; line-height:1.45; color:var(--ink-3)}
.apt-form{display:flex; flex-direction:column; gap:16px; max-width:560px; margin-top:16px; padding:20px; border-radius:var(--r); background:var(--bg)}
.apt-form-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:-6px}
.apt-form-h .btn{margin-right:-8px}
.apt-form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; padding-top:4px}
.apt-form-err{margin-right:auto; font-size:13px; line-height:1.4; color:var(--danger)}
.apt-form-err:empty{display:none}
.apt-need,.apt-dup{font-size:13px; line-height:1.5; color:var(--ink-2)}
.apt-dup .btn{margin-left:-2px}
.apt-form > .field:has(.input[type="date"]),.apt-form > .field:has(.input-suffix){max-width:220px}
/* who: a dot list like the one-tap options, the person's firm and stage at the right */
.apt-picks{display:flex; flex-direction:column; margin-top:6px}
.apt-pick{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  min-height:40px; margin:0 -10px; padding:0 10px 0 28px; border:0; border-radius:8px; background:none;
  text-align:left; font:400 14px/1.3 var(--f-ui); color:var(--ink); cursor:pointer;
}
.apt-pick::before{content:''; position:absolute; left:11px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--ink-4)}
.apt-pick:hover:not(:disabled),.apt-pick:focus-visible{background:rgba(19,38,46,.05)}
.apt-pick:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.apt-pick[aria-selected="true"]{font-weight:600}
.apt-pick[aria-selected="true"]::before{background:var(--ink); box-shadow:none}
.apt-pick:disabled{color:var(--ink-3); cursor:default}
.apt-pick-name{display:inline-flex; align-items:center; gap:6px; min-width:0}
.apt-pick-meta{font-size:13px; font-weight:400; color:var(--ink-3)}
.apt-pick.is-more,.apt-pick.is-new{display:flex; padding-left:28px; color:var(--ink-2); font-size:13px; min-height:36px}
.apt-pick.is-more::before{display:none}
.apt-pick.is-new{gap:8px; padding-left:6px}
.apt-pick.is-new::before{display:none}
.apt-pick.is-new .icon{color:var(--ink-3)}
.apt-pick-empty{padding:8px 0 6px; font-size:13px; line-height:1.45; color:var(--ink-3)}
/* the chosen person sits like a filled field */
.apt-chosen{display:flex; align-items:center; gap:12px; min-height:40px; padding:0 4px 0 12px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--surface)}
.apt-chosen-name{flex:none; font-weight:600}
.apt-chosen-meta{flex:1 1 auto; font-size:13px; color:var(--ink-3)}

/* Asiakkaat: groups by link stage; the firm and stage columns line up from row to row */
.apt-clients-part{margin-top:36px}
.apt-clients-part > .apt-group + .apt-group{margin-top:32px}
.apt-clients > .apt-client{grid-template-columns:16px minmax(0,1fr) 112px 168px 30px; column-gap:14px}
.apt-client-name{font-size:14px; font-weight:600; line-height:1.4}
.apt-client-name.is-cold{color:var(--ink-2)}
.apt-client-firm{font-size:13px; color:var(--ink-2)}
.apt-client-stage{font-size:13px; color:var(--ink-3)}
.apt-client-meta{display:none; font-size:13px; color:var(--ink-3)}
.apt-client.is-gone .apt-client-name{font-weight:500}
.apt-more{justify-self:end}
.apt-gone{display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:14px}
.apt-gone > .apt-add{margin-left:-8px}
.apt-gone > .sec-toggle{margin-top:14px}
.apt-gone > .rows{align-self:stretch; margin-top:2px}
@container main (max-width:500px){
  /* a narrow form: the person's firm and stage go under the name */
  .apt-pick:not(.is-more):not(.is-new){grid-template-columns:minmax(0,1fr); row-gap:1px; min-height:52px; padding-top:6px; padding-bottom:6px}
  .apt-pick::before{top:14px; margin-top:0}
  .apt-clients > .apt-client{grid-template-columns:16px minmax(0,1fr) 30px; grid-template-areas:"f n m" ". x m"; row-gap:0; align-content:center; padding-top:8px; padding-bottom:8px}
  .apt-clients > .apt-client > :first-child{grid-area:f}
  .apt-client-name{grid-area:n}
  .apt-client-meta{display:block; grid-area:x}
  .apt-client-firm,.apt-client-stage{display:none}
  .apt-more{grid-area:m}
}

/* the aside, on paper */
.apt-aside-sec{display:flex; flex-direction:column; gap:8px; min-width:0}
.apt-aside-sec > .sec-h{margin-bottom:2px}
.apt-due{display:flex; flex-direction:column; gap:6px}
.apt-due-line{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px}
.apt-due-now{font-size:13px; line-height:1.45; color:var(--ink-2)}
.apt-quiet{font-size:13px; line-height:1.45; color:var(--ink-3)}
.apt-links{display:flex; flex-direction:column; margin-top:2px}
.apt-link{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; font-size:14px; color:var(--ink)}
.apt-link .btn{margin-right:-8px}
.apt-actions{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:-8px 0 0 -8px}
.apt-hist{display:flex; flex-direction:column; gap:10px}
.apt-hist > li{display:flex; flex-direction:column; gap:1px}
.apt-hist-note{font-size:13px; line-height:1.4; color:var(--ink-2); overflow-wrap:anywhere}
.apt-hist-meta{font-size:12px; line-height:1.4; color:var(--ink-3)}
.apt-hist-more{align-self:flex-start; margin:2px 0 0 -8px}

/* Lisää asunto: the number is short, the type takes the rest */
.apt-new-row{grid-template-columns:128px minmax(0,1fr)}
.apt-new{max-width:560px; margin-top:24px}
@media (max-width:759px){
  .apt-new-row{grid-template-columns:minmax(0,1fr)}
  .apt-form{padding:16px; margin-left:-4px; margin-right:-4px}
  .apt-pick{min-height:44px}
}