/* SELLIORA r445 · Automation in the layout of the design (Opportunities look) */
#page-automation{--op-r:12px;--op-acc:var(--p);--op-accl:var(--pl)}
#page-automation>.ph,#page-automation>.ph+div{display:none}   /* no heading text — the same as the other pages */
.afx-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.afx-chips{flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 0}
.afx-chips::-webkit-scrollbar{display:none}
.afx-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 12px;border-radius:8px;border:1px solid transparent;
  background:color-mix(in srgb,var(--c) 9%,var(--s));color:var(--c);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.afx-chip i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.afx-chip b{font-size:11px;font-weight:700;color:var(--t2);background:var(--s);border:1px solid var(--bd);border-radius:999px;padding:0 7px;line-height:17px}
.afx-chip.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;font-weight:600}
.afx-chip[data-st=all]{background:var(--s);border-color:var(--bd2);color:var(--t)}
.afx-chip[data-st=all].on{background:var(--pl);border-color:color-mix(in srgb,var(--p) 55%,var(--bd2));color:var(--p);box-shadow:none}
.afx-chip:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.afx-new{flex:none;height:34px;border-radius:8px;padding:0 14px;font-weight:600;white-space:nowrap}
.afx-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1200px){.afx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.afx-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.afx-q{height:34px;min-width:260px;flex:0 1 340px}
.afx-sel{height:34px;border-radius:8px;padding:0 8px;font-size:12.5px;min-width:130px}
.afx-grow{flex:1}
.afx-tbl{width:100%;border-collapse:collapse}
.afx-tbl thead th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t2);font-weight:600;padding:10px 12px;background:var(--s);border-bottom:1px solid var(--bd);text-align:left;white-space:nowrap}
.afx-tbl tbody td{padding:10px 12px;font-size:12.5px;border-bottom:1px solid var(--bd);vertical-align:middle}
.afx-tbl tbody tr:hover td{background:color-mix(in srgb,var(--p) 3%,var(--s))}
.afx-tbl tbody tr:last-child td{border-bottom:0}
.afx-c{width:36px;padding-right:0!important}
.afx-name{display:flex;align-items:center;gap:10px;min-width:200px}
.afx-name .fb-ic{flex:none}
.afx-name>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.afx-link{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--p);cursor:pointer;text-align:left}
.afx-link:hover{text-decoration:underline}
.afx-name span,.afx-two span{font-size:11.5px;color:var(--t2)}
.afx-two{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.afx-two b{font-weight:600;color:var(--t)}
.afx-dim{color:var(--t3)}
.afx-trig{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--s));border-radius:7px;padding:3px 9px;white-space:nowrap}
.afx-st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:7px;padding:3px 9px;white-space:nowrap}
.afx-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.afx-st.g{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.afx-st.a{background:color-mix(in srgb,#EA580C 12%,var(--s));color:#C2410C}
.afx-st.n{background:var(--s2);color:var(--t2)}
.afx-prog{display:flex;flex-direction:column;gap:4px;min-width:110px}
.afx-prog b{font-weight:600;color:var(--t)}
.afx-bar{height:6px;border-radius:999px;background:var(--s2);overflow:hidden}
.afx-bar i{display:block;height:100%;border-radius:999px;background:#16A34A}
.afx-bar i.a{background:#EA580C}.afx-bar i.r{background:#DC2626}
.afx-acts{display:flex;align-items:center;gap:5px}
.afx-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;border:1px solid transparent;background:var(--s2);color:var(--t2);font-size:15px;line-height:1}
.afx-ib.ed{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#2563EB}
.afx-ib.go{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.afx-ib.pa{background:color-mix(in srgb,#EA580C 12%,var(--s));color:#C2410C}
.afx-ib.more{background:var(--s);border-color:var(--bd2)}
.afx-ib:hover{filter:brightness(.95)}
.afx-ib:focus-visible,.afx-link:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.afx-empty{text-align:center;color:var(--t2);padding:30px!important}
/* recent runs, folded under the table */
.afx-runs{margin-top:12px;background:var(--s);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.afx-runs-h{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:12px 16px;font:inherit;font-size:13px;color:var(--t);cursor:pointer;text-align:left}
.afx-runs-h svg{transition:transform .15s;color:var(--t3)}
.afx-runs-h[aria-expanded=true] svg{transform:rotate(90deg)}
.afx-runs-h span{color:var(--t3);font-size:12px;margin-left:4px}
.afx-runs-b{border-top:1px solid var(--bd)}
/* the classic rules card below keeps its own look, with a little room */
#page-automation .sec-workflows>.card{margin-top:12px}

/* ═══ r447 ═══ */
/* no heading text, however the page wraps it */
#page-automation .ph{display:none!important}
#page-automation .ph + div:not([class]):not([id]){display:none!important}
/* "Simple Rules (classic)" moves to a button at the top-right; its card stays hidden on the page */
#page-automation .sec-workflows > .card{display:none!important}
.afx-classic{flex:none;height:34px;gap:6px;white-space:nowrap}
.afx-top .afx-classic + .afx-new{margin-left:0}
.afx-dlg{position:fixed;inset:0;z-index:9300;background:rgba(15,23,42,.38);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;animation:afxIn .12s ease}
@keyframes afxIn{from{opacity:0}to{opacity:1}}
.afx-dlg-card{width:min(860px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--s);border:1px solid var(--bd);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.afx-dlg-h{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid var(--bd)}
.afx-dlg-h>div{flex:1;display:flex;flex-direction:column;gap:3px}
.afx-dlg-h b{font-size:15px;color:var(--t)}
.afx-dlg-h span{font-size:12.5px;color:var(--t2)}
.afx-dlg-x{border:0;background:none;font-size:22px;line-height:1;color:var(--t3);cursor:pointer;padding:2px 8px;border-radius:8px}
.afx-dlg-x:hover{background:var(--s2);color:var(--t)}
.afx-dlg-b{padding:14px 20px 18px;overflow-y:auto}
.afx-dlg-b .card.afx-in-dlg{display:block!important;margin:0!important;border:0;box-shadow:none;padding:0}
.afx-dlg-b .card.afx-in-dlg .card-title{display:none!important}   /* its own title row repeats the panel heading */
@media (prefers-reduced-motion:reduce){.afx-dlg{animation:none}}

/* r448 · classic one-step rules in the same table */
.afx-kind{font-style:normal;font-size:10.5px;font-weight:600;color:#475569;background:var(--s2);border:1px solid var(--bd);border-radius:5px;padding:0 6px;margin-right:4px;line-height:16px;display:inline-block}

/* r450 · one automation's insights (📊) */
.afx-ib.rep{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#2563EB}
.afx-in-ks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media (max-width:800px){.afx-in-ks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.afx-in-k{border:1px solid var(--bd);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.afx-in-k span{font-size:11.5px;color:var(--t2)}
.afx-in-k b{font-size:17px;color:var(--t)}
.afx-in-k small{font-size:11.5px;color:var(--t3)}
.afx-in-h{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin:4px 0 6px}
.afx-in-runs{border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.afx-in-run{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto 120px;align-items:center;gap:12px;padding:9px 12px;font-size:12.5px}
.afx-in-run+.afx-in-run{border-top:1px solid var(--bd)}
.afx-in-info{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afx-in-at{color:var(--t3);font-size:11.5px;text-align:right;white-space:nowrap}
.afx-st.b{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#1D4ED8}
.afx-st.r{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}

/* r470 · the flow builder: its own bar (name · Save as draft · Test run · Save & activate)
   always shows; the page's sub-tabs in the CRM top bar are hidden while it's open */
#flow-builder.open{inset:auto;z-index:700}
#flow-builder .fb-top{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--bd);margin-bottom:12px}
body.fb-lock #tb-subnav{visibility:hidden!important}

/* r472 · automation rows: the Bulk Action menu's icon tile */
.afx-ric{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.afx-ric svg{width:16px;height:16px;stroke:currentColor}
.afx-name .afx-ric{color:var(--c)!important;font-size:inherit}
.fb-hint{font-size:12px;color:var(--t2);margin:0 0 6px}
/* r481 · Run Now on a waiting run */
.afx-in-run{grid-template-columns:minmax(120px,1fr) 2fr auto auto 120px!important}
.afx-run-now{height:28px;padding:0 10px;font-size:12px}
.afx-ib.cp{background:color-mix(in srgb,#0891B2 10%,var(--s));color:#0891B2}
