/* r533: Email & WhatsApp status heatmap (Marketing › Campaigns) */
.hm{margin-top:16px;padding:16px 18px}
.hm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hm-head b{display:block;font-size:15px;color:var(--t)}
.hm-head div>span{display:block;font-size:12.5px;color:var(--t2);margin-top:2px}
.hm-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#7C3AED;background:color-mix(in srgb,#7C3AED 12%,var(--s));flex:none}
.hm-sp{flex:1}
.hm-seg{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden}
.hm-seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--s);padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer}
.hm-seg button+button{border-left:1px solid var(--bd)}
.hm-seg button.on{color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--s))}
.hm-sel{height:34px}
.hm-mets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}
.hm-met{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--s);font:inherit;text-align:left;cursor:pointer}
.hm-met span{font-size:12px;font-weight:600;color:var(--c)}
.hm-met b{font-size:20px;color:var(--t)}
.hm-met small{font-size:11.5px;color:var(--t2)}
.hm-met.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--s));box-shadow:inset 0 0 0 1px var(--c)}
.hm-wrap{overflow-x:auto}
.hm-t{border-collapse:separate;border-spacing:3px;width:100%;min-width:680px}
.hm-t th{font-size:10.5px;font-weight:600;color:var(--t3);text-align:left;padding:0 2px;white-space:nowrap}
.hm-t tbody th{width:38px;font-size:11.5px;color:var(--t2)}
.hm-t td{height:24px;border-radius:5px;background:color-mix(in srgb,var(--c) calc(var(--a) * 100%),var(--s2))}
.hm-t td:hover{outline:2px solid var(--t);outline-offset:-1px}
.hm-legend{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--t2)}
.hm-legend i{width:16px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--c) calc(var(--a) * 100%),var(--s2))}
.hm-best b{color:var(--t)}
.hm-tot{margin-left:12px}
.hm-empty{padding:26px 10px;text-align:center;font-size:12.5px;color:var(--t3)}
@media(max-width:900px){.hm-mets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* r535: Heatmap is a chip in the channel row; it swaps the content under the row */
#page-campaigns #msg_heatmap{display:none}
#page-campaigns.hm-on #campaigns_list>*:not(.cpx-top){display:none!important}
#page-campaigns.hm-on #msg_heatmap{display:block;margin-top:14px}
#page-campaigns.hm-on .hm-t td{height:clamp(26px,4.2vh,44px)}
#page-campaigns.hm-on .cpx-chip.on:not(.hm-chip){border-color:transparent;box-shadow:none;font-weight:500}
#page-campaigns.hm-on .hm-chip{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;font-weight:600}