/* Job Forecast v2 — Sales zone pages (Pipeline · Proposals · Customer Portal). Tokens come from jf.css. */

/* pipeline board */
.jfs-board .col.drop{outline:2px dashed var(--brand);outline-offset:-2px;border-radius:var(--r-card)}
.jfs-board .card{position:relative;cursor:grab}
.jfs-board .card:active{cursor:grabbing}
.jfs-board .card.moving{opacity:.5;pointer-events:none}
.jfs-board .card-m .v2-prop{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jfs-board .card-m .owed{color:var(--warn)}
.jfs-board .card-m .pill{height:18px;padding:0 6px;font-size:10px}
.jfs-card-a{display:flex;gap:6px;align-items:center;margin-top:2px;cursor:default}
.jfs-card-a select{height:24px;font-size:11px;padding:0 4px;border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface);color:var(--ink-2);max-width:60%;font-family:inherit}
.jfs-card-a .btn.sm{height:24px;padding:0 7px;font-size:11px}
.jfs-card-a .sp{flex:1}
.jfs-board .col-drip{cursor:pointer}
.jfs-drip-steps .row{grid-template-columns:130px 90px minmax(0,1fr)!important;cursor:default}
.jfs-drip-steps .row .mk-muted{font-size:11px}

/* proposals list + detail */
.jfs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:24px;align-items:start}
.jfs-split:not(.open){grid-template-columns:minmax(0,1fr) minmax(300px,.6fr)}
.jfs-split .rows .row{cursor:pointer}
.jfs-split .row-n [data-record]{cursor:pointer}
.jfs-detail{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 140px);overflow:auto}
.jfs-detail .sec-h{align-items:center}
.jfs-detail .sec-h .iconbtn{width:24px;height:24px;font-size:12px}
.jfs-kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 10px;font-size:13px;align-items:baseline}
.jfs-kv .k{color:var(--ink-3);font-size:12px}
.jfs-kv>span:not(.k){min-width:0;overflow-wrap:anywhere}
.jfs-detail .pv-line{padding:8px 0}
.jfs-detail .pv-line b{font-size:13px;font-weight:500}
.jfs-detail .toolbar{gap:6px}
.tags .tag i{font-style:normal;color:var(--ink-3);margin-left:6px;font-family:var(--ui);font-variant-numeric:tabular-nums}
.tags .tag{cursor:pointer;background:var(--surface)}

/* toggle switch (the design's mk-switch markup paints the label itself, so the page uses its own track) */
.jfs-tog{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink-2);position:relative;user-select:none}
.jfs-tog input{position:absolute;opacity:0;width:0;height:0}
.jfs-tog .tr{width:30px;height:17px;border-radius:99px;background:var(--neutral-soft);border:1px solid var(--border);position:relative;transition:background .15s,border-color .15s;flex-shrink:0}
.jfs-tog .tr::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow-sm);transition:left .15s}
.jfs-tog input:checked+.tr{background:var(--brand);border-color:var(--brand)}
.jfs-tog input:checked+.tr::after{left:15px}
.jfs-tog input:focus-visible+.tr{box-shadow:0 0 0 3px var(--brand-ring)}

