/* ============ VEJ Sales OS — live Sales Pipeline module (SIBRA-parity skin) ============
   Extends styles.css (light editorial theme). Matches the SIBRA app's density:
   segmented tab bar, compact stat tiles, tight table rows. Scoped to the pipeline
   section so the rest of the OS keeps its editorial look. */

.pipe-h{font-family:var(--font);font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--navy-800);margin:0 0 14px}

/* ---- segmented tab bar (SIBRA: gray track, white active pill) ---- */
.pipe-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;background:#eaf0f6;border:1px solid var(--line);
  border-radius:9px;padding:4px;margin:0 0 16px}
.pipe-tabs .pill{background:transparent;border:none;border-radius:6px;padding:6px 13px;
  font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:.13s;box-shadow:none}
.pipe-tabs .pill:hover{color:var(--navy-800);background:rgba(255,255,255,.6)}
.pipe-tabs .pill.active{background:#fff;color:var(--navy-800);box-shadow:0 1px 2px rgba(0,0,0,.09)}

.pipe-pane{display:none;animation:fade .25s ease}
.pipe-pane.active{display:block}

/* Fill the screen: the live pipeline breaks out of the OS's 1220px reading column
   and uses the full window width (only while the Sales Pipeline section is open, so
   the other editorial pages keep their narrower measure). */
.content:has(#sec-crm.active){max-width:none}

/* ---- stat tiles (SIBRA format: white card, small gray label, big bold value) — thin,
   single-line values so the unit sits inline instead of wrapping to a second row ---- */
.grid.g5{grid-template-columns:repeat(5,1fr)}
.grid.g6{grid-template-columns:repeat(6,1fr)}
.pipe-pane .grid{gap:10px}
.pkpi{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 14px;box-shadow:var(--sh-1)}
.pk-l{font-size:11.5px;color:var(--text-mute);font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-v{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--navy-800);margin-top:2px;
  line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-u{font-size:12.5px;font-weight:600;color:var(--text-mute);letter-spacing:0}
.pk-d{font-size:11px;color:var(--text-mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-blue{color:#1f4d99}
.pk-green{color:var(--green-deep)}
.pk-purple{color:var(--purple)}
@media(max-width:1400px){.grid.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.grid.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid.g5,.grid.g6{grid-template-columns:1fr 1fr}}

/* ---- tables: SIBRA has TWO densities. The Pipeline tracker + Production grid are
   compact (small font, uppercase headers); Offtake/Deals/Contacts/Leads use the roomier
   shadcn default (14px, sentence-case headers). Base rule = roomy; the two compact tabs override. ---- */
.pipe-pane .tbl-wrap{margin:6px 0 14px}
.pipe-pane thead th{font-family:var(--font);text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:500;color:#526077;background:var(--paper);padding:11px 12px}
.pipe-pane tbody td{padding:11px 12px;font-size:14px;line-height:1.5}
.pipe-pane h3.sub{margin:18px 0 8px}

/* compact density — Pipeline tracker (37px rows) + Production grid (roomier 41px) */
.pipe-pane[data-tab="pipeline"] thead th,
.pipe-pane[data-tab="production"] thead th{text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:600;color:var(--text-mute)}
.pipe-pane[data-tab="pipeline"] tbody td{font-size:12px;padding:8px 12px;line-height:1.2;white-space:nowrap}
.pipe-pane[data-tab="production"] thead th{padding:8px 16px}
.pipe-pane[data-tab="production"] tbody td{font-size:14px;padding:8px 16px}
/* Notes still truncates even on the nowrap pipeline rows */
.pipe-pane[data-tab="pipeline"] td.pnote{white-space:nowrap}

/* Deals rows stay single-line (Notes lives in the row tooltip) */
.pipe-pane[data-tab="deals"] tbody td{white-space:nowrap}
/* Contacts: address column wraps like SIBRA's tall rows rather than truncating */
.pipe-pane[data-tab="contacts"] td.pnote{white-space:normal;overflow:visible;text-overflow:clip;max-width:260px}
/* Offtake keeps a tight confirmed-sub line so rows don't over-inflate */
.pipe-pane[data-tab="offtake"] .pconf-sub{font-size:11px}

/* stage / confidence chips */
.pbadge{display:inline-block;font-size:10px;font-weight:700;padding:1.5px 7px;border-radius:11px;
  border:1px solid transparent;white-space:nowrap;line-height:1.5}
.st-prospect {background:rgba(var(--info-rgb),.12);color:#1f4d99;border-color:rgba(var(--info-rgb),.3)}
.st-discovery{background:rgba(var(--purple-rgb),.12);color:var(--purple);border-color:rgba(var(--purple-rgb),.3)}
.st-sample   {background:rgba(var(--gold-rgb),.15);color:var(--gold-soft);border-color:rgba(var(--gold-rgb),.32)}
.st-quote    {background:rgba(var(--crimson-500-rgb),.09);color:var(--crimson-600);border-color:rgba(var(--crimson-500-rgb),.25)}
.st-nego     {background:rgba(224,130,50,.13);color:#a05a17;border-color:rgba(224,130,50,.3)}
.st-won      {background:rgba(var(--green-rgb),.14);color:var(--green-deep);border-color:rgba(var(--green-rgb),.32)}
.cf-secured  {background:rgba(var(--info-rgb),.12);color:#1f4d99;border-color:rgba(var(--info-rgb),.3)}
.cf-medium   {background:rgba(var(--gold-rgb),.15);color:var(--gold-soft);border-color:rgba(var(--gold-rgb),.32)}
.cf-low      {background:rgba(var(--red-rgb),.1);color:var(--red-soft);border-color:rgba(var(--red-rgb),.28)}
.pfreq       {background:var(--paper-2);color:var(--text-dim);border-color:var(--line)}

/* table accents */
tr.pgroup td{background:var(--paper-2);border-top:1px solid var(--line);font-size:11.5px;padding:6px 12px}
.pcount{display:inline-block;background:var(--navy-700);color:#fff;font-size:9.5px;font-weight:800;
  border-radius:10px;padding:1px 6px;margin-left:6px;vertical-align:1px}
tr.ptotal td{background:var(--paper-2);border-top:2px solid var(--line-2);font-size:12px}
tr.prev td{background:rgba(var(--brand-rgb),.05);color:var(--brand);font-size:11.5px}
tr.pconf-row td{background:rgba(var(--green-rgb),.09);color:var(--green-deep);font-weight:600;font-size:11.5px}
.pwt{color:var(--brand);font-weight:600}
.pannual{color:var(--green-deep);font-weight:700}
.pconf-sub{font-size:9.5px;color:var(--green-deep);white-space:nowrap}
.pdim{color:var(--text-mute);opacity:.55}
.pnote{max-width:200px;font-size:11.5px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uom{font-size:9.5px;color:var(--text-mute)}
.pconf-v{color:var(--green-deep)}

/* toolbar (all tabs) */
.pdeals-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:2px 0 12px}
.pinput{background:#fff;border:1px solid var(--line-2);color:var(--text);border-radius:8px;
  padding:7px 11px;font-family:inherit;font-size:13px;min-width:120px}
.pinput:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
select.pinput{cursor:pointer;padding-right:26px}
#pipeDealSearch,#pipeCSearch,#pipeLSearch,#pipePSearch{flex:1;min-width:150px;max-width:300px}
.pcount-lbl{font-size:12px;color:var(--text-mute);font-family:var(--mono)}
.pc-add{margin-left:auto}
.pdeals-bar .btn-ghost{margin-left:6px}

/* Grouped/Flat + By-Product view toggle (segmented) */
.pview{display:inline-flex;background:#eaf0f6;border:1px solid var(--line);border-radius:8px;padding:2px}
.pv-btn{background:transparent;border:none;border-radius:6px;padding:6px 11px;font-size:12px;font-weight:600;
  color:var(--text-dim);cursor:pointer;transition:.13s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.pv-btn:hover{color:var(--navy-800)}
.pv-btn.active{background:#fff;color:var(--navy-800);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* standalone By-Product toggle (offtake) reads as a pill button */
.pdeals-bar>.pv-btn{border:1px solid var(--line-2);border-radius:8px;background:#fff}
.pdeals-bar>.pv-btn.active{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* contact phone chips (SIBRA dark chips) */
.pchip{display:inline-block;background:#1f2733;color:#fff;font-family:var(--mono);font-size:10.5px;
  border-radius:6px;padding:1px 8px;margin:1px 0;white-space:nowrap}
.pc-act{cursor:pointer;font-size:13px;color:var(--text-dim);padding:2px 5px;border-radius:5px}
.pc-act:hover{background:var(--paper-2);color:var(--navy-800)}
.pc-del:hover{color:var(--red-soft)}

/* row action cells (edit/delete/convert) — keep them compact + right-aligned */
.pact-cell{white-space:nowrap;text-align:right}
.pc-conv{color:var(--green-deep)}
.pc-conv:hover{background:rgba(var(--green-rgb),.14)}

/* add/edit modal */
.pmodal-wrap{position:fixed;inset:0;background:rgba(13,20,35,.45);z-index:80;display:grid;place-items:center;padding:20px}
.pmodal{background:#fff;border-radius:12px;box-shadow:var(--sh-3);width:100%;max-width:440px;
  max-height:92vh;overflow-y:auto;padding:20px 22px;animation:fade .2s ease}
.pmodal.wide{max-width:560px}
.pcf-g3{grid-template-columns:1fr 1fr 1fr}
.pcf-hint{font-size:12px;color:var(--text-dim);background:var(--paper-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;margin-top:2px}
.pcf-hint b{color:var(--navy-800)}
@media(max-width:520px){.pcf-g3{grid-template-columns:1fr 1fr}}
.pmodal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pmodal-h h3{margin:0;font-size:16px;font-weight:800;color:var(--navy-800)}
.pmodal-x{cursor:pointer;color:var(--text-mute);font-size:14px;padding:4px 7px;border-radius:6px}
.pmodal-x:hover{background:var(--paper-2);color:var(--navy-800)}
.pcf{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.pcf label{font-size:11.5px;font-weight:600;color:var(--text-dim)}
.pcf .pinput{width:100%;min-width:0}
.pcf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pc-details{margin:2px 0 11px}
.pc-details summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--brand);padding:2px 0}
.pc-details .pcf{margin-top:9px}
.pmodal-f{display:flex;justify-content:flex-end;gap:9px;margin-top:6px}

/* ---- CSS charts ---- */
.pchart{display:flex;gap:10px;align-items:flex-end;height:170px;padding:6px 2px 0;border-bottom:1px solid var(--line)}
.pcol{flex:1;display:flex;flex-direction:column;height:100%;min-width:0}
.pbars{flex:1;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.pbar{width:14px;border-radius:3px 3px 0 0;min-height:0}
.plabel{text-align:center;font-size:10.5px;color:var(--text-mute);font-family:var(--mono);padding:6px 0 0}
.plegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11px;color:var(--text-dim)}
.plegend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pcol-legend{flex-direction:column;gap:6px}

.phrow{display:flex;align-items:center;gap:10px;margin:7px 0}
.phl{flex:0 0 138px;font-size:11.5px;color:var(--text-dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phtrack{flex:1;height:16px;background:var(--paper-2);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.phfill{display:flex;align-items:center;justify-content:flex-end;height:100%;border-radius:8px;
  color:#fff;font-size:10px;font-weight:800;padding-right:6px;min-width:0;transition:width .4s ease}
.phv{flex:0 0 64px;font-size:11.5px;font-family:var(--mono);color:var(--navy-800);font-variant-numeric:tabular-nums}
.pstack{display:flex;min-width:24px}
.pstack span{height:100%}
.pstack-wrap .phtrack{border-radius:6px}
.psplit{display:flex;height:22px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-top:4px}

.ppie-row{display:flex;gap:20px;align-items:center;margin-top:8px}
.ppie{width:130px;height:130px;border-radius:50%;flex:0 0 auto;box-shadow:var(--sh-1);border:1px solid var(--line)}

@media(max-width:820px){.phl{flex-basis:96px}.ppie{width:100px;height:100px}}