/* SELLIORA r422 · Tasks — the layout of the design with the Opportunities look.
   Uses the op-* pieces (cards, chips, toolbar, pager) from selliora-opps-ui.css. */
#page-followups{--op-r:12px;--op-acc:var(--p);--op-accl:var(--pl)}
.tk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.tk-head .ph{margin:0}
.tk-head .ps{margin-top:4px}
.tk-head-r{display:flex;align-items:center;gap:10px;flex:none}
.tk-seg{display:inline-flex;border:1px solid var(--bd2);border-radius:10px;overflow:hidden;background:var(--s);padding:0!important}
.tk-seg button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--t2);background:transparent;cursor:pointer;border-radius:0!important}
.tk-seg button+button{border-left:1px solid var(--bd2)}
.tk-seg button.on{background:var(--p)!important;color:var(--text-on-primary,#fff)!important}
.tk-head .op-new{height:38px}
/* cards: the Opportunities size, four in a row */
.tk-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.tk-kpi{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.tk-kpi:hover{border-color:var(--bd2)}
.tk-kpi.on{border-color:color-mix(in srgb,var(--p) 45%,var(--bd));box-shadow:0 0 0 1px color-mix(in srgb,var(--p) 30%,transparent)}
.tk-kpi:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.op-kpi-ic.a{background:color-mix(in srgb,#EA580C 12%,var(--s));color:#EA580C}
@media (max-width:1000px){.tk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* chips: one dot colour per status */
.tk-chip.today i{background:#EA580C}.tk-chip.over i{background:#DC2626}.tk-chip.up i{background:#2563EB}.tk-chip.done i{background:#16A34A}
/* toolbar: search and the two selects */
.tk-search{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid var(--bd2);border-radius:8px;background:var(--s);color:var(--t3);min-width:190px}
.tk-search:focus-within{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.tk-search input{border:0!important;outline:0;background:transparent!important;box-shadow:none!important;padding:0!important;font:inherit;font-size:12.5px;color:var(--t);width:100%;height:30px}
.tk-sel{height:34px;border-radius:8px;padding:0 8px;font-size:12.5px;min-width:120px}
.op-menu-chk input[type=radio]{accent-color:var(--p);width:15px;height:15px;margin:0}
/* the list */
.tk-card{margin-top:0}
.tk-tbl{width:100%;border-collapse:collapse}
.tk-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}
.tk-tbl tbody td{padding:10px 12px;font-size:12.5px;border-bottom:1px solid var(--bd);vertical-align:middle}
.tk-tbl tbody tr:hover td{background:color-mix(in srgb,var(--p) 3%,var(--s))}
.tk-tbl tbody tr:last-child td{border-bottom:0}
.tk-c{width:36px;padding-right:0!important}
.tk-task{display:flex;align-items:center;gap:10px}
.tk-title{font-size:13px;font-weight:600;color:var(--t)}
.tk-title.link,.tk-rel.link{color:var(--p);cursor:pointer}
.tk-title.link:hover,.tk-rel.link:hover{text-decoration:underline}
.tk-rel{font-weight:600}
.tk-sub{font-size:11.5px;color:var(--t2);margin-top:2px}
.tk-remark{color:var(--g)}
.tk-dim{color:var(--t3)}
.tk-type{display:inline-block;font-size:11.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--s));border-radius:7px;padding:3px 10px;white-space:nowrap}
.tk-due{display:flex;align-items:center;gap:8px}
.tk-due b{font-weight:500;color:var(--t)}
.tk-due-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--s2);color:var(--t2);flex:none}
.tk-due.today .tk-due-ic{background:color-mix(in srgb,#EA580C 12%,var(--s));color:#EA580C}
.tk-due.over .tk-due-ic{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.tk-due.over b{color:#DC2626}
.tk-st{display:inline-block;font-size:11.5px;font-weight:600;border-radius:7px;padding:3px 10px;white-space:nowrap}
.tk-st.today{background:color-mix(in srgb,#EA580C 12%,var(--s));color:#C2410C}
.tk-st.over{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.tk-st.up{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#1D4ED8}
.tk-st.done{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.tk-done .tk-title{color:var(--t2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--t3) 60%,transparent)}
.tk-acts{display:flex;align-items:center;gap:5px}
.tk-ib{width:30px;height:30px;border:0;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none}
.tk-ib:disabled{opacity:.35;cursor:not-allowed}
.tk-ib:not(:disabled):hover{filter:brightness(.94)}
.tk-ib:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.tk-ib.call{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.tk-ib.wa{background:color-mix(in srgb,#16A34A 12%,var(--s));color:#15803D}
.tk-ib.done{background:color-mix(in srgb,#0284C7 11%,var(--s));color:#0284C7}
.tk-ib.edit{background:color-mix(in srgb,#2563EB 10%,var(--s));color:#2563EB}
.tk-ib.del{background:color-mix(in srgb,#DC2626 10%,var(--s));color:#DC2626}
.tk-acts .am-trigger{height:30px}
.tk-empty{text-align:center;color:var(--t3);padding:28px!important}
/* top bar on the Tasks tab */
#tb_newtask{display:none}
body.tk-on #tb_newtask{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.tk-on #tb_newtask:hover{filter:brightness(1.08)}

/* ═══ r424 · no heading text; small view buttons like the Leads toolbar ═══ */
.tk-head{align-items:center;margin-bottom:12px}
.tk-grow{flex:1}
.tk-views{display:inline-flex;gap:6px}
.tk-views button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--bd2);border-radius:8px;background:var(--s);color:var(--t2);cursor:pointer;padding:0}
.tk-views button:hover{color:var(--t);border-color:var(--t3)}
.tk-views button.on{background:var(--p)!important;border-color:var(--p);color:var(--text-on-primary,#fff)!important}
.tk-views button:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.tk-new{height:34px;border-radius:8px;padding:0 14px;font-weight:600}
#tk_fbtn{position:relative}
#tk_fbtn .tk-fn:empty{display:none}
#tk_fbtn .tk-fn{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--p);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--s)}