/* Extra stijl voor de module marketing. Alleen deze module schrijft hier.
   Gebruik eerst de klassen uit base.css; voeg hier alleen toe wat echt mist.
   Geen eigen kleuren — alles via de variabelen uit :root. */

/* ─── Filterbalk van het Prestatie-tabblad ───────────────────── */
/* Drie keuzes naast elkaar: venster, tijdstap, klant. Ze stonden eerst in de
   paginakop, maar daar passen ze op een telefoon niet en staan ze los van wat
   ze filteren. Elke keuze houdt zijn eigen label boven zich, zodat je zonder
   te klikken ziet wat er ingesteld staat. */
.mkt-filters{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;margin-bottom:18px}
.mkt-filter{display:flex;flex-direction:column;gap:5px;min-width:0}
.mkt-filter > .label{margin:0}
.mkt-filter.grow{flex:1 1 190px;max-width:320px}
.mkt-filter select{width:100%}
/* De segmentknoppen mogen wikkelen op een smal scherm in plaats van de balk
   uit elkaar te duwen. */
.mkt-filters .seg{flex-wrap:wrap}

/* Een tijdstap zonder één advertentieregel: wel tonen (een stille week is
   informatie), maar gedempt, zodat de regels mét uitgaven het beeld bepalen. */
table.tbl tbody tr.mkt-stil > td{color:var(--muted)}
table.tbl tbody tr.mkt-stil b{font-weight:500;color:var(--txt-2)}

/* ─── Weekvergelijking: deze week tegen vorige week ──────────── */
/* Sectievlak (.vlak uit base.css) met drie cijfers. Het verschil krijgt
   zijn kleur van CRM.plusMin — hier dus geen eigen kleuren. */
