/* ==========================================================================
   Klaargezet CRM — designsysteem v4 "huisstijl klaargezet.be"
   Tokens één-op-één uit siteroot/index.html: inkt/tekst/stil/papier/wash,
   flessengroen accent, Poppins (koppen) + Figtree (lezen), zachte schaduwen.
   Donkere inkt-zijbalk op desktop, bottom-tabbar op mobiel, licht + donker.
   Componenten gebruiken uitsluitend tokens.
   ========================================================================== */

/* — Self-hosted fonts (zelfde woff2's als de verkooppagina, geen CDN) — */
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 500 latin-ext / latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 600 latin-ext / latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 latin-ext / latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — palet (licht) — rechtstreeks van klaargezet.be — */
  --bg:            #F4F7F3;   /* wash: groenige paginachtergrond          */
  --bg-subtle:     #ECF1EC;   /* ingezonken vlakken binnen kaarten        */
  --card:          #FFFFFF;   /* papier                                   */
  --card-elev:     #FFFFFF;   /* zwevende oppervlakken (tabbar, sheet)    */
  --line:          #E2E7E2;   /* lijn                                     */
  --line-strong:   #C9D3CB;
  --fg:            #17251F;   /* inkt: koppen, primaire tekst             */
  --fg-soft:       #3A463F;   /* tekst: lopende tekst                     */
  --muted:         #6B766F;   /* stil: bijschriften                       */
  --row-hover:     rgba(23, 37, 31, .035);

  /* — accent (flessengroen) — */
  --accent:        #166B47;
  --accent-hover:  #0F5236;   /* accent-donker */
  --accent-active: #0C4630;
  --accent-fg:     #FFFFFF;
  --accent-soft:   #E3EFE7;   /* accent-licht */
  --accent-ring:   rgba(22, 107, 71, .30);

  /* — statuskleuren (bg + fg-paren, AA op hun vlak, groen-familie) — */
  --ok-bg:     #E3EFE7;  --ok-fg:     #166B47;
  --warn-bg:   #F7EDD7;  --warn-fg:   #7E5308;
  --danger-bg: #F9E8E5;  --danger-fg: #A93A2C;
  --info-bg:   #E4EDF5;  --info-fg:   #2D5E8E;
  --neutral-bg:#ECEFEC;  --neutral-fg:#57625B;

  --danger:        #A93A2C;
  --danger-line:   #E3B4AB;

  /* — zijbalk: donker inkt-groen, ook in lichte modus (merkvlak) — */
  --sb-bg:      #17251F;
  --sb-lijn:    #26352C;
  --sb-tekst:   #C7D2CA;
  --sb-stil:    #7E8C83;
  --sb-hover:   rgba(255, 255, 255, .055);
  --sb-actief:  #166B47;
  --sb-actief-fg: #FFFFFF;
  --sb-merk:    #8FC3A8;    /* luifel-icoon, zoals de site-footer */

  /* — vorm — */
  --r-sm: 5px;  --r: 8px;  --r-lg: 10px;  --r-xl: 14px;  --r-pill: 999px;

  /* — schaduw (zacht, zoals de verkooppagina) — */
  --shadow-sm: 0 1px 2px rgba(23, 37, 31, .05);
  --shadow:    0 4px 20px rgba(23, 37, 31, .08);
  --shadow-md: 0 10px 34px rgba(23, 37, 31, .14);

  /* — typografie — */
  --kop:  'Poppins', system-ui, sans-serif;
  --lees: 'Figtree', system-ui, sans-serif;

  /* — schaal — */
  --sb: 15rem;              /* zijbalkbreedte desktop  */
  --tab-h: 3.4rem;          /* tabbarhoogte mobiel     */
  --content-max: 82rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* afgeleid uit dezelfde familie: diep groenzwart als vlak,
       accent iets lichter voor contrast — alle tekst AA */
    --bg:          #0E1512;
    --bg-subtle:   #18221C;
    --card:        #141D18;
    --card-elev:   #1A251F;
    --line:        #24312A;
    --line-strong: #36453C;
    --fg:          #E8EEE9;
    --fg-soft:     #C2CDC5;
    --muted:       #93A198;
    --row-hover:   rgba(232, 238, 233, .045);

    --accent:        #7BCBA3;   /* links & actieve tekst: licht flessengroen */
    --accent-hover:  #93D6B4;
    --accent-active: #A8DEC2;
    --accent-fg:     #0E1512;   /* donkere tekst op lichtgroene knoppen */
    --accent-soft:   rgba(123, 203, 163, .14);
    --accent-ring:   rgba(123, 203, 163, .38);

    --ok-bg:     rgba(123, 203, 163, .15); --ok-fg:     #7BCBA3;
    --warn-bg:   rgba(222, 178, 82, .14);  --warn-fg:   #DEB252;
    --danger-bg: rgba(230, 126, 109, .14); --danger-fg: #E68A7B;
    --info-bg:   rgba(126, 168, 208, .15); --info-fg:   #8FB6D9;
    --neutral-bg:rgba(147, 161, 152, .14); --neutral-fg:#AEBAB2;

    --danger:      #E68A7B;
    --danger-line: rgba(230, 138, 123, .45);

    --sb-bg:      #0B110E;
    --sb-lijn:    #1D2822;
    --sb-tekst:   #C2CDC5;
    --sb-stil:    #78877E;
    --sb-hover:   rgba(255, 255, 255, .05);
    --sb-actief:  #166B47;
    --sb-actief-fg: #FFFFFF;
    --sb-merk:    #8FC3A8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 4px 20px rgba(0, 0, 0, .5);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .65);
  }
}

