/* ---------- ads: platform + attribution compare ---------- */
.ptbl td:first-child,.ptbl th:first-child{text-align:left}
.ptbl .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ptbl .total-row td{border-top:2px solid var(--line-strong);background:var(--surface-2);font-weight:800}
.meta-col{background:rgba(49,95,137,.055)}
th.meta-col{color:#315f89}
.attr-note{margin:12px 2px 0;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.attr-note b{color:var(--ink)}

/* ---------- maandvergelijking (YoY) ---------- */
.month-shop{margin-bottom:var(--gap)}
.year-totals{display:flex;gap:16px}
.year-totals .yt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.year-totals .yt span{font-size:11px;color:var(--muted);font-weight:700}
.year-totals .yt b{font-size:18px;font-variant-numeric:tabular-nums}
.year-totals .yt small{font-size:11px}
.month-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.month-table th,.month-table td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);font-size:13px}
.month-table th:first-child,.month-table td:first-child{text-align:left}
.month-table thead th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;background:var(--surface-2)}
.month-table .yr-head{text-align:center;font-size:13px;color:var(--ink);border-left:2px solid var(--line-strong);border-right:2px solid var(--line-strong)}
.mrow{cursor:pointer;transition:background .12s}
.mrow:hover{background:var(--surface-2)}
.mrow.open{background:#eef4fb}
.mrow-empty td{color:var(--muted);opacity:.6}
.mname .chev{display:inline-block;width:14px;color:var(--muted);transition:transform .15s;font-size:10px}
.mrow.open .mname .chev{transform:rotate(90deg);color:var(--brand)}
.mname{font-weight:600}
.mspend b{display:block;font-weight:700}
.split-bar.tiny{height:5px;margin-top:4px;min-width:70px}
.mdetail>td{background:#f7f9fc;padding:0}
.mcamps{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mcol{padding:12px 16px;border-left:2px solid var(--line-strong)}
.mcol h4{font-size:12.5px;margin:0 0 8px;color:var(--ink)}
.camp{display:flex;align-items:center;gap:9px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.camp .dot{width:9px;height:9px;border-radius:50%;flex:none}
.camp .cname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.camp .cspend{font-weight:700;font-variant-numeric:tabular-nums}
.camp .croas{font-size:11px}
@media(max-width:820px){.mcamps{grid-template-columns:1fr}}

/* ---------- hack-spike + on/off timeline ---------- */
.mspend.is-spike{background:#fdf1dd;box-shadow:inset 3px 0 0 var(--warn)}
.spike-badge{display:inline-block;color:var(--warn);font-weight:800;font-size:11px;cursor:help}
.tl-wrap{border-top:1px solid var(--line)}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tl-head h3{font-size:14px}
.tl-legend{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.tl-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tl-swatch{width:13px;height:13px;border-radius:3px;display:inline-block;vertical-align:middle}
.tl-swatch.off{background:#eef1f6;border:1px solid var(--line)}
.tl-swatch.on{background:#2f6db0}
.tl-table{border-collapse:collapse;font-size:11px}
.tl-table th.tl-year{text-align:center;color:var(--ink);font-weight:800;font-size:12px;padding:2px 0;border-bottom:1px solid var(--line)}
.tl-table th.yr26,.tl-cell.b26{border-left:0}
.tl-table th.tl-year.yr26{border-left:3px solid var(--line-strong)}
.tl-table th.tl-m{color:var(--muted);font-weight:600;width:17px;text-align:center;padding:2px 0;text-transform:none}
.tl-table th.tl-m.yr26:first-of-type{border-left:3px solid var(--line-strong)}
.tl-camp{text-align:left!important;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px!important;color:var(--ink);font-weight:600}
.tl-camp .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;flex:none}
.tl-cell{width:17px;height:19px;border:1px solid #fff}
.tl-cell.off{background:#eef1f6}
.tl-cell.on{background:color-mix(in srgb, var(--c) calc((var(--i) * 0.8 + 20) * 1%), #eaf0f8)}
.tl-cell.b26:nth-child(14){box-shadow:inset 3px 0 0 var(--line-strong)}

/* ---------- hack marking ---------- */
.hack-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px 0}
.hb-label{font-size:12.5px;font-weight:700;color:var(--bad)}
.hack-bar select,.hack-bar input{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 9px;font-size:12.5px;font-weight:600;color:var(--ink)}
.mspend.is-hack{background:#fbe7e5;box-shadow:inset 3px 0 0 var(--bad)}
.mspend.is-hack s{color:var(--muted)}
.hack-badge{display:inline-block;background:var(--bad);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;cursor:help;white-space:nowrap}

/* ---------- maandvergelijking: range + grouped cols + camp grid ---------- */
.range-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:12px 18px}
.range-bar .excl-form{align-items:center}
.range-bar .hb-label.rng{color:var(--ink)}
.month-table .grp{text-align:center;font-size:12px;color:var(--ink);border-left:2px solid var(--line-strong)}
.month-table thead tr:nth-child(2) th:nth-child(3),.month-table thead tr:nth-child(2) th:nth-child(5){border-left:2px solid var(--line-strong)}
.month-table td:nth-child(4),.month-table td:nth-child(6),.month-table td:nth-child(8){border-left:2px solid var(--line-strong)}
.month-table .yr26col{background:rgba(47,109,176,.03)}
/* campaign drill-down as a grid with all metrics */
.camp{display:grid;grid-template-columns:16px minmax(0,1fr) 92px 92px 92px 56px;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.camp>span,.camp>a{text-align:right;font-variant-numeric:tabular-nums}
.camp .cdot,.camp .cname{text-align:left}
.camp .cname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
a.cname:hover{color:var(--brand);text-decoration:underline}
.camp .cname .ext{color:var(--brand);font-weight:700}
.camp .cspend{font-weight:700}
.camp .cdot .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.camp-head{border-bottom:2px solid var(--line-strong)}
.camp-head span{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.tl-cell.yr26start{border-left:3px solid var(--line-strong)!important}

/* ---------- maandvergelijking v2: year pickers + Δ per metric ---------- */
.mt3 td:nth-child(4),.mt3 td:nth-child(6),.mt3 td:nth-child(8){border-left:0}
.mt3 thead tr:nth-child(2) th:nth-child(3),.mt3 thead tr:nth-child(2) th:nth-child(5){border-left:0}
.mt3 .gs,.mt3 td.gs,.mt3 .grp{border-left:2px solid var(--line-strong)}
.month-table td.dcol,.month-table th.dcol{text-align:right;white-space:nowrap;background:var(--surface-2)}
.dcol .dabs{display:block;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.dcol .pill{font-size:11px}
.range-bar label{flex-direction:row;align-items:center;gap:6px}

/* ---------- monthly drill-down: Meta/Google split + campaign hack ---------- */
.camp-group{margin:10px 0 4px}
.cg-head{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0 4px;border-bottom:2px solid var(--line-strong)}
.cg-head .dot{width:11px;height:11px;border-radius:50%}
.cg-head b{color:var(--ink)}
.mcol .camp{grid-template-columns:minmax(0,1fr) 90px 90px 90px 54px 74px}
.mcol .camp>span,.mcol .camp>a{text-align:right}
.mcol .camp .cname{text-align:left}
.mcol .camp-head span{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.camp-mark{text-align:right}
.mark-btn{border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer}
.mark-btn:hover{border-color:var(--bad);color:var(--bad)}
.mark-btn.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.camp-hacked{background:#fbe7e5;border-radius:6px}
.camp-hacked .cname{color:var(--bad)}
.camp-hacked .cspend s{color:var(--muted)}

/* ---------- monthly totals row + zonder-hacks ---------- */
.month-table tfoot .total-row td{border-top:2px solid var(--line-strong);background:var(--surface-2);font-weight:700}
.month-table tfoot .excl-row td{background:#fbf3f2;font-weight:600;border-top:1px dashed var(--line-strong)}
.month-table tfoot .dcol{background:var(--surface-2)}
.year-totals .yt .excl{display:block;font-size:10px;color:var(--warn);font-weight:700;margin-top:1px}

/* ---------- monthly: hacked spend note ---------- */
.mspend .hacknote{display:block;font-size:10px;color:var(--muted);text-decoration:line-through;margin-top:1px}

/* ---------- monthly: excluded internal orders block ---------- */
.excl-orders{margin-top:12px}
.excl-row{display:grid;grid-template-columns:70px minmax(0,1fr) 92px minmax(0,1.4fr);align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.excl-row .eo-id{font-weight:700;color:var(--bad)}
.excl-row .eo-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.excl-row .eo-net{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.excl-row .eo-reason{font-size:11.5px}

/* ---------- winstberekening workbook ---------- */
.profit-summary th,.profit-summary td{font-variant-numeric:tabular-nums}
.profit-summary th{cursor:default;user-select:text}
.profit-summary th.sortable{cursor:default;padding-right:12px}
.profit-summary th.sortable:hover{color:var(--muted)}
.profit-summary th .col-resizer,.profit-matrix th .col-resizer{display:none}
.profit-summary th:nth-child(6),.profit-summary td:nth-child(6){background:#f2f7fc}
.profit-summary th:nth-child(8),.profit-summary td:nth-child(8){background:#f7f4fb}
.profit-summary th:nth-child(10),.profit-summary td:nth-child(10){background:#f7f4fb}
.profit-summary th:nth-child(11){background:#dcecf8;color:#214d73;border-left:2px solid #315f89}
.profit-summary th:nth-child(12){background:#dff2ea;color:#0b6144;border-left:2px solid #0f7b55}
.profit-summary td:nth-child(11){background:#eef6fc!important;border-left:2px solid rgba(49,95,137,.35);color:#214d73;font-weight:700}
.profit-summary td:nth-child(12){background:#ecf8f1!important;border-left:2px solid rgba(15,123,85,.35);color:#0b6144;font-weight:700}
.profit-summary th:nth-child(13),.profit-summary td:nth-child(13){background:#fff8ec}
.profit-summary th:nth-child(15),.profit-summary td:nth-child(15){background:#f3faf6}
.profit-summary th:nth-child(16),.profit-summary td:nth-child(16){background:#f5f9f6}
.profit-summary .tree-toggle{margin-right:7px;vertical-align:middle}
.profit-summary tbody tr.tree-row:not(.lvl-adset):not(.lvl-subcat):not(.lvl-ad) td{background:#fcfcfd;border-top:1px solid #dedfe4;border-bottom:1px solid #eff1f4;font-weight:700}
.profit-summary tbody tr.tree-row:not(.lvl-adset):not(.lvl-subcat):not(.lvl-ad).open td{background:#f3f5f7;border-top-color:#cacdd4;border-bottom-color:#d9dce2}
.profit-summary tr.lvl-adset td{font-size:12px;background:#eef5fb;border-top:1px solid #d9e6f0}
.profit-summary tr.lvl-adset.open td{background:#e1edf7;border-top-color:#bdd2e4}
.profit-summary tr.lvl-subcat td{font-size:12px;background:#f0f8f2;border-top:1px solid #d5e7d9}
.profit-summary tr.lvl-subcat.open td{background:#e4f2e8;border-top-color:#bad7c2}
.profit-summary tr.profit-campaign-row td{font-size:11.5px;background:#f8fafc;border-top:1px solid #e5ebf1;color:#334155}
.profit-summary tr.profit-campaign-row.is-unmatched td{background:#fff7e8}
.profit-summary tr.lvl-adset td:first-child{box-shadow:inset 4px 0 #315f89}
.profit-summary tr.lvl-subcat td:first-child{padding-left:0}
.profit-summary tr.lvl-subcat td:first-child{box-shadow:inset 4px 0 #0f7b55}
.profit-summary tr.lvl-adset td:first-child{padding-left:0}
.profit-summary tr.profit-campaign-row td:first-child{padding-left:0;box-shadow:inset 4px 0 #9aa8b5}
.profit-summary tr.profit-campaign-row.platform-meta td:first-child{box-shadow:inset 4px 0 #315f89}
.profit-summary tr.profit-campaign-row.platform-google td:first-child{box-shadow:inset 4px 0 #0f7b55}
.profit-summary tr.profit-campaign-row.is-unmatched td:first-child{box-shadow:inset 4px 0 #c98a1a}
.profit-summary tr.lvl-adset .tree-toggle{background:#dceaf5;color:#315f89}
.profit-summary tr.lvl-subcat .tree-toggle{background:#dff0e4;color:#0f7b55}
.profit-summary tr.profit-campaign-row .tree-toggle{background:#e8edf2;color:#64727f}
.breakdown-chip{display:inline-flex;align-items:center;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #b8d5bf;background:#e5f4e9;color:#1f6040;border-radius:6px;padding:2px 8px;font-weight:800}
.campaign-coverage{font-size:10.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.platform-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.platform-dot.meta{background:#315f89}
.platform-dot.google{background:#0f7b55}
.platform-badge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;border-radius:6px;padding:3px 7px;font-size:10.5px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;flex:0 0 auto}
.platform-badge.meta{background:#dcecf8;border:1px solid #a9c7de;color:#214d73}
.platform-badge.google{background:#dff2ea;border:1px solid #9fcdb9;color:#0b6144}
.campaign-label{display:flex;flex-direction:column;min-width:0;font-weight:700;line-height:1.2}
.campaign-label a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.campaign-label a:hover{color:var(--brand);text-decoration:underline}
.campaign-label small{font-weight:600;color:var(--muted);margin-top:2px}
.profit-summary tfoot td{border-top:2px solid var(--line-strong);background:#eaf2f8;font-weight:800;text-align:right}
.profit-summary tfoot td:first-child{color:var(--ink);text-align:left}
.landed-table-wrap{max-height:74vh;overflow:auto;position:relative}
.landed-summary-table{min-width:1500px;border-collapse:separate;border-spacing:0}
.landed-summary-table thead th{z-index:5}
.landed-summary-table th:first-child,.landed-summary-table td:first-child{position:sticky;left:0;z-index:4;background:var(--surface);box-shadow:2px 0 0 var(--line);min-width:230px;max-width:230px}
.landed-summary-table thead th:first-child{z-index:7;background:var(--surface-2)}
.landed-summary-table th:nth-child(2),.landed-summary-table td:nth-child(2){position:sticky;left:230px;z-index:4;background:var(--surface);box-shadow:2px 0 0 var(--line);min-width:150px;max-width:150px}
.landed-summary-table thead th:nth-child(2){z-index:7;background:var(--surface-2)}
.landed-detail-table{min-width:1280px}
.landed-detail-table thead th{top:0}
.landed-orders{display:flex;flex-direction:column;gap:10px}
.lc-order{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.lc-order>summary{display:grid;grid-template-columns:18px 140px minmax(180px,1.3fr) minmax(180px,1fr) 140px 140px;gap:12px;align-items:center;cursor:pointer;list-style:none;padding:12px 14px;background:var(--surface-2)}
.lc-order>summary::-webkit-details-marker{display:none}
.lc-order>summary::before{content:"▸";font-weight:900;color:var(--muted)}
.lc-order[open]>summary::before{content:"▾"}
.lc-order>summary span{min-width:0}
.lc-order>summary b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-order>summary small{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-order .table-wrap{border-top:1px solid var(--line);max-height:360px;overflow:auto}
.lc-product-lines td{background:#fbfcfe;padding:0;text-align:left}
.lc-product-lines details{padding:9px 12px}
.lc-product-lines summary{cursor:pointer;font-weight:800;color:var(--brand);list-style:none}
.lc-product-lines summary::-webkit-details-marker{display:none}
.lc-product-lines summary::before{content:"▸";display:inline-block;margin-right:7px}
.lc-product-lines details[open] summary::before{content:"▾"}
.lc-product-lines .table-wrap{margin-top:8px;max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.compact table th,.compact table td{padding:7px 9px;font-size:12px}
@media (max-width:900px){
  .lc-order>summary{grid-template-columns:1fr;gap:6px}
  .landed-summary-table th:nth-child(2),.landed-summary-table td:nth-child(2){position:static;box-shadow:none}
}
.profit-workbook{display:flex;flex-direction:column;gap:18px}
.profit-store{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.profit-store-head{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:14px;align-items:center;padding:13px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.profit-store-head>b{font-size:17px;font-variant-numeric:tabular-nums}
.profit-store-head small{text-align:right}
.profit-block{padding:14px 16px;border-top:1px solid var(--line)}
.profit-block:first-of-type{border-top:0}
.profit-block .table-wrap{max-height:72vh;overflow:auto;position:relative}
.profit-block-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.profit-channel-split{display:grid;grid-template-columns:auto auto minmax(120px,180px);gap:8px;align-items:center;margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:700}
.profit-channel-split i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.profit-split{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.profit-split .split-bar{width:86px;min-width:86px}
.profit-split b{font-variant-numeric:tabular-nums}
.profit-mini{font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;background:var(--surface);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.profit-summary thead th{position:sticky;top:0;z-index:5;background:#edf3f9;color:var(--ink);box-shadow:0 1px 0 var(--line-strong)}
.profit-matrix{min-width:980px;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.profit-matrix th,.profit-matrix td{padding:7px 10px;text-align:right;font-size:12.5px;white-space:nowrap;border-bottom:1px solid var(--line)}
.profit-matrix th{cursor:default;user-select:text}
.profit-matrix th.sortable{cursor:default;padding-right:10px}
.profit-matrix th.sortable:hover{color:var(--ink)}
.profit-matrix th:first-child,.profit-matrix td:first-child{position:sticky;left:0;z-index:4;text-align:left;background:var(--surface);font-weight:800;box-shadow:2px 0 0 var(--line);min-width:190px;width:190px;max-width:190px}
.profit-matrix td.submetric{padding-left:34px;color:var(--muted);font-weight:700;background:#fbfcfe}
.profit-matrix tr.metric-exact_cogs + tr.metric-sub td.submetric{color:#5d3a8a}
.profit-matrix .tree-toggle{margin-right:7px;vertical-align:middle}
.profit-matrix tr.metric-sub td{background:#fbfcfe}
.profit-matrix thead th{position:sticky;top:0;z-index:8;background:#edf3f9;color:var(--ink);border-bottom:2px solid var(--line-strong);box-shadow:0 1px 0 var(--line-strong)}
.profit-matrix thead th:first-child{z-index:10;background:#edf3f9}
.profit-matrix th:last-child,.profit-matrix td:last-child{background:#f7fafc;border-left:2px solid var(--line-strong);font-weight:800}
.profit-matrix tr.metric-revenue td{background:#fbfdff}
.profit-matrix tr.metric-revenue_total td{background:#edf5fc;border-top:1px solid #cbddea;border-bottom:1px solid #cbddea}
.profit-matrix tr.metric-revenue_total td:first-child{box-shadow:inset 4px 0 0 #2f6db0,2px 0 0 var(--line);color:#234b78}
.profit-matrix tr.metric-cost_rate td{background:#f4f0fa;border-top:1px solid #ded2ee;border-bottom:1px solid #ded2ee}
.profit-matrix tr.metric-cost_rate td:first-child{box-shadow:inset 4px 0 0 #8a5cc2,2px 0 0 var(--line);color:#5d3a8a}
.profit-matrix tr.metric-exact_cogs td{background:#f7f4fb;border-top:1px solid #e2d8f0;border-bottom:1px solid #e2d8f0}
.profit-matrix tr.metric-exact_cogs td:first-child{box-shadow:inset 4px 0 0 #8a5cc2,2px 0 0 var(--line);color:#5d3a8a}
.profit-matrix tr.metric-ad_spend td{background:#fff4df;border-top:1px solid #efd7aa;border-bottom:1px solid #efd7aa}
.profit-matrix tr.metric-ad_spend td:first-child{box-shadow:inset 4px 0 0 #c98a1a,2px 0 0 var(--line);color:#8a6516}
.profit-matrix tr.metric-net_profit td,.profit-matrix tr.metric-profit_per_ad_euro td{background:#eef8f2;border-top:1px solid #cce8d8;border-bottom:1px solid #cce8d8}
.profit-matrix tr.metric-net_profit td:first-child,.profit-matrix tr.metric-profit_per_ad_euro td:first-child{box-shadow:inset 4px 0 0 #0f8a55,2px 0 0 var(--line);color:#0b6e44}
.profit-matrix tr.metric-gross_profit td{background:#f7fbf8}
.profit-matrix tr.metric-meta_spend td,.profit-matrix tr.metric-google_spend td{background:#fffaf2}
.profit-matrix tr.metric-poas td,.profit-matrix tr.metric-margin_rate td{background:#f8fbf7}
.profit-matrix tr.metric-cogs td,.profit-matrix tr.metric-shipping td{background:#fcfdff}
.profit-matrix tr.metric-revenue_total .cf.total,.profit-matrix tr.metric-cost_rate .cf.total,.profit-matrix tr.metric-exact_cogs .cf.total,.profit-matrix tr.metric-ad_spend .cf.total,.profit-matrix tr.metric-net_profit .cf.total,.profit-matrix tr.metric-profit_per_ad_euro .cf.total{background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px rgba(20,40,70,.08)}
.cf{display:inline-block;min-width:72px;padding:2px 7px;border-radius:6px;font-weight:700;font-variant-numeric:tabular-nums}
.cf small{display:block;font-size:10px;line-height:1.15;margin-top:1px;color:currentColor;opacity:.75}
.profit-matrix .cf.good{background:rgba(15,138,85,.10);color:#0b6e44}
.profit-matrix .cf.warn{background:rgba(201,138,26,.12);color:#9a6812}
.profit-matrix .cf.bad{background:rgba(210,74,64,.11);color:#a33a32}
.profit-matrix .cf.muted{background:rgba(100,114,133,.10);color:var(--muted);font-weight:600}
.profit-summary .pill.good{background:rgba(15,138,85,.11);color:#0b6e44}
.profit-summary .pill.warn{background:rgba(201,138,26,.14);color:#8a6516}
.profit-summary .pill.bad{background:rgba(210,74,64,.12);color:#a33a32}
.cf.total{background:transparent;color:var(--ink);font-weight:800}
@media(max-width:760px){
  .profit-store-head{grid-template-columns:1fr;align-items:flex-start}
  .profit-store-head small{text-align:left}
  .profit-block{padding:12px}
  .profit-block-title{align-items:flex-start;flex-direction:column}
  .profit-channel-split{margin-left:0;grid-template-columns:1fr}
}

/* ---------- monthly: thick spend bar + conditional formatting ---------- */
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sp-top .mer{font-size:10.5px;padding:1px 6px}
.sp-splitlabel{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.sp-splitlabel .sp-nahack{color:var(--bad)}
.split-bar.sp-bar{height:19px;border-radius:5px;margin-top:3px}
.split-bar.sp-bar .seg{font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.02em}
.sp-legend{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.sp-legend span{display:flex;align-items:center;gap:5px}
.sp-legend i{width:9px;height:9px;border-radius:2px;flex:none}
.sp-legend em{font-style:normal;color:var(--muted);font-weight:700;margin-left:auto}
.sp-legend .m{color:#315f89} .sp-legend .m i{background:#315f89}
.sp-legend .g{color:#0f7b55} .sp-legend .g i{background:#0f7b55}
/* omzet heat: higher = greener */
.omzet-cell{background:color-mix(in srgb, var(--good) calc(var(--h,0) * 0.30 * 1%), transparent)}
/* winst heat: green if positive, red if negative, deeper = larger */
.winst-cell{font-weight:700}
.winst-cell.pos{color:var(--good);background:color-mix(in srgb, var(--good) calc(var(--h,0) * 0.34 * 1%), transparent)}
.winst-cell.neg{color:var(--bad);background:color-mix(in srgb, var(--bad) calc(var(--h,0) * 0.34 * 1%), transparent)}

/* ---------- monthly: numbered spend-timeline (per platform) ---------- */
.tl-section{margin-bottom:16px}
.tl-plat{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0 6px}
.tl-plat .dot{width:12px;height:12px;border-radius:50%}
.tl-table.numbered .tl-cell{width:44px;height:24px;font-size:10.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;border:1px solid #fff}
.tl-table.numbered .tl-cell.off{background:#f2f5f9;color:transparent}
.tl-table.numbered .tl-cell.on{background:color-mix(in srgb, var(--c) calc((var(--i) * 0.5 + 16) * 1%), #ffffff);color:#16202c}
.tl-table.numbered .tl-camp{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-table.numbered .tl-camp a{color:var(--ink);font-weight:600}
.tl-table.numbered .tl-camp a:hover{color:var(--brand);text-decoration:underline}
.tl-table.numbered .tl-camp .ext{color:var(--brand);font-weight:700}
.tl-total{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;padding:0 6px 0 12px;border-left:2px solid var(--line-strong);white-space:nowrap}
th.tl-total{color:var(--muted);font-size:11px}

/* ---------- monthly: top summary table + sortable month header ---------- */
.summary-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.summary-table th,.summary-table td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:right;font-size:11.5px}
.summary-table th:first-child,.summary-table td:first-child{text-align:left}
.summary-table thead th{color:var(--muted);font-size:11px;background:var(--surface-2)}
.sum-cell span{display:block}
.s-sp{color:var(--muted);font-weight:600}
.s-om{color:var(--brand);font-weight:700}
.s-wi{font-weight:800}
.s-wi.pos{color:var(--good)} .s-wi.neg{color:var(--bad)}
.sum-cell.sum-total,.summary-table th.sum-tot-h{border-left:2px solid var(--line-strong);background:var(--surface-2)}
.summary-table tbody tr:hover td{background:var(--surface-2)}
.sum-legend{margin:9px 2px 0;font-size:12px}.sum-legend b{margin-right:10px}
th.m-sort{cursor:pointer;user-select:none}
th.m-sort::after{content:" ⇅";color:var(--line-strong);font-size:10px}
th.m-sort[data-sort-dir=asc]::after{content:" ↑";color:var(--brand)}
th.m-sort[data-sort-dir=desc]::after{content:" ↓";color:var(--brand)}

/* ---------- monthly: per-shop period comparison strip ---------- */
.period-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pc-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.pc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pc-label small{text-transform:none;font-weight:600;font-size:10px}
.pc-vals{display:flex;flex-direction:column;gap:1px;font-variant-numeric:tabular-nums}
.pc-vals .pc-a{font-size:12px;color:var(--muted)}
.pc-vals .pc-b{font-size:16px;font-weight:800;color:var(--ink)}
.pc-vals .pc-b.good,.pc-vals .pc-a.good{color:var(--good)}
.pc-vals .pc-b.bad,.pc-vals .pc-a.bad{color:var(--bad)}
.pc-d{margin-top:2px}
.pc-d .pill{font-size:13px;padding:2px 10px}
.pc-d .dabs{display:inline;margin-left:7px;font-size:11px;color:var(--muted);font-weight:600}
.pc-hack-note{font-size:12px;font-weight:700;color:var(--bad);background:#fbe7e5;padding:5px 11px;border-radius:8px;align-self:center}

/* ---------- monthly: top comparison summary (msum) ---------- */
.msum-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.msum-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:8px 6px;text-align:right;border-bottom:2px solid var(--line);white-space:nowrap}
.msum-table th.msum-shop-h,.msum-table th.msum-metric-h{text-align:left}
.msum-table th.msum-tot-h{text-align:right;color:var(--ink);border-left:2px solid var(--line)}
.msum-shop{vertical-align:middle;padding:10px 10px 10px 4px;border-right:1px solid var(--line)}
.msum-shop small{display:block;font-size:10px;color:var(--muted);font-weight:600}
.msum-metric{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;padding:6px 12px 6px 10px;text-align:left;white-space:nowrap}
.msum-cell{padding:6px 7px;text-align:right;vertical-align:middle;min-width:92px}
.yline{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;line-height:1.3}
.yr{font-size:9px;font-weight:800;color:#fff;background:var(--muted);border-radius:4px;padding:1px 5px;letter-spacing:.02em;flex:none}
.yline.ya .yr,.yr-a{background:#9aa4b2}
.yline.yb .yr,.yr-b{background:#3b5bdb}
.yline .yv{font-variant-numeric:tabular-nums}
.yline.ya .yv{font-size:12px;color:var(--muted);font-weight:600}
.yline.yb .yv{font-size:14.5px;color:var(--ink);font-weight:800}
.yline.yb .yv.pos{color:var(--good)} .yline.yb .yv.neg{color:var(--bad)}
.ydelta{text-align:right;margin-top:2px}
.ydelta .pill.sm{font-size:10px;padding:1px 6px;display:inline-block}
.msum-total{border-left:2px solid var(--line);padding-left:12px;min-width:120px}
.msum-total .yline.yb .yv{font-size:16px}
.msum-total .yline.ya .yv{font-size:12.5px}
.msum-total .ydelta{margin-top:3px}
.msum-total .ydelta .pill{font-size:11px;padding:1px 7px}
.msum-total .ydelta .dabs{display:block;font-size:10px;color:var(--muted);margin:2px 0 0}
/* distinct colour band per metric so Spend / Omzet / Winst never blur together */
.msum-row.m-spend{background:#fff3ec}      /* spend  = warm oranje */
.msum-row.m-revenue{background:#eef4ff}    /* omzet  = blauw */
.msum-row.m-net{background:#eff8f1}         /* winst  = groen */
.msum-metric{border-left:3px solid transparent}
.msum-row.m-spend .msum-metric{color:#c2410c;border-left-color:#f59e0b}
.msum-row.m-revenue .msum-metric{color:#2563eb;border-left-color:#3b82f6}
.msum-row.m-net .msum-metric{color:#15803d;border-left-color:#22c55e}
/* keep the shop column + separators neutral */
.msum-shop{background:var(--surface)}
.msum-table .shop-first td{border-top:1px solid var(--line-strong)}
/* grand-total rows: deeper tint of the same hue + heavy divider */
.msum-table tfoot .m-spend{background:#ffe1cf}
.msum-table tfoot .m-revenue{background:#dde9ff}
.msum-table tfoot .m-net{background:#d7efdc}
.msum-table tfoot .msum-shop{background:#f3f5f9}
.msum-table tfoot .shop-first td{border-top:3px solid var(--line-strong)}
.msum-table tfoot .msum-shop b{font-size:13px}
.msum-table tfoot .msum-v{font-weight:800}


/* Omzet naar orderstatus: laat zien welk deel van de omzet nog niet betaald is. */
.status-samenvatting { display: flex; gap: 8px; flex-wrap: wrap; }
.status-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel-alt, #f4f5f7); white-space: nowrap; }
.status-chip b { font-weight: 600; }
.status-chip.betaald { background: rgba(15, 123, 85, 0.10); color: #0f7b55; }
.status-chip.onbetaald { background: rgba(200, 140, 20, 0.12); color: #8a6100; }
.status-chip.buiten { background: rgba(120, 120, 130, 0.12); color: #5c6270; }
.status-rij.onbetaald td { background: rgba(200, 140, 20, 0.05); }
.status-rij.buiten td { color: var(--muted, #6b7280); }
.status-disclosure { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 6px 2px 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; text-align: left; }
.status-disclosure:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.status-disclosure > svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s cubic-bezier(.23,1,.32,1); }
.status-disclosure[aria-expanded="true"] > svg { transform: rotate(90deg); }
.status-detail-row[hidden] { display: none !important; }
.status-detail-row > td { padding: 0 !important; background: color-mix(in srgb, var(--brand) 2%, var(--surface)); }
.status-detail-shell { padding-left: 42px; }
.status-order-site { font-size: 10px; white-space: nowrap; }
.status-totaal td { border-top: 2px solid var(--border, #e4e6eb); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.ja { background: rgba(15, 123, 85, 0.12); color: #0f7b55; }
.tag.wacht { background: rgba(200, 140, 20, 0.14); color: #8a6100; }
.tag.nee { background: rgba(120, 120, 130, 0.12); color: #5c6270; }
@media (prefers-color-scheme: dark) {
  .status-chip { background: rgba(255,255,255,0.06); }
  .status-chip.betaald { background: rgba(45, 190, 130, 0.14); color: #56d7a0; }
  .status-chip.onbetaald { background: rgba(230, 170, 40, 0.16); color: #f0c057; }
  .status-chip.buiten { background: rgba(255,255,255,0.08); color: #a8aebb; }
  .tag.ja { background: rgba(45, 190, 130, 0.16); color: #56d7a0; }
  .tag.wacht { background: rgba(230, 170, 40, 0.18); color: #f0c057; }
  .tag.nee { background: rgba(255,255,255,0.08); color: #a8aebb; }
}
.status-ruw { font-size: 11px; color: var(--muted, #6b7280); font-weight: 400; margin-left: 6px; }
@media (max-width: 760px) {
  .status-detail-row { padding: 0 !important; }
  .status-detail-row td:before { display: none; }
  .status-detail-shell { padding: 14px 10px; }
}
/* Onbetaalde omzet in de omzetkaart: opvallend genoeg om te zien, niet alarmerend. */
.kpi-details .onbetaald-regel b.wacht { color: #8a6100; }
.sub-wacht { color: #8a6100; font-weight: 600; }
/* Op de blauwe accentkaart is donker amber onleesbaar; daar licht amber. */
.kpi.accent .kpi-details .onbetaald-regel b.wacht,
.kpi.accent .sub-wacht { color: #ffd98a; }
@media (prefers-color-scheme: dark) {
  .kpi-details .onbetaald-regel b.wacht { color: #f0c057; }
  .sub-wacht { color: #f0c057; }
}