/* kampanjat — styles of this view only. The design system lives in ../crm.css; use its tokens and components. */

/* ── rows: name and line at the left, what it brought as aligned words, the copy button ── */
.kp-row{grid-template-columns:minmax(0,1fr) 112px 88px 88px 124px 36px; min-height:72px; padding-right:14px}
.kp-row .row-lines{padding:14px 0}
.kp-n{font-size:14px; line-height:1.4; color:var(--ink-2); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.kp-n.is-lead{color:var(--ink); font-weight:600}
.kp-n-wide{grid-column:span 4}
.kp-row.is-muted .kp-n{color:var(--ink-3)}
.kp-row .kp-copy{justify-self:end}
.kp-sum{display:none}
/* folded sections stacked: each toggle is its own heading, its rows right under it */
.kp-folds{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.kp-fold{display:flex; flex-direction:column; align-self:stretch; align-items:flex-start}
.kp-fold-body{align-self:stretch; margin:8px 0 20px}

/* ── Kanavat ───────────────────────────────────────────────────────── */
.kp-channels{margin-top:56px}
.kp-channels-sec .sec-end,.kp-held-sec .sec-end{font-size:13px}
.kp-note{color:var(--ink-3)}
/* the channel's name, then its leads as a quiet bar (it carries the width), then three short number columns */
.kp-chan{table-layout:fixed}
.kp-chan .kp-c-name{width:260px}
.kp-chan .kp-c-n{width:150px}
.kp-chan .kp-leads .bar-cell{max-width:420px}
.kp-chan .kp-leads-h{text-align:left}
.kp-chan td{height:44px; padding-top:4px; padding-bottom:4px}
.kp-chan-name{overflow-wrap:anywhere}
.kp-chan td.strong{font-weight:600}
/* the total reads as a total: a firmer rule above it, ink and weight (beats crm.css's first-row rule) */
.table.kp-chan tfoot tr td{height:48px; border-top:1px solid var(--line-2); color:var(--ink); font-weight:600}
.kp-leads .bar-cell{justify-content:flex-start}
/* Varaukset ja kaupat: every reserved or sold home on one 48 px row in its own surface */
.kp-held-sec{margin-top:40px}
.kp-home{grid-template-columns:44px minmax(140px,1.1fr) 96px minmax(0,1.3fr) minmax(0,1fr) 112px; min-height:48px; padding-top:8px; padding-bottom:8px; font-size:14px; line-height:1.4}
.kp-home-meta{display:contents}
.kp-home-nro{font-weight:600; font-variant-numeric:tabular-nums}
.kp-home-from,.kp-home-firm{color:var(--ink-2)}
.kp-home-price{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── the campaign sheet ────────────────────────────────────────────── */
.kp-head{margin-top:8px}
.kp-linkpart{margin-top:24px}
.kp-linkpart:empty{display:none}
.kp-link-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.kp-link-actions .btn-quiet{margin-left:-2px}
.kp-hint{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin-top:12px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.kp-param{display:inline-flex; align-items:center; gap:2px}
.kp-param .mono{color:var(--ink)}
.kp-changed{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:600; color:var(--ink)}
.kp-changed .icon{color:var(--ink-2)}
.kp-wait{margin:0; font:italic 500 20px/1.4 var(--f-display); font-variant-numeric:lining-nums; color:var(--ink-2)}
.kp-figs{margin-top:36px}
.kp-figures{gap:24px}
.kp-cost{display:flex; flex-wrap:wrap; gap:16px 48px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.kp-cost-item{display:flex; flex-direction:column; gap:4px; min-width:0}
.kp-cost-val{font-size:15px; font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums; color:var(--ink)}
.kp-cost-item .figure-foot{margin-top:2px}
.kp-cost-when[hidden]{display:none}
.kp-money{width:150px}

/* days: quiet columns, a dot under a day that brought a lead */
.kp-days-sec{margin-top:40px}
.kp-days-read{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.kp-days{display:flex; align-items:stretch; gap:2px; height:72px}
.kp-days.is-dense{gap:1px}
.kp-day{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; cursor:default}
.kp-day i{display:block; height:calc(var(--v) * 100%); min-height:1px; border-radius:2px 2px 0 0; background:rgba(19,38,46,.28); transition:background-color .15s ease-out}
.kp-day:hover i{background:var(--ink)}
.kp-day.has-lead::after{content:''; position:absolute; left:50%; bottom:-9px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--ink)}
.kp-days-axis{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; font-size:12px; line-height:1.4; color:var(--ink-3); font-variant-numeric:tabular-nums}
.kp-days-key{display:inline-flex; align-items:center; gap:6px}
.kp-days-key i{width:4px; height:4px; border-radius:50%; background:var(--ink)}

/* tables straight on the sheet: no surface, text on the column's edges */
.kp-table-wrap{overflow-x:auto; overscroll-behavior-x:contain}
.kp-table th:first-child,.kp-table td:first-child{padding-left:0}
.kp-table th:last-child,.kp-table td:last-child{padding-right:0}
.kp-table td{height:48px}
.kp-table .kp-bar-col{width:42%}
.kp-ad{overflow-wrap:anywhere}
.kp-nro{font-weight:600; font-variant-numeric:tabular-nums}
.kp-type{margin-left:8px; color:var(--ink-3)}
.kp-copy-cell{width:40px; text-align:right}
.kp-copy-cell .btn-icon{margin:-4px 0}
/* the rest of a table (no ad name, a home off sale, no home number): quiet, so the named rows lead */
.kp-rest td{color:var(--ink-3)}
.kp-rest .kp-nro{color:var(--ink-2)}
.kp-rest .bar{background:rgba(19,38,46,.16)}
.kp-homes-sec{margin-top:28px}
.kp-homes-sec td:first-child{white-space:nowrap}
.kp-homes-sec .sec-end{font-size:13px; color:var(--ink-3)}

/* its leads */
.kp-lead{grid-template-columns:16px minmax(0,1fr) auto 44px; column-gap:14px}
.kp-lead .row-lines{padding:8px 0}
.kp-lead-day{text-align:right}
.kp-stage-p{display:none}

/* facts on paper, edited in place (core's inlineEdit) */
.kp-utm{display:block; margin-top:1px; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12px; line-height:1.5; color:var(--ink-3); overflow-wrap:anywhere}
.kp-utm.is-solo{margin-top:0; font-size:13px; color:var(--ink)}
.kp-note-text{white-space:pre-wrap}
.kp-cost-val .ie-btn{font-weight:600}
.kp-cost-val .ie-val.is-empty{font-weight:500}

/* the dialog's answer: the new campaign's link */
.kp-done .dialog-body{gap:12px; padding-bottom:8px}
.kp-done .dialog-body .link-box{margin-top:4px}

@container main (max-width:440px){
  .kp-figures{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 20px}
}

@media (max-width:1023px){
  .kp-row{grid-template-columns:minmax(0,1fr) 104px 80px 80px 116px 36px; column-gap:16px}
  .kp-home{grid-template-columns:40px minmax(120px,1fr) 88px minmax(0,1.2fr) minmax(0,1fr) 104px; column-gap:16px}
  .kp-chan .kp-c-name{width:200px}
  .kp-chan .kp-c-n{width:120px}
}
@media (max-width:759px){
  .kp-row{grid-template-columns:minmax(0,1fr) 44px; padding-right:6px; min-height:0}
  .kp-n{display:none}
  .kp-sum{display:block; margin-top:4px; font-size:13px; line-height:1.4; color:var(--ink-2); font-variant-numeric:tabular-nums}
  .kp-row.is-muted .kp-sum{color:var(--ink-3)}
  .kp-row .row-meta{white-space:normal}
  .kp-channels{margin-top:44px}
  .kp-channels-sec .sec-h{flex-wrap:wrap}
  .kp-channels-sec .sec-end{margin-left:0; flex-basis:100%; font-weight:400}
  /* the table fits its surface: fixed columns, the name wraps, short headers, the leads without their bar */
  .kp-chan{width:100%}
  .kp-chan .kp-c-name{width:auto}
  .kp-chan .kp-c-leads{width:40px}
  .kp-chan .kp-c-n{width:54px}
  .kp-chan col.kp-c-n:nth-child(4){width:72px}
  .kp-chan col.kp-c-n:last-child{width:66px}
  .kp-chan th{padding-top:8px; padding-bottom:8px; vertical-align:bottom}
  .kp-chan th,.kp-chan td{padding-left:4px; padding-right:4px}
  .kp-chan .kp-leads-h{text-align:right}
  .kp-chan .kp-leads .bar-track{display:none}
  .kp-chan .kp-leads .bar-cell{justify-content:flex-end}
  .kp-chan-name{hyphens:auto}
  .kp-chan td:first-child,.kp-chan th:first-child{padding-left:16px}
  .kp-chan td:last-child,.kp-chan th:last-child{padding-right:16px}
  .kp-home{grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"nro name price" ". sub sub"; align-items:baseline; row-gap:2px; column-gap:10px; padding:10px 16px}
  .kp-home-nro{grid-area:nro}
  .kp-home-name{grid-area:name}
  .kp-home-price{grid-area:price}
  .kp-home-meta{grid-area:sub; display:flex; align-items:baseline; gap:8px; min-width:0; font-size:13px}
  .kp-home-meta .state{font-size:13px}
  .kp-home-firm{display:none}
  .seg.kp-channel-seg{display:flex; flex-wrap:wrap; overflow:visible}
  .field-row.kp-when{gap:16px 12px}
  .kp-lead{grid-template-columns:16px minmax(0,1fr) 44px; column-gap:10px}
  .kp-lead > .stage{display:none}
  .kp-stage-p{display:inline}
  .kp-table .kp-bar-col{width:34%}
  .kp-type{display:none}
  .kp-ad{overflow-wrap:normal; word-break:normal}
}