.mkt-week{margin-bottom:18px}
.mkt-week-r{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:10px}
.mkt-week-c{display:flex;flex-direction:column;gap:3px}
.mkt-week-c b{font-size:22px;font-weight:600;color:var(--ink);line-height:1.2}
.mkt-week-d{font-size:11.5px;color:var(--muted);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

/* ─── Adviesregels van de waakhond ───────────────────────────── */
.mkt-advies{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 24px;border-bottom:1px solid var(--line);
}
.mkt-advies:last-child{border-bottom:none}
.mkt-advies > .dot{margin-top:6px}
.mkt-a-t{flex:1;min-width:0}
.mkt-a-t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.mkt-a-t .meta{line-height:1.45}
.mkt-a-k{flex:0 0 auto;padding-top:2px}

/* ─── Uitklapbare campagnetabel ──────────────────────────────── */
.mkt-caret{
  display:inline-block;width:14px;color:var(--muted);font-size:10px;
  transition:transform .12s;transform-origin:center;
}
.mkt-caret.op{transform:rotate(90deg)}
/* Dieper in de boom = dieper vlak, volgens de ladder uit base.css:
   card (wit) → card-2 → well. */
.mkt-r1{background:var(--card-2)}
.mkt-r2{background:var(--well)}
table.tbl tbody tr.clickable.mkt-r1:hover{background:var(--well)}
.mkt-n1{padding-left:28px !important}
.mkt-n2{padding-left:56px !important;color:var(--txt-2)}
/* Totaalregel — zelfde vorm als de tabellen in Performance. */
.mkt-tbl tfoot td{background:var(--card-2);border-top:1px solid var(--line);font-weight:600;padding:10px 16px}

/* ─── Strook per dag, week of maand ──────────────────────────── */
/* De strook toont nu tot 31 staven in plaats van vast 14. Op een breed scherm
   passen die naast elkaar; op een telefoon zou elke staaf 8px worden en dan
   zegt hij niets meer. Daarom houdt een staaf een leesbare minimumbreedte en
   schuift de strook horizontaal binnen zijn eigen kader — de pagina zelf
   schuift nooit mee. */
.mkt-strook{overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.mkt-dagen{display:flex;gap:7px;align-items:flex-end;min-width:100%}
.mkt-dag{flex:1 1 0;min-width:16px;display:flex;flex-direction:column;align-items:center;gap:5px}
.mkt-dagtop{font-size:11px;color:var(--txt-2);height:15px;line-height:15px}
.mkt-dagbar{
  width:100%;height:84px;background:var(--card-2);border-radius:5px;
  display:flex;align-items:flex-end;overflow:hidden;
}
.mkt-dagbar > i{display:block;width:100%;background:var(--olive-l);border-radius:5px 5px 0 0}
.mkt-dag.we .mkt-dagbar > i{background:var(--line-2)}
.mkt-daglbl{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.25}
.mkt-daglbl b{display:block;font-weight:600;color:var(--txt-2)}

/* ─── Rendement: cohorten van lead tot plaatsing ─────────────── */
/* Elk blok is een eigen kaart onder elkaar; alleen de tussenruimte staat
   hier, zodat de HTML geen losse style-attributen hoeft te dragen. */
.mkt-kaart{margin-bottom:18px}
.mkt-uitleg{margin-bottom:18px}
.mkt-defs{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:14px}
.mkt-def{display:flex;gap:12px;align-items:baseline;font-size:13px;line-height:1.5}
.mkt-def b{flex:0 0 190px;font-weight:600;color:var(--ink)}
.mkt-def span{flex:1;min-width:0;color:var(--txt-2);max-width:72ch}

/* De gekozen maand in de cohorttabel: één rustige markering, geen kleurvlak. */
table.tbl tbody tr.mkt-op > td{background:var(--card-2)}
table.tbl tbody tr.mkt-op > td:first-child{box-shadow:inset 2px 0 0 var(--olive)}

.mkt-cohortkop{margin-bottom:18px}
.mkt-cohortkop .h2{font-size:16px}

/* Trechter: label links, balk in het midden, aantal rechts. Onder elkaar
   leest een trechter van acht stappen beter dan pijltjes naast elkaar. */
.mkt-tr{display:flex;flex-direction:column;gap:2px}
.mkt-tr-r{display:flex;align-items:center;gap:16px;padding:7px 0;border-bottom:1px solid var(--line)}
.mkt-tr-r:last-child{border-bottom:none}
.mkt-tr-l{flex:0 0 240px;display:flex;flex-direction:column;gap:1px;min-width:0}
.mkt-tr-l b{font-size:13.5px;font-weight:600;color:var(--ink)}
.mkt-tr-b{flex:1;min-width:60px;height:10px;background:var(--card-2);border-radius:99px;overflow:hidden}
.mkt-tr-b > i{display:block;height:100%;background:var(--line-2);border-radius:99px}
.mkt-tr-b > i.goed{background:var(--olive-l)}
.mkt-tr-b > i.let{background:var(--amber)}
.mkt-tr-n{flex:0 0 172px;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;text-align:right}
.mkt-tr-n .btn.sub{font-size:15px;padding:2px 8px;color:var(--ink)}
.mkt-tr-r.leeg .mkt-tr-l b{color:var(--txt-2);font-weight:500}

/* Datakwaliteit — rustig blok, geen alarmkleuren. */
.mkt-gat{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}
.mkt-gat:last-child{border-bottom:none}
.mkt-gat b{font-size:13.5px;font-weight:600;color:var(--ink)}
.mkt-gat .meta{line-height:1.5;max-width:82ch}
.mkt-gat .btn{align-self:flex-start;margin-top:2px}

/* ─── Kanaalkleur ────────────────────────────────────────────── */
/* De kleur zelf komt uit mkt_kanalen en wordt inline gezet — dat is data,
   geen ontwerpkeuze. Alleen de vorm staat hier. */
.mkt-kdot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:middle;flex:0 0 auto;
}
/* Kleurkiezer en weekdoel in de kanalentabel: zo klein dat ze de regel niet
   uit elkaar duwen, met dezelfde rand als de andere invoervelden. */
.mkt-kleur{
  width:30px;height:28px;padding:2px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--card);cursor:pointer;
}
.mkt-doel{width:64px;text-align:right;padding:5px 8px;font-variant-numeric:tabular-nums}