/* ==========================================================================
   Basis
   ========================================================================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 .875rem/1.55 var(--lees);
  background: var(--bg);
  color: var(--fg-soft);
  -webkit-font-smoothing: antialiased;
  /* clip (niet hidden): geen horizontale paginascroll, zonder een
     scroll-container te maken die position:sticky zou breken */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--kop); color: var(--fg); line-height: 1.25; }

strong { color: var(--fg); }

svg { flex: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: .5rem;
  z-index: 100;
  background: var(--card-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .5rem .8rem;
  box-shadow: var(--shadow-md);
}
.skip-link:focus-visible { left: .5rem; }

/* ==========================================================================
   Shell — donkere inkt-zijbalk (desktop) + bottom-tabbar (mobiel)
   ========================================================================== */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sb);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 1rem .65rem .8rem;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-lijn);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .55rem;
  color: #fff;
  font-family: var(--kop);
  font-weight: 600;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; color: var(--sb-merk); }
.brand-name { font-size: 1.02rem; letter-spacing: -.01em; }

.mainnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: .9rem;
  flex: 1;
}
.navgroep {
  margin: 1rem .55rem .35rem;
  font-family: var(--kop);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sb-stil);
}
.mainnav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.1rem;
  padding: .32rem .55rem;
  border-radius: var(--r);
  font-size: .85rem;
  font-weight: 500;
  color: var(--sb-tekst);
  white-space: nowrap;
}
.mainnav a svg { width: 16px; height: 16px; color: var(--sb-stil); }
.mainnav a:hover {
  background: var(--sb-hover);
  color: #fff;
  text-decoration: none;
}
.mainnav a:hover svg { color: var(--sb-merk); }
.mainnav a.active {
  background: var(--sb-actief);
  color: var(--sb-actief-fg);
  font-weight: 600;
}
.mainnav a.active svg { color: #fff; }
.mainnav a:focus-visible { outline-color: var(--sb-merk); }

.navteller {
  margin-left: auto;
  display: inline-block;
  min-width: 1.15rem;
  text-align: center;
  background: var(--sb-merk);
  color: var(--sb-bg);
  border-radius: var(--r-pill);
  font-size: .64rem;
  font-weight: 700;
  padding: .08rem .32rem;
  font-variant-numeric: tabular-nums;
}
.mainnav a.active .navteller { background: #fff; color: var(--accent-hover); }

.sidebar-voet {
  margin-top: .8rem;
  padding: .6rem .55rem 0;
  border-top: 1px solid var(--sb-lijn);
  color: var(--sb-stil);
  font-size: .7rem;
  line-height: 1.45;
}

/* mobiele topregel (niet sticky: scrollt gewoon mee) */
.mobiletop { display: none; }

/* bottom-tabbar + "Meer"-sheet: puur CSS via checkbox */
.tabbar { display: none; }
.meer-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 1023px) {
  .sidebar { display: none; }

  .mobiletop {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem .15rem;
  }
  .mobiletop .brand { padding: 0; color: var(--fg); }
  .mobiletop .brand svg { color: var(--accent); }

  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + .5rem); }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--card-elev);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar > a,
  .tab-meer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tab-h);
    font-family: var(--kop);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar > a:hover { text-decoration: none; }
  .tabbar svg { width: 20px; height: 20px; }
  .tabbar > a.active { color: var(--accent); font-weight: 600; }
  .tabteller {
    position: absolute;
    top: .28rem;
    left: calc(50% + .35rem);
    min-width: 1rem;
    text-align: center;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--r-pill);
    font-size: .58rem;
    font-weight: 700;
    padding: .05rem .28rem;
    font-variant-numeric: tabular-nums;
  }

  .meer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(14, 21, 18, .45);
  }
  .meer-toggle:checked ~ .meer-backdrop { display: block; }
  .meer-toggle:focus-visible ~ .tab-meer {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .meer-sheet {
    position: fixed;
    left: .6rem; right: .6rem;
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + .55rem);
    z-index: 56;
    background: var(--card-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    padding: .4rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .meer-toggle:checked ~ .meer-sheet {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .meer-sheet a {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.9rem;
    padding: .55rem .7rem;
    border-radius: var(--r);
    font-size: .9rem;
    font-weight: 500;
    color: var(--fg-soft);
  }
  .meer-sheet a svg { width: 17px; height: 17px; color: var(--muted); }
  .meer-sheet a:hover { background: var(--row-hover); text-decoration: none; }
  .meer-sheet a.active { background: var(--accent-soft); color: var(--accent); }
  .meer-sheet a.active svg { color: var(--accent); }
}

/* ==========================================================================
   Content-layout
   ========================================================================== */
.container {
  display: block;
  max-width: var(--content-max);
  padding: 1.25rem 1.5rem 3rem;
}
@media (min-width: 1024px) { .container { margin-left: var(--sb); } }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0 0 1rem;
}
.page-head h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.page-head .count {
  color: var(--muted);
  font-family: var(--lees);
  font-weight: 500;
  font-size: .85rem;
}
.subtitle {
  color: var(--muted);
  margin: -.55rem 0 1.1rem;
  font-size: .84rem;
  max-width: 60rem;
}

/* ==========================================================================
   Kaarten & lege staten
   ========================================================================== */
.card,
.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
}

