/* SELLIORA r402 · Opportunities — the design's chips, toolbar, cards and list.
   Shared tokens only, so dark theme and branding follow. */
#page-pipeline,#lo-opps-host{--op-r:12px;--op-acc:var(--p);--op-accl:var(--pl)}   /* r409: your branding colour */
.op-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.op-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.op-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--s);
  color:var(--t);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s;white-space:nowrap}
.op-chip i{width:9px;height:9px;border-radius:50%;flex:none}
.op-chip b{font-size:11.5px;font-weight:700;color:var(--t2);background:var(--s2);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.op-chip:hover{border-color:var(--t3)}
.op-chip.on{background:color-mix(in srgb,var(--op-acc) 9%,var(--s));border-color:color-mix(in srgb,var(--op-acc) 55%,var(--bd2));color:var(--op-acc)}
.op-chip.on b{background:var(--s);color:var(--op-acc)}
.op-chip.all svg{color:var(--op-acc)}
.op-chip:focus-visible,.op-tb:focus-visible,.op-ib:focus-visible,.op-pg:focus-visible{outline:2px solid var(--op-acc);outline-offset:2px}

.op-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-tb{height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid var(--bd2);border-radius:10px;
  background:var(--s);color:var(--t2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.op-tb:hover{color:var(--t);border-color:var(--t3)}
.op-tb.on{background:var(--op-acc);border-color:var(--op-acc);color:#fff}
.op-tb-txt{color:var(--t);padding:0 12px}
.op-tb-txt.on{background:color-mix(in srgb,var(--op-acc) 9%,var(--s));color:var(--op-acc);border-color:color-mix(in srgb,var(--op-acc) 55%,var(--bd2))}
.op-tb.spin svg{animation:opSpin .6s linear infinite}
@keyframes opSpin{to{transform:rotate(360deg)}}
.op-cols .btn,.op-cols>button{height:40px;border-radius:10px;font-weight:600}
.op-new{height:40px;border-radius:10px;padding:0 16px;font-weight:600}
.op-dd{position:relative;display:inline-flex}
.op-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:230px;background:var(--s);border:1px solid var(--bd);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column}
.op-menu button{text-align:left;border:0;background:none;font:inherit;font-size:13px;color:var(--t);padding:8px 10px;border-radius:7px;cursor:pointer}
.op-menu button:hover,.op-menu button.on{background:var(--s2)}
.op-menu button.on{font-weight:600;color:var(--op-acc)}
.op-menu button.danger{color:var(--r)}
.op-menu-note{font-size:12px;color:var(--t3);padding:8px 10px 6px}

/* five cards */
.op-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.op-kpi{display:flex;gap:14px;align-items:flex-start;background:var(--s);border:1px solid var(--bd);border-radius:var(--op-r);padding:18px}
.op-kpi-ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;flex:none}
.op-kpi-ic.v{background:color-mix(in srgb,#7C3AED 12%,var(--s));color:#7C3AED}
.op-kpi-ic.b{background:color-mix(in srgb,#2563EB 11%,var(--s));color:#2563EB}
.op-kpi-ic.g{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.op-kpi-ic.p{background:color-mix(in srgb,#9333EA 12%,var(--s));color:#9333EA}
.op-kpi-l{font-size:12.5px;color:var(--t2);font-weight:500}
.op-kpi-v{font-size:22px;font-weight:700;color:var(--t);margin:4px 0 3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.op-kpi-s{font-size:12.5px;color:var(--t2)}
.op-od{color:var(--r);font-weight:600}

.op-filters{margin-bottom:14px}

/* the list */
.op-card{background:var(--s);border:1px solid var(--bd);border-radius:var(--op-r);overflow:hidden}
.op-tbl{border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
#pipe-table thead th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--t2);font-weight:600;padding-top:14px;padding-bottom:14px;background:var(--s)}
#pipe-table tbody td{padding-top:14px;padding-bottom:14px;vertical-align:middle;font-size:13.5px!important}
#pipe-table tbody tr:hover td{background:color-mix(in srgb,var(--op-acc) 3%,var(--s))}
.op-chk{width:16px;height:16px;accent-color:var(--op-acc);cursor:pointer;margin:0 10px 0 0;vertical-align:-3px;flex:none}
.op-name{display:flex;align-items:center;gap:4px;min-width:200px}
.op-title{color:var(--op-acc);font-weight:600;font-size:14px;cursor:pointer}
.op-title:hover{text-decoration:underline}
.op-sub{font-size:12.5px;color:var(--t2);margin-top:2px;cursor:pointer}
.op-val{font-weight:500;color:var(--t);font-variant-numeric:tabular-nums;white-space:nowrap}
.op-tag{display:inline-block;font-size:12.5px;font-weight:500;border-radius:8px;padding:5px 11px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.op-tag.int{background:var(--s2);color:var(--t2)}
.op-tag.ext{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#1D4ED8}
.op-tag.svc{background:color-mix(in srgb,#16A34A 11%,var(--s));color:#15803D}
.op-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--s));
  border-radius:8px;padding:5px 11px;white-space:nowrap}
.op-pill i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.op-stars{display:inline-flex;gap:2px;white-space:nowrap}
.op-stars svg{fill:none;stroke:#F59E0B;stroke-width:1.6}
.op-stars svg.on{fill:#F59E0B}
.op-owner{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.op-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;flex:none}
.op-dim{color:var(--t3)}
.op-acts{display:flex;align-items:center;gap:6px;justify-content:flex-start}
.op-ib{width:34px;height:34px;border-radius:9px;border:0;display:grid;place-items:center;cursor:pointer;transition:filter .12s}
.op-ib:hover:not(:disabled){filter:brightness(.94)}
.op-ib:disabled{opacity:.35;cursor:not-allowed}
.op-ib.call{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.op-ib.wa{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.op-ib.mail{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.op-ib.cal{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#2563EB}
.op-ib.edit{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#2563EB}
.op-acts .act-menu-btn,.op-acts>button:not(.op-ib),.op-acts .am-btn{width:34px;height:34px;border-radius:9px}

/* pager */
.op-pager-wrap{border-top:1px solid var(--bd)}
.op-pager{display:flex;align-items:center;gap:8px;padding:14px 18px;flex-wrap:wrap;font-size:13px;color:var(--t2)}
.op-grow{flex:1}
.op-pg-size{display:inline-flex;align-items:center;gap:8px;margin-right:8px}
.op-pg-size select{height:36px;border-radius:9px;padding:0 8px;min-width:70px}
.op-pg{min-width:36px;height:36px;border:1px solid var(--bd2);border-radius:9px;background:var(--s);color:var(--t);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.op-pg.on{background:var(--op-acc);border-color:var(--op-acc);color:#fff}
.op-pg:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:900px){.op-tools{width:100%}.op-new{margin-left:auto}}

/* r402 · an older rule hid the forecast cards (selliora-search.css) — the new cards show */
#page-pipeline #pipe-forecast.op-kpis,#lo-opps-host #pipe-forecast.op-kpis{display:grid!important}
/* the toolbar's filter icon opens the existing filter pop-up — its own bar isn't needed */
#page-pipeline .lo-filterbar,#lo-opps-host .lo-filterbar{display:none!important}
/* headings stay whole */
#pipe-table th[data-colkey="expected_value"]{min-width:150px}
#pipe-table th[data-colkey="probability"]{min-width:130px}
#pipe-table th[data-colkey="expected_close_date"]{min-width:160px}
#pipe-table th[data-colkey="stage"]{min-width:150px}
#pipe-table th[data-colkey="owner_id"]{min-width:190px}
#pipe-table th .th-lab{white-space:nowrap;max-width:none!important;overflow:visible!important;text-overflow:clip!important}

/* r405 · as the design: chips and toolbar on ONE row (chips scroll sideways if there are many) */
.op-top{flex-wrap:nowrap;align-items:center}
.op-chips{flex:1 1 auto;min-width:0;flex-wrap:wrap;padding:2px 0}   /* every chip stays visible; they wrap only on a narrow screen */
.op-chips::-webkit-scrollbar{display:none}
.op-tools{flex:none;flex-wrap:nowrap}
/* the Views (List · Kanban · Pivot · Graph) as one segmented control */
.op-views{display:inline-flex;align-items:center;border:1px solid var(--bd2);border-radius:10px;overflow:hidden;background:var(--s)}
.op-views .op-tb{border:0;border-radius:0;height:38px;min-width:40px}
.op-views .op-tb+.op-tb{border-left:1px solid var(--bd)}
.op-views .op-tb.on{background:var(--op-acc);color:#fff}
.op-od{color:var(--r);font-weight:600}
/* top bar: "+ New Opportunity" replaces "+ Add lead" on this tab only */
#tb_newopp{display:none}
body.ops-on #tb_newopp{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--p);color:var(--text-on-primary,#fff);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin-right:6px}
body.ops-on #tb_newopp:hover{filter:brightness(1.08)}
body.ops-on #tb_newopp:focus-visible{outline:2px solid #93C5FD;outline-offset:2px}


/* r405 · the design's blue on everything this page draws in the app's primary colour
   (checkboxes, the active view, links) — only inside Opportunities */
#page-pipeline input[type=checkbox],#lo-opps-host input[type=checkbox]{accent-color:var(--op-acc)}
#page-pipeline .op-views .op-tb.on,#lo-opps-host .op-views .op-tb.on{background:var(--op-acc)!important;color:#fff!important;border-color:var(--op-acc)!important}
/* r405 · the design's proportions — chips and toolbar fit one row on a 1920 screen */
#page-pipeline .op-top,#lo-opps-host .op-top{gap:10px}
.op-chips{gap:6px}
.op-chip{height:38px;padding:0 10px;gap:7px}
.op-chip b{padding:1px 7px}
.op-tools{gap:6px}
.op-tb{height:38px;min-width:38px;padding:0 8px}
.op-tb-txt{padding:0 11px}
.op-views .op-tb{min-width:34px;height:36px;padding:0 6px}
.op-cols .btn,.op-cols>button{height:38px}

/* r406 · ⠿ stage-chip chooser · double-click editing */
.op-menu-chk{display:flex;align-items:center;gap:9px;padding:7px 10px;font-size:13px;color:var(--t);border-radius:7px;cursor:pointer}
.op-menu-chk:hover{background:var(--s2)}
.op-menu-chk input{width:15px;height:15px;accent-color:var(--op-acc);margin:0}
.op-menu-chk i{width:9px;height:9px;border-radius:50%;flex:none}
#op_chipmgr .op-menu{left:0;right:auto}
#pipe-tbody td[data-edit]{cursor:default}
#pipe-tbody td[data-edit]:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--op-acc) 25%,transparent)}

/* ═══ r407 · the same size and rhythm as the Leads page ═══ */
/* one row: chips scroll sideways (no scrollbar shown), the toolbar keeps its place */
.op-top{flex-wrap:nowrap!important;gap:8px!important;margin:0 0 12px}
.op-chips{flex:1 1 auto!important;min-width:120px;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;gap:8px!important;padding:1px 0}
.op-chips::-webkit-scrollbar{display:none;height:0}
.op-chips>*{flex:0 0 auto}
.op-tools{flex:0 0 auto!important;flex-wrap:nowrap!important;gap:6px!important}
/* chips like the Leads chips */
.op-chip{height:34px!important;padding:0 10px 0 11px!important;gap:7px!important;border-radius:8px;font-size:12px;font-weight:500}
.op-chip b{font-size:11px;padding:0 7px!important;line-height:17px;border:1px solid var(--bd)}
.op-chip i{width:8px;height:8px}
/* toolbar buttons like the Leads buttons */
.op-tb{height:34px!important;min-width:34px!important;padding:0 8px!important;border-radius:8px;font-size:12.5px}
.op-tb-txt{padding:0 11px!important}
.op-views .op-tb{height:32px!important;min-width:32px!important;padding:0 6px!important}
.op-views{border-radius:8px}
.op-cols .btn,.op-cols>button{height:34px!important;border-radius:8px;font-size:12.5px}
/* compact cards */
.op-kpis{gap:12px;margin-bottom:14px}
.op-kpi{padding:12px 14px;gap:12px;align-items:center;border-radius:10px}
.op-kpi-ic{width:38px;height:38px;border-radius:9px}
.op-kpi-ic svg{width:18px;height:18px}
.op-kpi-ic span{font-size:17px!important}
.op-kpi-l{font-size:11.5px}
.op-kpi-v{font-size:17px;margin:2px 0 1px}
.op-kpi-s{font-size:11.5px}
/* the list: same text size and row height as the Leads table */
#pipe-table thead th{font-size:11px;padding-top:10px;padding-bottom:10px;letter-spacing:.04em}
#pipe-table tbody td{font-size:12px!important;padding-top:10px;padding-bottom:10px}
.op-title{font-size:13px}
.op-sub{font-size:11.5px;margin-top:1px}
.op-val{font-weight:500}
.op-tag,.op-pill{font-size:11.5px;padding:3px 9px;border-radius:7px}
.op-pill{gap:6px}
.op-pill i{width:7px;height:7px}
.op-stars svg{width:13px;height:13px}
.op-owner{gap:8px}
.op-av{width:26px;height:26px;font-size:10.5px}
.op-ib{width:30px;height:30px;border-radius:8px}
.op-ib svg{width:15px;height:15px}
.op-acts{gap:5px}
.op-acts .am-trigger{height:30px}
.op-pager{padding:10px 14px;font-size:12px}
.op-pg{min-width:30px;height:30px;font-size:12px;border-radius:8px}
.op-pg-size select{height:30px}
.op-chk{width:15px;height:15px}

/* ═══ r409 · view buttons with room, like the Leads toolbar ═══ */
.op-views{gap:6px;border:0!important;background:none!important;overflow:visible!important;border-radius:0}
.op-views .op-tb{border:1px solid var(--bd2)!important;border-radius:8px!important;height:34px!important;min-width:34px!important;padding:0 8px!important;background:var(--s)}
.op-views .op-tb+.op-tb{border-left:1px solid var(--bd2)!important}
.op-views .op-tb:hover{border-color:var(--t3)!important;color:var(--t)}
.op-prob{font-variant-numeric:tabular-nums;color:var(--t2);font-weight:500}
.op-rate{white-space:nowrap}

/* r419 · Lost Amount card */
.op-kpi-ic.r{background:color-mix(in srgb,#DC2626 11%,var(--s));color:#DC2626}
/* r421 · the list's card is as wide as the cards above it; the table keeps its
   own column widths and the leftover room goes to the Action column only
   (selliora-opps-ui.js › fitActionCol) — nothing on the left moves */
#pipe-table-view>.op-card{flex:1 1 100%;width:100%;min-width:0;align-self:stretch;box-sizing:border-box}
.op-card #pipe-table{width:auto!important;table-layout:auto!important}   /* r421: natural column widths (a global rule made it 100%) */

/* ═══ r443 ═══ */
/* + New Opportunity on the page (the top bar no longer has it) */
.op-newbtn{flex:none;height:34px;border-radius:8px;padding:0 14px;font-weight:600;white-space:nowrap;margin-left:2px}
body.ops-on #tb_newopp{display:none!important}
/* the Action column is a solid, top-most layer: nothing shows through it */
#pipe-table th:last-child,#pipe-table td:last-child,
#act-table th:last-child,#act-table td:last-child,
#page-leads .tbl-wrap th:last-child,#page-leads .tbl-wrap td:last-child{
  position:sticky!important;right:0;z-index:8!important;background-color:var(--s)!important;background-clip:padding-box;
  box-shadow:-8px 0 10px -10px rgba(15,23,42,.35)}
#pipe-table thead th:last-child,#act-table thead th:last-child,#page-leads .tbl-wrap thead th:last-child{z-index:9!important}
#pipe-table tbody tr:hover td:last-child,#act-table tbody tr:hover td:last-child,#page-leads .tbl-wrap tbody tr:hover td:last-child{background-color:color-mix(in srgb,var(--p) 3%,var(--s))!important}
#pipe-table tbody tr.sel td:last-child,#pipe-table tbody tr.selected td:last-child,#pipe-table tbody tr.is-sel td:last-child{background-color:color-mix(in srgb,var(--p) 6%,var(--s))!important}
/* the stars stay inside their own cell */
.op-rate,.lrate{position:relative;z-index:0}
/* r563: like the Leads table — fills the card, Action column only as wide as its buttons */
.op-card #pipe-table{width:100%!important}
/* r564: every cell keeps its content inside itself — nothing is drawn over the next column */
#pipe-table tbody td:not(:last-child){overflow:hidden}
#pipe-table td[data-edit="title"],#pipe-table th[data-colkey="title"]{min-width:220px}
/* r565: the frozen name column is a solid layer above the cells that slide behind it */
#pipe-table td[style*="position:sticky;left"]{z-index:6!important;background-color:var(--s)!important;background-clip:padding-box;box-shadow:8px 0 10px -10px rgba(15,23,42,.35)}
#pipe-table th[style*="position:sticky;left"]{z-index:10!important;background-color:var(--s)!important}
#pipe-table tbody tr:hover td[style*="position:sticky;left"]{background-color:color-mix(in srgb,var(--p) 3%,var(--s))!important}
#pipe-table .op-rate,#pipe-table .lrate{z-index:0}