/* ─── Marketingtaken ─────────────────────────────────────────── */
.mkt-taak-g{margin-bottom:14px}
.mkt-taak-g:last-child{margin-bottom:0}
.mkt-taak-g > .label{display:block;margin-bottom:5px}
.mkt-taak{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.mkt-taak:last-child{border-bottom:none}
.mkt-taak > input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.mkt-taak-t{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.mkt-taak.af .mkt-taak-t{text-decoration:line-through;color:var(--muted)}
.mkt-taak-x{
  flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:13px;line-height:1;padding:3px 5px;border-radius:var(--r-s);
}
.mkt-taak-x:hover{color:var(--red);background:var(--red-bg)}

/* ─── Learnings-bibliotheek ──────────────────────────────────── */
.mkt-learn{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 24px;border-bottom:1px solid var(--line);
}
.mkt-learn:last-child{border-bottom:none}
.mkt-learn b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45}

/* De stijl voor de weekthema's en de inspiratiekaarten (.mkt-thema,
   .mkt-ideerij, .mkt-idee) is op 31 jul 2026 verdwenen samen met het tabblad
   Ideeën. Bedenken en schrijven hoort in het marketingbord; dit scherm stuurt. */

/* ─── Advertentie of opvolging? ───────────────────────────────
   Twee balken onder de trechter, in dezelfde vorm als een trechterregel maar
   met een eigen kader eromheen: het is een conclusie over de trechter, geen
   negende stap erin. Geen eigen kleuren — de balk is dezelfde neutrale balk
   als in .mkt-tr-b, want "hoog" is hier niet goed of slecht op zichzelf. */
.mkt-kw{
  margin-top:16px;padding:14px 16px;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
}
.mkt-kw > .label{display:block;margin:0 0 10px}
.mkt-kw-r{display:flex;align-items:center;gap:16px;padding:6px 0}
.mkt-kw-l{flex:0 0 230px;display:flex;flex-direction:column;gap:1px;min-width:0}
.mkt-kw-l b{font-size:13.5px;font-weight:600;color:var(--ink)}
.mkt-kw-n{flex:0 0 54px;text-align:right;font-size:15px;font-weight:600;color:var(--ink)}

/* ─── Verantwoording onder aan het Prestatie-tabblad ──────────
   Herkomst, de leadcontrole en de vergelijking met de bank stonden tussen de
   cijfers in en duwden de grafiek van het scherm. Ze staan nu onderaan, achter
   een streep, zodat zichtbaar is dat het een andere soort blok is. */
.mkt-verantwoording{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.mkt-verantwoording > .label{display:block;margin:0}

/* ─── Vacatures: waar krijgt een vacature geen instroom? ────── */
/* De drie gatkolommen zijn smal en mogen niet meegroeien met de tabel; de
   vacaturenaam pakt de ruimte die overblijft. */
.mkt-vac td:first-child{min-width:180px}
.mkt-vac th:nth-child(3),.mkt-vac th:nth-child(4),.mkt-vac th:nth-child(5),
.mkt-vac td:nth-child(3),.mkt-vac td:nth-child(4),.mkt-vac td:nth-child(5){white-space:nowrap}

/* Breed scherm (zie de ladder in base.css): het team staat om één groot
   scherm. Extra breedte vullen we met méér inhoud naast elkaar — de
   begrippenlijst in twee kolommen, de datagaten in twee kolommen — nooit
   met dezelfde inhoud uitgerekt. Lopende tekst houdt zijn eigen ch-rem. */
@media (min-width:1500px){
  .mkt-defs{grid-template-columns:1fr 1fr;gap:8px 32px}
  .mkt-gaten .card-b{column-count:2;column-gap:34px}
  .mkt-gat{break-inside:avoid}
  /* De trechter zou op een teamscherm één uitgerekte balk per regel worden.
     In plaats daarvan zetten we de duiding ernaast: zelfde hoogte, meer
     inhoud, geen uitgerekte balken. */
  .mkt-trechter .card-b{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:26px;align-items:start}
  .mkt-trechter .card-b > .mkt-kw{margin-top:0}
  /* In twee kolommen is er geen ruimte voor een label van 230px naast de balk;
     dan zetten we het label boven de balk, net als op een telefoon. */
  .mkt-trechter .mkt-kw-r{flex-wrap:wrap;gap:4px 12px}
  .mkt-trechter .mkt-kw-l{flex-basis:100%}
  .mkt-trechter .mkt-kw-n{flex:0 0 auto;margin-left:auto}
}

@media (max-width:900px){
  /* Onder 900px staan de drie filters onder elkaar; de klantkeuze mag dan de
     volle breedte pakken, anders wordt een lange klantnaam afgekapt. */
  .mkt-filters{gap:12px}
  .mkt-filter{flex-basis:100%}
  .mkt-filter.grow{max-width:none}
  .mkt-advies{flex-wrap:wrap}
  /* Onder 900px is de trechter twee regels: label boven, balk en aantal
     eronder. De balk mag nooit onder de 60px komen, anders zegt hij niets. */
  .mkt-tr-r{flex-wrap:wrap;gap:6px 12px}
  .mkt-tr-l{flex-basis:100%}
  .mkt-tr-n{flex:0 0 auto;margin-left:auto}
  .mkt-def{flex-direction:column;gap:1px}
  .mkt-def b{flex-basis:auto}
  .mkt-a-k{width:100%;padding-left:19px}
  .mkt-dagen{gap:4px}
  .mkt-daglbl span{display:none}
  .mkt-learn{padding-left:16px;padding-right:16px}
  /* Zelfde ingreep als bij de trechter: label boven, balk en percentage
     eronder. Onder 900px is 230px voor het label meer dan de halve regel. */
  .mkt-kw-r{flex-wrap:wrap;gap:4px 12px}
  .mkt-kw-l{flex-basis:100%}
  .mkt-kw-n{flex:0 0 auto;margin-left:auto}
}

/* ─── Lopende campagnes (overzicht bovenaan Prestatie) ───────── */
/* Periodekeuze en actief/alles rechts in de kaartkop; op een telefoon
   wikkelen ze onder de titel. */
.mkt-cp{margin-bottom:18px}
.mkt-cp-kies{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mkt-cp-kies select{width:auto;min-width:170px}
.mkt-cp-kies input[type=date]{width:auto}
.mkt-cp-kies .seg{flex-wrap:wrap}
/* Elf kolommen: cijfers niet laten breken, de tabel schuift binnen zijn
   eigen kader (.tblwrap) en de pagina blijft staan. */
.mkt-cptbl th,.mkt-cptbl td{white-space:nowrap}
.mkt-cptbl td:first-child b{white-space:normal;display:inline-block;min-width:150px;max-width:260px}
/* Status is alleen-lezen: een stip en een woord, geen schakelaar. */
.mkt-cst{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-2)}
.mkt-cst .dot{background:var(--line-2)}
.mkt-cst.aan{color:var(--ink)}
.mkt-cst.aan .dot{background:var(--olive)}
.mkt-cst.review .dot{background:var(--blue)}
.mkt-cst.fout{color:var(--red)}
.mkt-cst.fout .dot{background:var(--red)}
.mkt-cst.afgeleid{font-style:italic}
.mkt-cp-voet{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mkt-cp-voet > .meta{flex:1 1 320px}
.mkt-a-taak{align-self:center;white-space:nowrap}
@media (max-width:640px){
  .mkt-cp-kies{width:100%}
  .mkt-cp-kies select{flex:1 1 100%}
}

/* ── Bryans Prestatie-blokken (28 okt 2026): meters, video, agent-advies, spelregels ──
   Drie kleuren met dezelfde grenzen als de agent: goed (olijf), twijfel (amber), slecht (rood). */
.mkt-tbl td.m-goed{color:var(--olive);background:color-mix(in srgb,var(--olive) 12%,transparent);font-weight:700}
.mkt-tbl td.m-matig{color:color-mix(in srgb,#c98a14 75%,#000);background:color-mix(in srgb,#c98a14 14%,transparent);font-weight:700}
.mkt-tbl td.m-slecht{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);font-weight:700}

.mkt-rl{overflow-x:auto;margin-bottom:14px}
.mkt-rl table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mkt-rl th,.mkt-rl td{padding:6px 10px;text-align:center;border-bottom:1px solid var(--line)}
.mkt-rl thead th{background:var(--bg-2,#f6f7f2);vertical-align:top;font-weight:600}
.mkt-rl thead th span{display:block;font-size:11px;font-weight:400;color:var(--txt-2)}
.mkt-rl tbody th{text-align:left;white-space:nowrap}
.mkt-rl tbody td{font-weight:700}
.mkt-rl tr.m-goed>*{background:color-mix(in srgb,var(--olive) 12%,#fff);color:var(--olive)}
.mkt-rl tr.m-matig>*{background:color-mix(in srgb,#c98a14 14%,#fff);color:color-mix(in srgb,#c98a14 75%,#000)}
.mkt-rl tr.m-slecht>*{background:color-mix(in srgb,var(--red) 10%,#fff);color:var(--red);border-bottom:0}

.mkt-vtbl tr.mkt-vcamp td{background:var(--ink);color:#fff;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:12px;padding:7px 12px}
.mkt-vtbl tr.mkt-vset td{background:color-mix(in srgb,var(--olive) 9%,#fff)}
.mkt-vtbl tr.mkt-vad td:first-child{padding-left:30px;position:relative}
.mkt-vtbl tr.mkt-vad td:first-child::before{content:"";position:absolute;left:14px;top:0;bottom:50%;width:9px;border-left:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2)}
.mkt-vcurve{display:inline-flex;align-items:flex-end;gap:2px;height:24px}
.mkt-vcurve i{width:7px;background:#6fa03c;border-radius:2px 2px 0 0}

.mkt-ar-kort{font-size:14px;line-height:1.5;background:color-mix(in srgb,var(--olive) 8%,#fff);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.mkt-ar-camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;margin-bottom:12px}
.mkt-ar-camp{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:12.5px;border:1px solid var(--line);border-radius:9px;padding:6px 9px}
.mkt-ar-camp .meta{flex-basis:100%}
.mkt-ar-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:1px 8px;color:#fff;background:#8a917c}
.mkt-ar-lbl.m-goed{background:var(--olive)}.mkt-ar-lbl.m-matig{background:#c98a14}.mkt-ar-lbl.m-slecht{background:var(--red)}
.mkt-ar-groep{margin:12px 0}
.mkt-ar-groep>.label{margin-bottom:6px}
.mkt-ar-kaart{border:1px solid var(--line);border-left:5px solid #8a917c;border-radius:10px;padding:8px 11px;margin-bottom:7px;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:3px}
.mkt-ar-kaart.m-slecht{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 4%,#fff)}
.mkt-ar-kaart.m-matig{border-left-color:#c98a14;background:color-mix(in srgb,#c98a14 5%,#fff)}
.mkt-ar-kaart.m-goed{border-left-color:var(--olive);background:color-mix(in srgb,var(--olive) 5%,#fff)}
.mkt-ar-kk{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mkt-ar-doen{background:#fff;border:1px dashed var(--line-2);border-radius:7px;padding:4px 8px;margin:2px 0 4px}
.mkt-ar-blok{border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-top:8px;font-size:13px}
.mkt-ar-blok ul{margin:4px 0 0;padding-left:18px}
.mkt-ar-blok.strat{background:color-mix(in srgb,var(--olive) 8%,#fff)}
.mkt-ar-blok.vraag{background:color-mix(in srgb,#c98a14 8%,#fff)}
.mkt-ar-blok textarea{width:100%;margin-top:6px}

.mkt-sr>summary{cursor:pointer;list-style:none}
.mkt-sr>summary::-webkit-details-marker{display:none}
.mkt-sr>summary .h2::before{content:"▸ ";color:var(--txt-2)}
.mkt-sr[open]>summary .h2::before{content:"▾ "}
.mkt-sr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;font-size:12.5px}
.mkt-sr-grid ul{margin:4px 0 12px;padding-left:18px}
.mkt-sr-grid li{margin:3px 0}
.mkt-sr-grid .tbl{font-size:12px;margin:4px 0}

/* Advies per advertentie: per campagne een tabel, regel gekleurd naar niveau */
.mkt-ar-cblok{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.mkt-ar-ckop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:9px 12px;background:var(--bg-2,#f6f7f2);border-bottom:1px solid var(--line)}
.mkt-ar-ckop .meta{flex-basis:100%}
.mkt-ar-tbl td{vertical-align:top}
.mkt-ar-tbl tr.mkt-ar-r:not(.mkt-ar-tekst)>td{border-bottom:0;padding-bottom:2px}
.mkt-ar-tbl tr.mkt-ar-tekst>td{padding-top:0}
.mkt-ar-tregel{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;white-space:normal}
.mkt-ar-tbl .mkt-ar-wat{font-size:12.5px;line-height:1.45;max-width:80ch}
.mkt-ar-tbl tr.mkt-ar-r>td:first-child{border-left:4px solid #8a917c}
.mkt-ar-tbl tr.mkt-ar-r.m-slecht>td:first-child{border-left-color:var(--red)}
.mkt-ar-tbl tr.mkt-ar-r.m-matig>td:first-child{border-left-color:#c98a14}
.mkt-ar-tbl tr.mkt-ar-r.m-goed>td:first-child{border-left-color:var(--olive)}
.mkt-ar-tbl .mkt-ar-doen{margin:4px 0 0}
.mkt-ar-tbl tr:not(.mkt-ar-tekst)>td:nth-child(2){min-width:190px}