/* customer portal designer */
.pa-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.pa-left .mk-card.mk-sec:first-child{border-top:0;padding-top:0}
.pa-right{position:sticky;top:0}
.pa-frame{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface);min-height:420px}
.pa-frame iframe{width:100%;height:calc(100vh - 220px);min-height:420px;border:0;display:block;background:#fff}
.mk-field input{font-family:inherit;height:32px}
.mk-field .mk-muted{font-size:11px}
.pa-secs .jfs-tog{color:var(--ink)}
.pa-cat{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--border-2)}
.pa-cat:last-of-type{border-bottom:0}
.pa-cat-h{display:flex;align-items:center;gap:10px}
.pa-cat-h b{flex:1;font-weight:500;font-size:13px}
.pa-up{cursor:pointer}
.pa-doc{display:flex;align-items:center;gap:10px;font-size:13px;padding:3px 0}
.pa-doc a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand)}
.pa-doc .mk-muted{font-size:12px;white-space:nowrap}
.pa-cust{display:flex;flex-direction:column;max-height:320px;overflow:auto;margin-top:8px}
.pa-cust-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 6px;border-bottom:1px solid var(--border-2);font-size:13px;border-radius:var(--r-control)}
.pa-cust-row:last-child{border-bottom:0}
.pa-cust-row .mk-muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-cust-row.on{background:var(--brand-soft)}
.pa-cust-row b{font-weight:500}
.pa-tl figure{margin:0;position:relative;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.pa-tl figure img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:zoom-in}
.pa-tl figure.hidden img{opacity:.35;filter:grayscale(1)}
.pa-tl figcaption{font-size:11px;padding:4px 6px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-hide{position:absolute;top:6px;right:6px;font-size:11px;padding:2px 7px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer}
.pa-hide:hover{border-color:var(--brand);color:var(--brand)}
.pa-near a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-card);color:inherit;text-decoration:none;background:var(--surface);min-width:0}
.pa-near a b{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-near a .mk-muted{font-size:12px}
.pa-near a:hover{border-color:var(--brand)}
.pa-ref-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px dashed var(--brand);border-radius:var(--r-card);background:var(--brand-soft);font-size:13px}
.pa-ref-card>b{font-size:14px}
.pa-ref-card .mono{font-size:12px;color:var(--ink-2)}
.pa-nearby select.fld{height:28px;font-size:12px;padding:0 6px;width:auto}

@media (max-width:1100px){
  .jfs-split,.jfs-split:not(.open){grid-template-columns:1fr}
  .jfs-detail{max-height:none}
  .pa-grid{grid-template-columns:1fr}
  .pa-right{position:static}
  .pa-frame iframe{height:70vh}
  .pa-tl{grid-template-columns:repeat(3,1fr)}
}

/* Sales › Estimate fees (2026-09-14) */
.ef-warn{border:1px solid color-mix(in srgb,#c98a1a 40%,var(--border));background:color-mix(in srgb,#c98a1a 9%,transparent);border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13px}
.ef-card{border:1px solid var(--border);border-radius:var(--r-card,12px);background:var(--surface);padding:16px 18px;margin:0 0 14px}
.ef-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 18px}
.ef-f{display:flex;flex-direction:column;gap:5px;font-size:12px;min-width:0}
.ef-f>span{color:var(--muted);font-weight:500}
.ef-f input,.ef-f select,.ef-f textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg,transparent);color:inherit;font:inherit;font-size:13.5px}
.ef-f input:focus,.ef-f select:focus,.ef-f textarea:focus{outline:none;border-color:var(--accent,#a35d35)}
.ef-f em{font-style:normal;font-size:11.5px;color:var(--muted)}
.ef-check{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:600}
.ef-counts{margin:14px 0 16px}
.ef-list{display:flex;flex-direction:column;gap:8px}
.ef-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface)}
.ef-row.pending{border-left:3px solid #c98a1a}
.ef-row.paid{border-left:3px solid var(--good,#2e7d32)}
.ef-row.credited,.ef-row.waived,.ef-row.cancelled{opacity:.7}
.ef-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.ef-who .mk-muted{font-size:12px}
.ef-notes{font-size:12px;color:var(--muted);margin-top:4px;max-width:70ch}
.ef-amt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.ef-amt b{font-size:16px}
.ef-st{font-size:11px}
.ef-st.pending{background:color-mix(in srgb,#c98a1a 18%,transparent);color:#8a6100}
.ef-st.paid{background:color-mix(in srgb,var(--good,#2e7d32) 16%,transparent);color:var(--good,#2e7d32)}
.ef-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ef-act .fld{font-size:12px;padding:6px 8px;max-width:170px}
@media (max-width:820px){.ef-row{grid-template-columns:1fr}.ef-amt{align-items:flex-start}.ef-act{justify-content:flex-start}}