/* crm-ops.css – HubSpot approvals inbox, «Send til HubSpot» chips and the Clay job wizard (crm-ops.js).
   The drawer reuses the integrations drawer shell (.ig-drw/.ig-panel/.ig-dh/.ig-db/.ig-card/.ig-dl/.ig-st from
   integrations.css) and the wizard the quotation desk dialog (.qt-dlg/.qt-dlg-box/.qt-dlgform from qt-desk.css), so the
   look is the same; only the stacking, the approval cards, the chips and the Clay parts are added. Prefix co-. */

/* ---- stacking: above the integrations drawer (4200) that can open these; toast on top ---- */
body.co-open{overflow:hidden}
.ig-drw.co-drw{z-index:4220}
.qt-dlg.co-dlg{z-index:4260}
.qt-toast.co-toast{z-index:4400}
.co-drw :focus-visible,.co-dlg :focus-visible,.co-chip :focus-visible{outline:2px solid #3AC0C3;outline-offset:2px}

/* ---- inbox: top line ---- */
.co-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px;margin:0 0 14px}
.co-lead{flex:1 1 260px;margin:0;font-size:.86rem;line-height:1.5;color:var(--muted,#4E6868)}
.co-top .btn[aria-busy="true"]{opacity:.6;cursor:progress}
.co-err{margin:0 0 12px;background:#FDECEA;color:#8A2A1B}
.co-none{margin:0 0 12px}
.skel.co-skel{height:150px;border-radius:14px;margin:0 0 12px}     /* shop.css .skel (330 px) loads after this file */
.skel.co-skel.sm{height:72px}
.co-h{margin:18px 2px 10px;font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#4E6868)}
.co-foot{margin:6px 2px 0}

/* ---- inbox: one card per bundle ---- */
.co-card{position:relative;transition:border-color .15s,box-shadow .15s}
.co-card.co-sel{border-color:var(--deep,#1F7F81);box-shadow:0 0 0 3px rgba(58,192,195,.22)}
.co-card.co-done{background:#FBFDFD;border-style:dashed}
.co-ch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.co-kind{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1.35;white-space:nowrap}
.co-kind::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.co-kind.k-crm{background:#E6EEF8;color:#2A5490}
.co-kind.k-paid{background:#FDF1E0;color:#7A4A07}
.co-kind.k-job{background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70)}
.co-kind.k-other{background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868)}
.co-age,.co-exp{font-size:.78rem;color:var(--muted,#4E6868);white-space:nowrap}
.co-exp::before{content:'·';margin-right:8px;color:#B9CACA}
.co-exp.soon{color:#8A2A1B;font-weight:600}
.ig-card h3.co-title{margin:0 0 8px;font-family:Jost,system-ui,sans-serif;font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.35;color:var(--ink,#152E2E);overflow-wrap:anywhere}
.co-title:focus{outline:none}
.co-title:focus-visible{outline:2px solid #3AC0C3;outline-offset:3px;border-radius:4px}
.co-test{display:inline-block;margin-right:2px;padding:1px 7px;border:1.5px solid #b00020;border-radius:999px;color:#b00020;font-size:.66rem;font-weight:700;letter-spacing:.08em;vertical-align:2px}
.co-steps{margin:0 0 10px;padding:0 0 0 20px;font-size:.88rem;line-height:1.5}
.co-steps li+li{margin-top:3px}
.ig-card p.co-sum{margin:0 0 10px;font-size:.88rem}
.co-dec{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.co-dec.ok{background:#E3F4EC;color:#1B7F5C}
.co-dec.no{background:#FDECEA;color:#8A2A1B}
.co-dl{margin-bottom:2px}
.co-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.co-acts .btn[aria-disabled="true"],.co-send[aria-disabled="true"],.co-dlg .btn[aria-disabled="true"]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.btn.co-danger{background:linear-gradient(120deg,#B03A28,#8A2A1B);box-shadow:none;color:#fff}
.co-no{border-color:#B03A28;color:#8A2A1B}
.ig-card p.co-msg{margin:10px 0 0;font-size:.86rem;line-height:1.5}
.ig-card p.co-msg:empty{display:none}
.co-deal{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:3px 11px;border-radius:999px;background:var(--darkest,#0A2E2F);color:#fff;font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.8rem;text-decoration:none;white-space:nowrap}
.co-deal:hover{background:var(--deeper,#1B6E70)}

/* ---- inbox: reject form ---- */
.co-rej{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:12px;border-radius:12px;background:#FFF7F5;border:1px solid #F3D3CC}
.co-rej label{font-family:Jost,system-ui,sans-serif;font-size:.78rem;font-weight:600;color:#8A2A1B}
.co-rej textarea{width:100%;min-height:76px;padding:8px 10px;border:1px solid var(--line,#E3EDEC);border-radius:9px;background:#fff;color:var(--ink,#152E2E);font:inherit;font-size:.9rem;line-height:1.5;resize:vertical}
.co-rej textarea:focus{border-color:#B03A28}
.co-rej .co-acts{margin-top:4px}

/* ---- «Send til HubSpot»: chip and button (QT rows, orders drawer) ---- */
.co-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px;border-radius:999px;font-family:Jost,system-ui,sans-serif;font-size:.74rem;font-weight:600;line-height:1.35;white-space:nowrap;vertical-align:middle;background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868)}
.co-dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.co-chip.c-none .co-dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.co-chip.c-wait{background:#FDF1E0;color:#7A4A07}
.co-chip.c-in{background:#E3F4EC;color:#1B7F5C}
.co-chip.c-err{background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868);font-style:italic}
.co-chip.c-load .co-dot{animation:co-pulse 1.1s ease-in-out infinite}
.co-chipa,.co-chipb{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:pointer}
.co-chipa:hover,.co-chipb:hover{text-decoration:underline;text-underline-offset:2px}
.btn.co-send{padding:6px 13px;font-size:12.5px;border-width:1.5px;white-space:nowrap}

/* ---- Clay wizard (qt-dlg box, a little wider) ---- */
.co-dlg .qt-dlg-box.co-dlgbox{width:min(640px,100%)}
.co-dlg h3:focus{outline:none}
.co-cform .co-chk{flex-direction:row;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line,#E3EDEC);border-radius:12px;background:var(--bg-soft,#F5FAFA);cursor:pointer}
.co-cform .co-chk input{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:var(--deep,#1F7F81)}
.co-cform .co-chk>span{display:flex;flex-direction:column;gap:3px;font-size:.9rem;color:var(--ink,#152E2E)}
.co-cform .co-chk b{font-family:Jost,system-ui,sans-serif;font-weight:600}
.co-dlg .co-dl{margin:4px 0 12px}
.co-dlg code{padding:1px 6px;border:1px solid var(--line,#E3EDEC);border-radius:6px;background:var(--bg-soft,#F5FAFA);color:var(--deeper,#1B6E70);font-size:.8rem;overflow-wrap:anywhere}
.co-cp{margin-left:4px;padding:2px 9px;border:1px solid var(--line,#E3EDEC);border-radius:999px;background:#fff;color:var(--deeper,#1B6E70);font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.72rem;cursor:pointer}
.co-cp:hover{border-color:var(--deep,#1F7F81);background:var(--ice,#EBF5F5)}
.co-dlg .ig-info{margin:10px 0 0!important}
.co-warn{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#FDF1E0;color:#7A4A07;font-size:.84rem;line-height:1.5}
.co-inl{margin:8px 0 0}
.co-h4{margin:18px 0 8px;font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deep,#1F7F81)}
.co-h4row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 8px}
.co-h4row .co-h4{margin:0}
.co-copy{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.co-copy code{flex:1 1 300px;display:block;padding:8px 10px;font-size:.78rem;line-height:1.45;word-break:break-all}
.co-pre{margin:0;max-height:260px;overflow:auto;padding:12px 14px;border-radius:12px;background:var(--darkest,#0A2E2F);color:#D9F2F2;font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;font-size:.76rem;line-height:1.5;white-space:pre;tab-size:2}
.co-pre:focus-visible{outline:2px solid #3AC0C3;outline-offset:2px}
.co-csteps{margin:0 0 6px}
.co-csteps li{font-size:.86rem}

/* ---- Clay wizard: recent jobs ---- */
.co-cjobs{margin-top:20px;padding-top:14px;border-top:1px solid var(--line,#E3EDEC)}
.co-cjh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.co-cjh h4{margin:0;font-family:Jost,system-ui,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--deep,#1F7F81)}
.co-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.co-job{padding:11px 13px;border:1px solid var(--line,#E3EDEC);border-radius:12px;background:#fff}
.co-jh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.co-jt{min-width:0;display:flex;flex-direction:column;gap:2px}
.co-jt b{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.co-jt small{color:var(--muted,#4E6868);font-size:.74rem;overflow-wrap:anywhere}
.co-job .ig-st{flex:none;font-size:.7rem;padding:3px 9px}
.co-cnt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:8px 0 0;font-size:.8rem;color:var(--muted,#4E6868)}
.co-cnt b{font-family:Jost,system-ui,sans-serif;color:var(--ink,#152E2E)}
.co-last{margin-left:auto;font-size:.74rem}
.co-jmeta{margin:6px 0 0;font-size:.76rem;color:var(--muted,#4E6868)}
.co-job .co-acts{margin-top:8px}
.co-jconf{padding:8px 10px;border-radius:10px;background:#FFF7F5}
.co-jconf span{flex:1 1 200px;font-size:.82rem;color:#8A2A1B}

@keyframes co-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- narrow screens ---- */
@media (max-width:700px){
  .co-acts{justify-content:stretch}
  .co-acts .btn{flex:1 1 auto;text-align:center}
  .co-last{margin-left:0;flex-basis:100%}
  .co-dlg .qt-dlg-box.co-dlgbox{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .co-card{transition:none}
  .co-chip.c-load .co-dot{animation:none}
}