.leeg {
  padding: 2.2rem 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.leeg b {
  display: block;
  font-family: var(--kop);
  color: var(--fg-soft);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

/* ==========================================================================
   Funnel-strip (homepage): klikbare fase-tellers, bekend → klant
   ========================================================================== */
.funnel {
  display: flex;
  align-items: stretch;
  margin: 0 0 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.funnel-stap {
  flex: 1 1 0;
  min-width: max-content;   /* label nooit over de buur laten schuiven;
                               te smal scherm = strip scrollt binnen zichzelf */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .65rem .55rem .6rem .95rem;
  color: inherit;
  transition: background .1s;
}
.funnel-stap:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.funnel-stap:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.funnel-stap + .funnel-stap { border-left: 1px solid var(--line); }
/* chevron op de scheidingslijn: leest als een funnel, niet als losse tegels */
.funnel-stap:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4.5px;
  top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
  background: var(--card);
  z-index: 1;
}
.funnel-stap:hover { background: var(--accent-soft); text-decoration: none; }
.funnel-stap b {
  font-family: var(--kop);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.funnel-stap span {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
}
.funnel-stap.is-nul b { color: var(--muted); font-weight: 500; }

/* ==========================================================================
   Filters / toolbar
   ========================================================================== */
#filters {
  display: flex;
  gap: .45rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
  align-items: center;
}

select,
input[type=search],
input[type=text],
input[type=date] {
  padding: .32rem .55rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: .82rem;
  min-height: 2rem;
  transition: border-color .12s, box-shadow .12s;
}
select { cursor: pointer; }
input[type=search] { min-width: 15rem; }
select:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
::placeholder { color: var(--muted); opacity: 1; }

/* ==========================================================================
   Knoppen — primair / secundair (ghost) / gevaar
   ========================================================================== */
button,
.btn {
  font-family: var(--kop);
  font-size: .78rem;
  font-weight: 600;
  padding: .32rem .8rem;
  border-radius: var(--r);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  cursor: pointer;
  min-height: 2rem;
  transition: background .12s, border-color .12s, transform .04s;
  white-space: nowrap;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.ghost {
  background: var(--card);
  color: var(--fg-soft);
  border-color: var(--line-strong);
}
button.ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

button.danger {
  background: var(--card);
  color: var(--danger);
  border-color: var(--danger-line);
}
button.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

button.miniknop {
  min-height: 1.7rem;
  padding: .12rem .55rem;
  font-size: .72rem;
  background: var(--card);
  color: var(--fg-soft);
  border-color: var(--line-strong);
}
button.miniknop:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.knop-primair {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: .32rem .8rem;
  font-family: var(--kop);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.knop-primair:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

/* ==========================================================================
   Badges — kleur ÉN tekst
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.4;
  padding: .1rem .45rem;
  border-radius: var(--r-sm);
  background: var(--neutral-bg);
  color: var(--neutral-fg);
  white-space: nowrap;
}

/* classificatie-badges: kleur per rij-klasse, alleen op .badge-cls zodat
   andere badges in dezelfde rij (weigering, onderzoek) neutraal blijven */
tr.cls-none     .badge-cls { background: var(--ok-bg);     color: var(--ok-fg); }
tr.cls-fb_only  .badge-cls { background: var(--info-bg);   color: var(--info-fg); }
tr.cls-outdated .badge-cls { background: var(--warn-bg);   color: var(--warn-fg); }
tr.cls-closed   .badge-cls { background: var(--danger-bg); color: var(--danger-fg); }

/* semantische varianten */
.badge.aan,  .badge.klaar { background: var(--ok-bg);      color: var(--ok-fg); }
.badge.uit,  .badge.stop  { background: var(--danger-bg);  color: var(--danger-fg); }
.badge.bezig  { background: var(--info-bg);    color: var(--info-fg); }
.badge.soon,  .badge.grijs { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* confidence-badges bij feiten */
.conf-high   { background: var(--ok-bg) !important;     color: var(--ok-fg) !important; }
.conf-medium { background: var(--warn-bg) !important;   color: var(--warn-fg) !important; }
.conf-low    { background: var(--danger-bg) !important; color: var(--danger-fg) !important; }

/* ==========================================================================
   Fase-indicator (leadrijen) + mijlpalen-stepper (lead-detailpagina)
   Gevonden → Onderzocht → Goedgekeurd → Preview live → Gecontacteerd → Klant
   ========================================================================== */
.fase-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: default;
}
.fase-dots i {
  width: 7px; height: 7px;
  border-radius: 2.5px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.fase-dots i.is-af { background: var(--accent); box-shadow: none; }
.fase-dots i.is-af.is-klant { background: var(--ok-fg); }
.fase-dots i.is-nu { box-shadow: inset 0 0 0 1.5px var(--accent); }

.stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stepper li {
  flex: 1 1 0;
  min-width: max-content;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 0 .15rem;
  font-size: .62rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
/* verbindingslijn naar de vórige stap */
.stepper li::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: calc(-50% + .85rem);
  right: calc(50% + .85rem);
  height: 2px;
  border-radius: 1px;
  background: var(--line);
}
.stepper li:first-child::before { display: none; }
.stepper li i {
  width: 1.15rem; height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--muted);
  font-size: .6rem;
  font-style: normal;
  font-weight: 700;
}
.stepper li.is-af { color: var(--fg-soft); }
.stepper li.is-af i { background: var(--accent); box-shadow: none; color: var(--accent-fg); }
.stepper li.is-af::before { background: var(--accent); }
.stepper li.is-nu { color: var(--accent); }
.stepper li.is-nu i {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
.stepper li.is-af.is-klant i { background: var(--ok-fg); }
@media (prefers-color-scheme: dark) {
  .stepper li.is-nu { color: var(--fg); }
}

/* ==========================================================================
   Tabellen — dicht, sticky koppen, rustige rijen
   ========================================================================== */
.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: .82rem;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: left;
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--card);
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: .42rem .65rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nw { white-space: nowrap; }
/* namen en meta truncaten i.p.v. wrappen: rijen blijven twee regels hoog
   (kaart-modus op telefoon heft dit weer op). 24cqw = meebewegen met de
   breedte van de #leads-container; elders valt cqw terug op de viewport. */
td.name {
  font-weight: 550;
  max-width: clamp(7.5rem, 24cqw, 15rem);
  min-width: 7.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.name a.leadlink {
  color: inherit;
  text-decoration: none;
}
td.name a.leadlink:hover { color: var(--accent); }
td.name small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .mob-meta wint anders nooit van td.name small (specificiteit) */
td.name small.mob-meta { display: none; }
td.name em {
  font-style: normal;
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: 0 .28rem;
  border-radius: var(--r-sm);
  font-size: .66rem;
}
td.tel a { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.thumb img {
  width: 42px; height: 30px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
  background: var(--bg-subtle);
}

th.sortkop a { color: inherit; cursor: pointer; }
th.sortkop a:hover, th.sortkop a.sort-actief { color: var(--accent); }

input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.mob-meta { display: none; }

/* — leads-tabel: kaart-container zonder overflow, zodat de sticky <thead>
     tegen de viewport-top blijft plakken (desktop heeft geen topbalk) — */
.leads-table {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--card);
}
.leads-table table { border-radius: inherit; }
.leads-table thead th:first-child { border-top-left-radius: var(--r-lg); }
.leads-table thead th:last-child { border-top-right-radius: var(--r-lg); }

/* flex op een binnen-wrapper, nooit op de <td> zelf (tabel-algoritme) */
td.actions .actie-rij {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
td.status-cel { white-space: nowrap; color: var(--fg-soft); font-size: .76rem; }

.bulkbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .8rem;
}

/* dichte cellen + compacte actieknoppen in de leadtabel */
.leads-table th, .leads-table td { padding-left: .5rem; padding-right: .5rem; }
.leads-table td { padding-top: .4rem; padding-bottom: .4rem; }
td.actions .actie-rij button {
  min-height: 1.75rem;
  padding: .18rem .55rem;
  font-size: .72rem;
}

/* Kolommen (leadtabel): 1 checkbox · 2 naam · 3 fase · 4 classificatie ·
   5 reviews+★ · 6 score · 7 tel · 8 acties. Containerbreedte is de juiste
   trigger, niet de viewport. Eerst wijkt score, dan de classificatie-badge
   (beide staan in .mob-meta); naam/fase/reviews/tel/acties blijven altijd
   staan. Past het dán nog niet: binnen de kaart scrollen. */
#leads { container-type: inline-size; min-width: 0; }
@container (max-width: 740px) {
  .leads-table th:nth-child(6), .leads-table td:nth-child(6) { display: none; }
}
@container (max-width: 640px) {
  .leads-table th:nth-child(4), .leads-table td:nth-child(4) { display: none; }
}
@container (max-width: 520px) {
  .leads-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* tablet-band: alles toont nog, maar de volle tabel past niet altijd →
   binnen de kaart scrollen i.p.v. de pagina verbreden */
@media (min-width: 720px) and (max-width: 1023px) {
  .leads-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   Leads op telefoon (<720px): kaart-rijen i.p.v. een scrollende tabel.
   Zelfde DOM (tr blijft de HTMX-swap-target #lead-{id}), andere layout.
   ========================================================================== */
@media (max-width: 719px) {
  .leads-table { border-radius: var(--r-lg); }
  .leads-table thead { display: none; }
  .leads-table table, .leads-table tbody { display: block; width: 100%; }
  .leads-table tbody tr {
    display: grid;
    grid-template:
      "naam naam sel" auto
      "fase fase fase" auto
      "tel  tel  act" auto
      / minmax(0, 1fr) auto auto;
    gap: .3rem .6rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
  }
  .leads-table tbody tr:last-child { border-bottom: 0; }
  .leads-table tbody tr:hover td { background: none; }
  .leads-table td { display: block; padding: 0; border: 0; }
  .leads-table td.sel { grid-area: sel; justify-self: end; align-self: start; }
  .leads-table td.sel input[type=checkbox] { width: 1.35rem; height: 1.35rem; }
  .leads-table td.name {
    grid-area: naam;
    font-size: .9rem;
    max-width: none;
    white-space: normal;   /* kaart: wrappen mag weer, niets truncaten */
  }
  /* tapbaar naamdoel ≥44px op de kaart */
  .leads-table td.name a.leadlink { display: block; min-height: 2.75rem; }
  .leads-table td.name .mob-meta { display: block; }
  .leads-table .fase-dots i { width: 8px; height: 8px; }
  .leads-table td.fase { grid-area: fase; }
  .leads-table td.tel { grid-area: tel; align-self: center; }
  /* tapbaar tel-doel ≥44px, nooit afgeknipt */
  .leads-table td.tel a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 .2rem;
    font-weight: 600;
  }
  .leads-table td.actions { grid-area: act; align-self: center; }
  td.actions .actie-rij button { min-height: 2.6rem; padding: .45rem .8rem; font-size: .8rem; }
  /* verborgen op kaart: classificatie/reviews/score → staan in .mob-meta */
  .leads-table td:nth-child(4), .leads-table td:nth-child(5),
  .leads-table td:nth-child(6) { display: none; }
}

/* ==========================================================================
   Lead-detailpagina (/lead/{id}) — terugknop, stepper-kaart, twee kolommen
   ========================================================================== */
.terugrij { margin: -.35rem 0 .5rem; }
.terugknop {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .2rem .5rem .2rem 0;
  color: var(--muted);
  font-weight: 600;
  font-size: .8rem;
  border-radius: var(--r-sm);
}
.terugknop:hover { color: var(--accent); text-decoration: none; }
.terugknop svg { width: 15px; height: 15px; }

.lead-kop { margin-bottom: .75rem; }
.lead-kop h1 { font-size: 1.35rem; }
.lead-kop .meta { font-size: .8rem; }

.stepper-kaart { padding: .9rem 1.1rem .8rem; }

.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 0 1rem;
  align-items: start;
}
.lead-acties { position: sticky; top: 1rem; }
@media (max-width: 1023px) {
  .lead-grid { grid-template-columns: minmax(0, 1fr); }
  /* mobiel: de actiekaart (volgende stap) bovenaan */
  .lead-acties { position: static; order: -1; }
  .terugknop { min-height: 2.75rem; }
}

.lead-detail h3,
.actiekaart h3,
.builds-kaart h3 {
  margin: 0 0 .55rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.lead-detail .meta, .meta { color: var(--muted); font-size: .8rem; }
.hint { color: var(--muted); font-size: .82rem; }

/* foto's: vast raster binnen de kolom — flex met %-breedtes liep over
   de actiekaart heen (08/08) */
.lead-detail .photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 0 0 .9rem;
}
.lead-detail .photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.lead-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .22rem .8rem;
  font-size: .82rem;
  margin: .3rem 0;
}
.lead-detail dt { color: var(--muted); }
.lead-detail dd { margin: 0; color: var(--fg-soft); overflow-wrap: anywhere; }
.lead-detail blockquote {
  margin: .5rem 0;
  padding: .5rem .75rem;
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: .8rem;
}
.lead-detail cite {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: .72rem;
  margin-top: .25rem;
}

pre {
  font-size: .68rem;
  overflow-x: auto;
  background: var(--bg-subtle);
  color: var(--fg-soft);
  padding: .65rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
details > summary { cursor: pointer; color: var(--accent); font-size: .78rem; }
code {
  font-size: .82em;
  background: var(--bg-subtle);
  padding: .05rem .3rem;
  border-radius: var(--r-sm);
}

/* actiekaart: de volgende stap, prominent */
.actiekaart { border-top: 3px solid var(--accent); }
.actiekaart .stap-groep {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.stap-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.stap-belstatus {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  width: 100%;
}
.stap-belstatus select { flex: 1; }
.actie-secundair {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* builds-historiek */
.builds-lijst { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.builds-lijst li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
}
.builds-lijst li:first-child { border-top: 0; padding-top: 0; }
.builds-lijst .buildmeta { color: var(--muted); font-size: .74rem; }
.builds-lijst code { font-size: .7rem; overflow-wrap: anywhere; }

/* oude stap-actie-strip (nog gebruikt in partials): kleurt mee */
.stap-actie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  align-items: center;
  justify-content: space-between;
  margin: .8rem 0 .3rem;
  padding: .6rem .75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.stap-actie-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}

/* callout */
.warn {
  display: block;
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: .5rem .7rem;
  border-radius: var(--r);
  font-size: .8rem;
  margin: .6rem 0;
}
em.warn, .fact em.warn {
  display: inline;
  background: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
  color: var(--warn-fg);
}

/* feiten-checklist (research review) */
.fact {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .5rem .65rem;
  margin: .35rem 0;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .82rem;
}
.fact input[type=checkbox] { align-self: center; }
.fact a { color: var(--accent); font-size: .72rem; }

.actions-row { display: flex; gap: .45rem; margin-top: .7rem; flex-wrap: wrap; }

/* ==========================================================================
   Review-kaarten + geblokkeerd-blok
   ========================================================================== */
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .55rem;
}
.review-head small,
.lane-info small { display: block; color: var(--muted); font-size: .76rem; }
.review-head strong { font-size: .92rem; }
.review-actions { display: flex; gap: .45rem; margin-top: .75rem; flex-wrap: wrap; }
.reviewed {
  background: var(--ok-bg);
  color: var(--ok-fg);
  border: 1px solid color-mix(in srgb, var(--ok-fg) 30%, transparent);
  border-radius: var(--r-lg);
  padding: .7rem .95rem;
  margin-bottom: .9rem;
  font-weight: 600;
  font-size: .85rem;
}
.reviewed a { font-weight: 600; }
.reviewed-acties {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-left: .35rem;
}

.geblokkeerd {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: .7rem .95rem;
  margin-bottom: .9rem;
}
.geblokkeerd > summary { color: var(--fg-soft); font-weight: 600; font-size: .84rem; }
.geblokkeerd-lijst { list-style: none; margin: .5rem 0 0; padding: 0; }
.geblokkeerd-lijst li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
  font-size: .84rem;
}
.geblokkeerd-lijst small { color: var(--muted); }

/* ==========================================================================
   Statuspagina (/status) — de machinekamer
   ========================================================================== */
.statusblok h2 {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.statusblok h2 .count { color: var(--muted); font-family: var(--lees); font-size: .8rem; font-weight: 500; }
.statusrijen { list-style: none; margin: 0; padding: 0; }
.statusrijen li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  padding: .55rem 0;
  border-top: 1px solid var(--line);
  font-size: .84rem;
}
.statusrijen li:first-child { border-top: 0; }
.statusrijen .naam { font-weight: 600; color: var(--fg); }
.statusrijen .naam:hover { color: var(--accent); text-decoration: none; }
.statusrijen .rechts {
  margin-left: auto;
  color: var(--muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.statusrijen .detail { flex-basis: 100%; color: var(--muted); font-size: .76rem; }
.statusrijen .detail code { font-size: .72rem; overflow-wrap: anywhere; }
.status-leeg { color: var(--muted); font-size: .84rem; padding: .3rem 0 .1rem; }

/* pulserend bolletje bij lopende runs */
.puls {
  width: .55rem; height: .55rem;
  border-radius: var(--r-pill);
  background: var(--info-fg);
  align-self: center;
  flex: none;
  animation: puls 1.6s ease-in-out infinite;
}
@keyframes puls { 50% { opacity: .3; } }

.wachtnr {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 1.2rem;
  text-align: right;
}

/* ==========================================================================
   Kansen/Bellijst — prospectlijst (statuskeuze met statustint)
   ========================================================================== */
.statuskeuze {
  font-size: .78rem;
  padding: .2rem .35rem;
  min-height: 1.8rem;
  border-radius: var(--r);
}
.status--nieuw        { background: var(--card); }
.status--shortlist    { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.status--preview      { background: var(--info-bg);   border-color: var(--info-fg);   color: var(--info-fg); }
.status--gecontacteerd{ background: var(--info-bg);   border-color: var(--info-fg);   color: var(--info-fg); }
.status--gesprek      { background: var(--warn-bg);   border-color: var(--warn-fg);   color: var(--warn-fg); }
.status--klant        { background: var(--ok-bg);     border-color: var(--ok-fg);     color: var(--ok-fg); }
.status--afgewezen    { background: var(--danger-bg); border-color: var(--danger-fg); color: var(--danger-fg); }
.status--later        { background: var(--neutral-bg); }

/* kansen op telefoon: kaart-rijen, zelfde DOM. Kolommen: 1 score · 2 zaak ·
   3 gemeente · 4 cluster · 5 reviews · 6 tel · 7 classificatie · 8 status ·
   9 naar-lead-link */
@media (max-width: 719px) {
  .kansen-tabel { border: 0; background: none; box-shadow: none; }
  .kansen-tabel thead { display: none; }
  .kansen-tabel table, .kansen-tabel tbody { display: block; width: 100%; }
  .kansen-tabel table { background: none; }
  .kansen-tabel tbody tr {
    display: grid;
    grid-template:
      "naam  naam score" auto
      "tel   stat stat" auto
      / minmax(0, 1fr) auto auto;
    gap: .3rem .6rem;
    padding: .7rem .8rem;
    margin-bottom: .6rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  .kansen-tabel tbody tr:hover td { background: none; }
  .kansen-tabel td { display: block; padding: 0; border: 0; }
  .kansen-tabel td.kscore {
    grid-area: score;
    font-family: var(--kop);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .kansen-tabel td.name {
    grid-area: naam;
    font-size: .9rem;
    max-width: none;
    white-space: normal;
  }
  .kansen-tabel td.name a.leadlink { display: block; min-height: 2.75rem; }
  .kansen-tabel td.name .mob-meta { display: block; }
  .kansen-tabel td.tel { grid-area: tel; align-self: center; }
  .kansen-tabel td.tel a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
  }
  .kansen-tabel td.pstatus { grid-area: stat; align-self: center; justify-self: end; }
  .kansen-tabel td.pstatus .statuskeuze { min-height: 2.75rem; font-size: .85rem; }
  .kansen-tabel td:nth-child(3), .kansen-tabel td:nth-child(4),
  .kansen-tabel td:nth-child(5), .kansen-tabel td:nth-child(7),
  .kansen-tabel td:nth-child(9) { display: none; }
}

/* ==========================================================================
   KBO-radar — datastaafje bij het gewogen potentieel
   ========================================================================== */
.staaf {
  display: grid;
  grid-template-columns: 2.4rem minmax(4rem, 1fr);
  align-items: center;
  gap: .5rem;
  min-width: 9rem;
}
.staaf b { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.staaf i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  opacity: .75;
  min-width: 2px;
}

/* ==========================================================================
   Gemeenten
   ========================================================================== */
td.bericht { max-width: 28rem; overflow-wrap: anywhere; }

tr.gem-actief td.name { color: var(--fg); }
tr.gem-actief .badge { background: var(--ok-bg); color: var(--ok-fg); }
tr.gem-radar .badge { background: var(--info-bg); color: var(--info-fg); }
td.gem-acties { white-space: nowrap; }
td.gem-acties .miniknop + .miniknop { margin-left: .25rem; }

/* ==========================================================================
   Assistent-tab
   ========================================================================== */
.lane-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.lane-row form { display: flex; align-items: center; gap: .55rem; }
.lane-settings {
  border-top: 1px solid var(--line);
  padding-top: .75rem;
  margin-top: .3rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .65rem;
  align-items: end;
}
.lane-settings label { font-size: .74rem; color: var(--muted); font-weight: 600; }
.lane-settings input { width: 100%; margin-top: .25rem; }
@media (max-width: 719px) { .lane-settings { grid-template-columns: 1fr; } }

.envlist { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .84rem; }
.envlist li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .3rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
}
.envlist .hint { flex-basis: 100%; margin-left: 1.05rem; }
.dot {
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: var(--r-pill);
  margin-right: .45rem;
  background: var(--line-strong);
  flex: none;
}
.dot.ok  { background: var(--ok-fg); }
.dot.nok { background: var(--warn-fg); }

/* ==========================================================================
   Activiteit-tab (read-only bot-monitoring)
   ========================================================================== */
.act-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}
.act-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .2rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--fg-soft);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.act-chip:hover {
  text-decoration: none;
  background: var(--bg-subtle);
  border-color: var(--muted);
}
.act-chip.is-on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.act-job { border-top: 1px solid var(--line); padding: .5rem 0; }
.act-job summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  color: inherit;
  font-size: .84rem;
}
.act-job summary::-webkit-details-marker { display: none; }
.act-job summary::before { content: "▸"; color: var(--muted); font-size: .75rem; }
.act-job[open] summary::before { content: "▾"; }
.act-lane { font-weight: 600; }
.act-rev,
.act-chat {
  font-size: .68rem;
  color: var(--muted);
  background: var(--bg-subtle);
  padding: .05rem .4rem;
  border-radius: var(--r-sm);
}
.act-chat { font-variant-numeric: tabular-nums; }
.act-chat.is-owner { color: var(--accent); background: var(--accent-soft); }
.act-cost-pill {
  font-size: .68rem;
  font-weight: 600;
  color: var(--ok-fg);
  background: var(--ok-bg);
  padding: .05rem .4rem;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}

.act-cost {
  margin: .5rem 0 .2rem;
  padding: .5rem .65rem;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.act-cost-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .2rem .75rem;
  margin-bottom: .3rem;
}
.act-cost-title { font-size: .76rem; font-weight: 600; color: var(--fg-soft); }
.act-cost-tot { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.act-cost-tot strong { color: var(--ok-fg); }
.act-cost-table { width: 100%; border-collapse: collapse; font-size: .76rem; background: none; }
.act-cost-table td { padding: .18rem 0; border-top: 1px solid var(--line); border-bottom: 0; }
.act-cost-table tr:first-child td { border-top: none; }
.act-cost-table tr:hover td { background: none; }
.acm-model { font-weight: 600; color: var(--fg-soft); white-space: nowrap; }
.acm-tok { color: var(--muted); padding-left: .75rem !important; font-variant-numeric: tabular-nums; }
.acm-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-soft);
  white-space: nowrap;
}
.act-time {
  margin-left: auto;
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.act-body { padding: .5rem 0 .3rem 1.05rem; }
.act-summary { margin: .2rem 0 .5rem; font-size: .84rem; }
.act-timeline {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  border-left: 2px solid var(--line);
}
.act-timeline li {
  position: relative;
  padding: .28rem 0 .28rem .9rem;
  font-size: .8rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.act-timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .6rem;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.act-timeline li.hint::before { display: none; }
.act-ev { font-weight: 600; }
.act-ev-detail { color: var(--fg-soft); }
.act-timeline time {
  margin-left: auto;
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.act-meta { color: var(--muted); font-size: .72rem; margin: .5rem 0 0; }

.act-previews { margin: .35rem 0 .55rem; }
.act-prev-label {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.act-prev-shots {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-start;
}
.act-prev-shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  line-height: 0;
  background: var(--card);
}
.act-prev-shot img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
}
.act-prev-shot.is-focus img { max-height: 168px; }

/* ==========================================================================
   Meldingen (bulk-terugkoppeling): een geweigerde bouw mag nooit als
   "de knop doet niets" overkomen
   ========================================================================== */
.melding {
  margin: 0 0 .55rem;
  padding: .5rem .75rem;
  border-radius: var(--r);
  font-size: .82rem;
  border: 1px solid var(--line);
}
.melding-ok   { background: var(--ok-bg);   border-color: color-mix(in srgb, var(--ok-fg) 35%, transparent);   color: var(--ok-fg); }
.melding-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-fg) 35%, transparent); color: var(--warn-fg); }
.melding-hint { background: var(--bg-subtle); color: var(--muted); }

/* ==========================================================================
   Telefoon-verfijning (<720px)
   ========================================================================== */
@media (max-width: 719px) {
  .container { padding: .8rem .8rem 2.5rem; }
  .page-head h1 { font-size: 1.15rem; }

  #filters select,
  #filters input[type=search],
  #filters input[type=text] { flex: 1 1 10rem; min-width: 0; min-height: 2.75rem; }

  button { min-height: 2.75rem; padding: .5rem .85rem; }
  button.miniknop { min-height: 2.35rem; }
  select, input[type=search], input[type=text] { min-height: 2.6rem; }
  .statuskeuze { min-height: 2.6rem; }

  .funnel-stap { padding-left: .7rem; }
  .stepper li { font-size: .58rem; }

  .bulkbar { flex-wrap: wrap; gap: .5rem; }
  .act-time, .act-timeline time { margin-left: 0; width: 100%; }
  .lead-detail dl { grid-template-columns: 1fr; gap: .05rem; }
  .lead-detail dt { margin-top: .5rem; font-size: .72rem; }
  .statusrijen .rechts { margin-left: 0; width: 100%; }
}

/* Sites-pagina + open-links: de preview-link als klikbare badge */
.open-link { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.open-link:hover { background: var(--accent); color: var(--accent-fg); }
.sites-tabel td .mob-meta { display: none; }
@media (max-width: 720px) {
  .sites-tabel th:nth-child(2), .sites-tabel td:nth-child(2),
  .sites-tabel th:nth-child(3), .sites-tabel td:nth-child(3),
  .sites-tabel th:nth-child(6), .sites-tabel td:nth-child(6) { display: none; }
  .sites-tabel td .mob-meta { display: block; }
}

/* Contactlog op de lead-pagina: notitieveld + journaal (statuswissels
   en notities delen dezelfde append-only prospect_status-tabel) */
.contactlog .notitie-form { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 .9rem; }
.contactlog textarea {
  width: 100%; resize: vertical; min-height: 3rem;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: .45rem .6rem; font: inherit; font-size: .85rem;
  color: var(--fg-soft); background: var(--card);
}
.contactlog textarea:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.contactlog .notitie-form button { align-self: flex-end; }
.log-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.log-lijst li { border-left: 2px solid var(--line); padding-left: .65rem; }
.log-lijst .log-tijd { font-size: .72rem; color: var(--muted); margin-right: .4rem; }
.log-lijst p { margin: .2rem 0 0; font-size: .85rem; color: var(--fg-soft); white-space: pre-wrap; }

/* Berichten: nieuw vs afgehandeld */
.afhandel-cel form { margin: 0; }
tr.is-afgehandeld td { color: var(--muted); }
tr.is-nieuw td.bericht { font-weight: 500; }

/* Login (11/08): losstaande pagina, zelfde tokens als de rest */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); padding: 1rem; }
.login-kaart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 2rem 1.8rem; width: min(24rem, 100%); }
.login-kaart h1 { font-size: 1.25rem; margin: 0 0 1.2rem; }
.login-kaart h1 span { color: var(--accent); }
.login-kaart label { display: block; font-size: .82rem; font-weight: 600; margin: 0 0 .9rem; }
.login-kaart input { width: 100%; margin-top: .3rem; border: 1px solid var(--line-strong); border-radius: var(--r); padding: .5rem .65rem; font: inherit; background: var(--card); color: var(--fg); }
.login-kaart input:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.login-kaart .knop-primair { width: 100%; padding: .55rem; font-size: .9rem; margin-top: .3rem; }
.logout-form { margin-top: .5rem; }
.logout-form button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-size: inherit; }
.logout-form button:hover { color: var(--accent); }