/* Pipeline board (Pipedrive "Edit pipeline" look) -- the complaints.html board styles, shared with Rx Review (js/pd-pipeline-rx.js). */
.cp-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cp-grow{ flex:1; }
.cp-side{ display:inline-flex; border:1px solid rgba(33,35,44,.24); border-radius:4px; overflow:hidden; background:#fff; }
.cp-side button{ height:32px; padding:0 12px; border:0; background:transparent; font-size:14px; font-weight:600; color:#21232c; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.cp-side button + button{ border-left:1px solid rgba(33,35,44,.12); }
.cp-side button.is-on{ background:#e9eaec; }
.cp-side span:empty{ display:none; }
.cp-side span{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#21232c; color:#fff; font-size:11px; line-height:18px; text-align:center; }
.cp-search{ position:relative; display:flex; align-items:center; }
.cp-search i{ position:absolute; left:12px; color:#93949a; font-size:16px; pointer-events:none; }
.cp-search input{ width:240px; padding-left:36px !important; }
.cp-board{ display:grid; grid-template-columns:repeat(4, minmax(250px, 1fr)); gap:12px; align-items:start; overflow-x:auto; }
.cp-col{ display:flex; flex-direction:column; gap:8px; min-width:0; }
/* the stage card, as on Pipedrive's Edit pipeline screen */
.cp-stage{ background:#fff; border:1px solid rgba(33,35,44,.16); border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 2px rgba(42,54,71,.05); position:relative; }
.cp-stage::after{ content:""; position:absolute; right:-9px; top:50%; width:16px; height:16px; background:#fff; border-top:1px solid rgba(33,35,44,.16); border-right:1px solid rgba(33,35,44,.16); transform:translateY(-50%) rotate(45deg); z-index:1; }
.cp-col:last-child .cp-stage::after{ display:none; }
.cp-stage .nm{ display:flex; align-items:center; gap:8px; }
.cp-stage .nm b{ font-size:15px; } .cp-stage .nm .dot{ width:10px; height:10px; border-radius:50%; }
.cp-stage .desc{ font-size:12px; color:#65686f; }
.cp-stage .meta{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:13px; padding-top:8px; border-top:1px solid rgba(33,35,44,.08); }
.cp-stage .meta span{ color:#65686f; } .cp-stage .meta b{ font-weight:600; text-align:right; }
.cp-lane{ border:1px dashed rgba(33,35,44,.24); border-radius:6px; min-height:calc(100vh - 360px); padding:8px; display:flex; flex-direction:column; gap:8px; background:#fafafa; }
.cp-empty{ font-size:13px; color:#93949a; text-align:center; padding:28px 8px; }
.cp-card{ background:#fff; border-radius:6px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.07),0 0 1px rgba(0,0,0,.05); cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:box-shadow .2s, transform .3s cubic-bezier(.34,1.56,.64,1); border-left:3px solid transparent; }
.cp-card:hover{ box-shadow:0 0 4px rgba(0,0,0,.12),0 3px 5px rgba(0,0,0,.08); }
.cp-card:active{ transform:scale(.985); }
.cp-card.urgent{ border-left-color:#d83c38; }
.cp-card .t{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }
.cp-card .who{ font-size:12px; color:#65686f; display:flex; align-items:center; gap:6px; }
.cp-card .who .av{ width:18px; height:18px; border-radius:4px; background:#e9eaec; font-size:9px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.cp-card .who .av img{ width:100%; height:100%; object-fit:cover; }
.cp-card .m{ font-size:13px; color:#21232c; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cp-card .f{ display:flex; align-items:center; gap:6px; font-size:12px; color:#93949a; margin-top:2px; }
.cp-tag{ font-size:11px; font-weight:600; border-radius:4px; padding:1px 6px; background:#f0f1f3; color:#65686f; }
.cp-tag.red{ background:#fde7e4; color:#b21019; } .cp-tag.yellow{ background:#fff6d6; color:#945b00; } .cp-tag.green{ background:#e9fbe7; color:#077838; }
.cp-side span:empty{ display:none; }
/* Rx Review */
body.rxb-on .kpi-card, body.rxb-on .toolbar, body.rxb-on #rxGrid{ display:none !important; }
.rxb-bar{ margin-bottom:14px; }
.rxb-sum{ font-size:14px; color:#65686f; }
.rxb-board{ margin-bottom:24px; }
.rxb-top{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; }
.rxb-th{ position:relative; width:40px; height:48px; border-radius:6px; background:#f2f3f4; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#93949a; font-size:18px; }
.rxb-th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rxb-card .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.rxb-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.rxb-card:focus-visible{ outline:2px solid #21232c; outline-offset:2px; }
@media (max-width: 900px){ .rxb-board{ grid-template-columns:repeat(4, 270px); } }
.cp-bar .cp-search input, .cp-bar .cp-search input[type="search"]{ padding-left:36px !important; }
/* Rx Review: customers as a Pipedrive People list */
.rxc-table{ background:#fff; border:1px solid rgba(33,35,44,.12); border-radius:8px; overflow-x:auto; }
.rxc-table table{ width:100%; min-width:900px; }
.rxc-table th{ text-align:left; white-space:nowrap; }
.rxc-table th.n, .rxc-table td.n{ text-align:right; }
.rxc-row{ cursor:pointer; }
.rxc-row td{ vertical-align:middle; padding-top:10px !important; padding-bottom:10px !important; }
.rxc-name{ display:flex; align-items:center; gap:10px; }
.rxc-name b{ display:block; font-size:14px; font-weight:600; color:#21232c; }
.rxc-name .cp-tag{ display:inline-block; margin-top:2px; }
.rxc-av{ position:relative; width:32px; height:32px; flex:none; border-radius:50%; background:#e9eaec; color:#21232c; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.rxc-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rxc-ph{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rxc-dim{ color:#93949a; } .rxc-red{ color:#b21019; font-weight:600; }
.rxc-last b{ display:block; font-size:14px; font-weight:600; } .rxc-last small{ font-size:12px; color:#65686f; }
/* a prescription nobody has reviewed yet: a small red mark, middle of the right edge (no coloured side line) */
.rxb-card{ position:relative; }
.rxb-card.is-new{ padding-right:26px; }
.rxb-mark{ position:absolute; top:50%; right:10px; width:12px; height:12px; transform:translateY(-50%); pointer-events:none; }