/* HeroX HQ 4.9 — Sales CRM slice 3: list views (§4), the filter system (§9), Contacts and Leads (§12, §10), CRM search (§2.4).
   Pipedrive's sizes (31 px rows, 33 px sticky columns, 352 px bulk drawer, 820 px filter editor), HQ's palette. */
/* ---------- the grid ---------- */
.cl-bulk[hidden],.ld-panel[hidden],.cb-tb[hidden]{display:none!important}
.cl-wrap{position:relative;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.cl-t{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;font-size:14px}
.cl-t th,.cl-t td{height:31px;box-sizing:border-box;padding:0 8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle;position:relative}
.cl-t thead th{position:sticky;top:0;z-index:3;background:var(--surface);font-weight:600;cursor:pointer;user-select:none}
.cl-t thead th .h{overflow:hidden;text-overflow:ellipsis}
.cl-t thead th .cb-ic{vertical-align:-2px;margin-left:4px;color:var(--ink2)}
.cl-t thead th.srt{background:var(--surface2)}
.cl-t thead th.drag{opacity:.5}.cl-t thead th.dover{box-shadow:inset 3px 0 0 var(--action)}
.cl-rz{position:absolute;right:-2px;top:0;bottom:0;width:5px;cursor:col-resize;z-index:4}
.cl-rz:hover{background:color-mix(in srgb,var(--action) 40%,transparent)}
.cl-t .cl-ck{position:sticky;left:0;z-index:2;background:var(--surface);text-align:center;padding:0;width:33px}
.cl-t thead .cl-ck{z-index:5}
.cl-t .cl-ck input{margin:0;vertical-align:middle}
.cl-t .cl-gr{position:sticky;right:0;z-index:2;background:var(--surface);text-align:center;padding:0;width:33px;border-right:0;box-shadow:-1px 0 0 var(--border)}
.cl-t thead .cl-gr{z-index:5}
.cl-t .cl-gr button{border:0;background:none;color:var(--ink3);cursor:pointer;width:28px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.cl-t .cl-gr button:hover{background:var(--surface2);color:var(--ink)}
.cl-t .cl-dot{padding:0;width:14px;text-align:center}
.cl-unseen{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--action)}
.cl-t tbody tr:hover td{background:var(--surface2)}
.cl-t tbody tr.sel td{background:color-mix(in srgb,var(--action) 10%,var(--surface))}
.cl-t tbody td:not(.cl-ck):not(.cl-gr):hover{box-shadow:inset 0 0 0 1px var(--ink)}
.cl-pen{position:absolute;right:3px;top:50%;transform:translateY(-50%);border:0;background:var(--surface);color:var(--ink2);border-radius:4px;width:22px;height:22px;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cl-t tbody td:hover .cl-pen{display:inline-flex}
.cl-a{color:var(--action);text-decoration:none}.cl-a:hover{text-decoration:underline}
.cl-tel{color:var(--action)}
.cl-over{color:var(--bad)}
.cl-ld,.cl-empty,.cl-more{color:var(--ink3);padding:14px 12px;font-size:13px}
.cl-empty{text-align:center;padding:40px 12px}
.cl-foot{position:sticky;left:0}
/* bulk bar + drawer (§4.4) */
.cl-bulk{background:color-mix(in srgb,var(--action) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--action) 25%,transparent);border-radius:8px;padding:4px 8px}
.cl-drawer{position:fixed;top:0;right:0;bottom:0;width:352px;z-index:350;background:var(--surface);box-shadow:-6px 0 18px rgba(0,0,0,.12);display:flex;flex-direction:column}
.cl-drawer .hd{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}.cl-drawer .hd .sp{flex:1}
.cl-drawer .cl-n{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--action);background:var(--action-soft);border-radius:99px;padding:1px 8px}
.cl-drawer .bd{flex:1;overflow:auto;padding:8px 16px}
.cl-drawer .ft{position:sticky;bottom:0;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}
body.cl-dr #view{padding-right:360px}
.cl-bf{display:block;margin:8px 0;font-size:12.5px;color:var(--ink2)}.cl-bf span{display:block;margin-bottom:3px}.cl-bf .in{width:100%}
.cl-pins{display:inline-flex;gap:4px;flex-wrap:wrap}
/* customize columns (§4.3) */
.cc-pop .cc-t{display:flex;align-items:center;justify-content:space-between;padding-bottom:4px}
.cc-pop .cc-r{gap:6px}.cc-pop .cc-h{color:var(--ink3);cursor:grab;font-size:11px;letter-spacing:-2px;width:10px}
.cc-pop .cc-e{font-size:11px;color:var(--ink3);border:1px solid var(--border);border-radius:99px;padding:0 6px}
.cc-pop .row:hover .cc-e{color:#fff;border-color:rgba(255,255,255,.6)}
.cc-pop .row.dover{box-shadow:inset 0 2px 0 var(--action)}
/* ---------- the owner / filter dropdown (§9.1) ---------- */
.of-pop .of-star,.of-pop .of-ed{border:0;background:none;color:inherit;cursor:pointer;padding:2px;border-radius:4px;display:none;align-items:center}
.of-pop .row:hover .of-star,.of-pop .row:hover .of-ed,.of-pop .of-star.on{display:inline-flex}
.of-pop .of-star.on{color:#d9a400}.of-pop .row:hover .of-star.on{color:#ffe27a}
/* ---------- the filter editor (§9.2) ---------- */
#mbox.fe-mbox{max-width:820px;width:96vw}
.fe-h{font-size:14px;margin:12px 0 6px;display:flex;align-items:center;gap:4px}
.fe-box{background:var(--surface2);border-radius:8px;padding:8px;min-height:20px}
.fe-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.fe-where{font-size:11px;font-weight:600;color:var(--ink2);background:var(--grey-soft);border-radius:6px;padding:0 8px;height:24px;line-height:24px}
.fe-row .in{height:32px;box-sizing:border-box}
.fe-e{width:130px}.fe-o{width:200px}.fe-f{max-width:220px;font-weight:450}
.fe-vw{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:160px}.fe-v{flex:1;min-width:140px}
.fe-ex{font-size:12px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.fe-del{border:0;background:none;color:var(--ink3);cursor:pointer;padding:6px;border-radius:6px;display:inline-flex}.fe-del:hover{background:var(--surface);color:var(--bad)}
.fe-add{color:var(--action)}
.fe-meta{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}.fe-meta label{flex:1;min-width:220px;font-size:12.5px;color:var(--ink2)}.fe-meta .in{width:100%;margin-top:3px}
.fe-cols{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px}
.fe-n{font-size:13px;margin-right:6px}
/* ---------- quick conditions (§9.3) ---------- */
.qc-chip{display:inline-flex;align-items:center;gap:4px;height:24px;border-radius:6px;background:var(--action-soft);color:var(--action);font-size:12px;font-weight:600;padding:0 4px 0 8px;margin-right:4px;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.qc-ents{display:flex;gap:4px;padding:2px 10px 6px;flex-wrap:wrap}
.qc-one{padding:0 10px}.qc-one .fe-row{flex-direction:column;align-items:stretch}.qc-one .fe-where,.qc-one .fe-e,.qc-one .fe-f,.qc-one .fe-del{display:none}.qc-one .fe-o,.qc-one .fe-vw{width:100%}
/* ---------- Contacts (§12) ---------- */
.ct-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.ct-nav{display:flex;flex-direction:column;gap:2px;font-size:14px}
.ct-nav .ct-h{font-size:16px;font-weight:600;padding:4px 10px 8px}
.ct-nav a,.ct-nav .ct-x{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--ink);text-decoration:none;cursor:pointer}
.ct-nav a:hover,.ct-nav .ct-x:hover{background:var(--surface2)}.ct-nav a.on{background:var(--action-soft);color:var(--action);font-weight:600}
.ct-nav .ct-x{color:var(--ink3)}
.ct-av .av{width:36px;height:36px;font-size:13px}
.ct-oi{width:36px;height:36px;border-radius:8px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.ct-dc{display:block;margin:2px 8px 4px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;text-decoration:none;color:var(--ink)}.ct-dc:hover{background:var(--surface2)}
.ct-dc b{display:block;font-size:13px}.ct-dc span{font-size:12px;color:var(--ink2)}
.ct-ov{display:grid;grid-template-columns:1fr auto 44px;gap:6px;padding:2px 8px;font-size:13px}.ct-ov span:nth-child(2),.ct-ov span:nth-child(3){text-align:right}
/* ---------- Leads (§10) ---------- */
.ld-seg button{width:auto;padding:0 14px;font-size:13px;font-weight:600}
.ld-up{text-transform:uppercase}
.cl-t tbody tr.ld-rot td[data-c="0"] .cl-a{color:var(--bad);font-weight:600}
.ld-na{display:inline-flex;align-items:center;gap:4px}
.ld-panel{position:fixed;top:0;right:0;bottom:0;width:480px;z-index:340;background:var(--surface);box-shadow:-6px 0 18px rgba(0,0,0,.12);display:flex;flex-direction:column}
.ld-ph{display:flex;align-items:center;gap:6px;padding:14px 16px;border-bottom:1px solid var(--border)}.ld-ph .sp{flex:1}
.ld-t{font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.ld-pb{flex:1;overflow:auto;padding:8px 6px}
/* ---------- CRM groups in the top search (§2.4) ---------- */
.gs-g{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink3);padding:8px 12px 4px}
mark.gs-m{background:color-mix(in srgb,#f5b300 35%,transparent);color:inherit;border-radius:2px;padding:0 1px}