/* MoProMax Social Engine — design naar het goedgekeurde prototype
   (warm licht canvas, donkere sidebar, paars accent, Inter) */

:root {
    /* MoProMax-huisstijl, gelijk aan het klantportaal: diep paars canvas,
       gouden accent, glazen kaarten, Geist. */
    --bg:        #130836;
    --ink:       #FFFFFF;
    --ink-soft:  rgba(255,255,255,.78);
    --ink-faint: rgba(255,255,255,.55);
    --card:      rgba(255,255,255,.045);
    --card-alt:  rgba(255,255,255,.07);
    --solid:     #1A1140;   /* ondoorzichtig vlak: modals, menu's, vaste koppen */
    --line:      rgba(255,255,255,.1);
    --side:      rgba(255,255,255,.02);
    --side-2:    rgba(255,255,255,.05);
    --side-3:    rgba(255,255,255,.08);
    --side-line: rgba(255,255,255,.08);
    --accent:    #FCD34D;
    --accent-2:  #FCBB00;
    --gold-deep: #F99C00;
    --on-gold:   #1A1005;
    --gold-line: rgba(249,156,0,.28);
    --lavender:  rgba(252,211,77,.1);
    --lime:      rgba(34,197,94,.12);
    --lime-ink:  #34D399;
    --amber:     rgba(249,156,0,.12);
    --amber-ink: #FCBB00;
    --rose:      rgba(248,113,113,.12);
    --rose-ink:  #FCA5A5;
    --blue:      rgba(96,165,250,.12);
    --blue-ink:  #93C5FD;
    --radius:    24px;
    --radius-s:  14px;
    --shadow:    0 30px 80px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    min-height: 100vh;
    color: var(--ink);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; color-scheme: dark; }
select option { background: var(--solid); color: #fff; }

/* sfeerverlichting op de achtergrond, zoals in het klantportaal */
.glow { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow i { position: absolute; border-radius: 50%; display: block; }
.glow i:nth-child(1) { top: -20%; left: -10%; width: 70vw; max-width: 1100px; aspect-ratio: 1; background: rgba(127,34,254,.5); filter: blur(160px); }
.glow i:nth-child(2) { bottom: -30%; right: -15%; width: 64vw; max-width: 1000px; aspect-ratio: 1; background: rgba(112,8,231,.45); filter: blur(180px); }
.glow i:nth-child(3) { top: 20%; left: 10%; width: 45vw; max-width: 700px; aspect-ratio: 1; background: rgba(79,57,246,.2); filter: blur(140px); }
.login-wrap, .shell { position: relative; z-index: 1; }
a { color: inherit; }

/* ── Login ─────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.login-card {
    width: 100%; max-width: 420px; background: var(--card); border-radius: 28px;
    box-shadow: var(--shadow); padding: 36px; border: 1px solid var(--line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.login-card h1 { font-size: 30px; font-weight: 900; color: var(--accent); margin: 18px 0 6px; letter-spacing: -.03em; line-height: 1.05; }
.login-card p  { color: var(--ink-soft); margin-bottom: 22px; }
.login-link { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.login-link:hover { color: var(--accent); }
.login-card label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: rgba(252,211,77,.65); margin: 16px 0 8px; }
.login-card input {
    width: 100%; padding: 11px 14px; border: 1px solid rgba(252,187,0,.35); border-radius: 14px;
    background: rgba(255,255,255,.03); outline: none; font-size: 16px;
}
.login-card input:focus { border-color: var(--accent); background: rgba(255,255,255,.05); }
.login-card input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 1000px var(--bg); }
.login-error { color: var(--rose-ink); font-size: 13px; margin-top: 12px; display: none; }
.login-card label.onthoud {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; cursor: pointer;
    font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft);
}
.login-card label.onthoud input { width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.onthoud-uitleg { font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-left: 28px; }

/* ── Shell ─────────────────────────────────────────── */
.shell { display: none; min-height: 100vh; }
.shell.active { display: flex; }

aside {
    width: 264px; flex-shrink: 0; background: var(--side); color: #fff;
    border-right: 1px solid var(--side-line);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
    padding: 26px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-mark {
    width: 44px; height: 44px; border-radius: 16px; background: #1A1530; border: 1px solid rgba(252,187,0,.3);
    display: grid; place-items: center; font-weight: 900; font-size: 17px; color: var(--accent);
}
.brand-name { font-weight: 900; font-size: 20px; line-height: 1;
    background-image: linear-gradient(to bottom right, var(--accent), var(--gold-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub  { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.9); margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.nav button {
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 11px 14px; border-radius: 16px; color: var(--accent); font-weight: 600; font-size: 14px;
    border: 1px solid transparent;
}
.nav button:hover { border-color: rgba(252,187,0,.45); color: var(--accent-2); }
.nav button.active { background: var(--card); border-color: var(--gold-line); color: var(--accent); }
.nav .badge {
    margin-left: auto; background: var(--gold-deep); color: var(--on-gold); font-size: 11px;
    font-weight: 700; border-radius: 999px; padding: 1px 8px;
}
.nav-icon { width: 17px; text-align: center; opacity: .9; }
/* groepskop in het menu: Marketing en Website staan gescheiden */
.nav-kop { padding: 16px 14px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: rgba(252,211,77,.75); }
.home-analyse { margin-bottom: 26px; }
@media (max-width: 860px) { .nav-kop { flex-basis: 100%; padding-top: 8px; } }
/* onderdelen van de Engine (Trendlab, Content studio): ingesprongen onder Engine */
.nav button.nav-sub { padding-left: 32px; font-size: 13px; }
/* Klantportaal: knop met uitklapbaar submenu (het menu van het portaal van de klant) */
.nav button.kp-knop { margin-top: 12px; }
.kp-chev { margin-left: auto; transition: transform .15s; }
.kp-knop[aria-expanded="true"] .kp-chev { transform: rotate(90deg); }
.kp-menu { display: flex; flex-direction: column; gap: 2px; }
.kp-menu[hidden] { display: none; }
.kp-groep { padding: 10px 14px 4px 32px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: rgba(252,211,77,.6); }
.kp-frame { display: block; width: 100%; height: calc(100vh - 170px); min-height: 520px; border: 0; background: transparent; visibility: hidden; }
.engine-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
/* de Trendlab: afspelen op de pagina */
.insp-speel { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.insp-speel::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.speler { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 18px; align-items: start; }
.speler iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 12px; background: #111; }
@media (max-width: 700px) { .speler { grid-template-columns: 1fr; } }

.side-user {
    display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px;
    border-top: 1px solid var(--side-line); margin-top: 10px;
}
.avatar {
    width: 32px; height: 32px; border-radius: 999px; background: #1A1530; border: 1px solid rgba(252,187,0,.3);
    display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--accent);
}
.side-user .name { font-size: 13px; font-weight: 600; color: #fff; }
.side-user .role { font-size: 11px; color: var(--ink-faint); }
.side-user .logout { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.side-user .logout:hover { color: #fff; }
.side-user .apparaten-knop { background: none; border: 0; padding: 0; margin-top: 2px; font: inherit; font-size: 11px; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.side-user .apparaten-knop:hover { color: #fff; }
.apparaat-rij { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.apparaat-rij .naam { font-weight: 600; }
.apparaat-rij .meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.apparaat-rij .btn { margin-left: auto; }

/* Bedrijfswissel */
.company-block { border-top: 1px solid var(--side-line); padding-top: 12px; margin-top: 8px; }
.company-label { font-size: 10px; font-weight: 600; letter-spacing: .2em; color: rgba(252,211,77,.75); padding: 0 8px 8px; }
.company-pick {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--side-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; color: #fff;
}
.company-pick:hover { background: var(--side-3); border-color: rgba(252,187,0,.45); }
.company-avatar {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.company-pick .cname { font-size: 13px; font-weight: 600; text-align: left; }
.company-pick .cstate { font-size: 11px; color: var(--ink-faint); text-align: left; }
.company-pick .chev { margin-left: auto; color: var(--ink-faint); }
.company-menu {
    position: absolute; bottom: 84px; left: 14px; width: 220px; z-index: 60;
    background: var(--solid); color: var(--ink); border: 1px solid var(--gold-line); border-radius: 16px; box-shadow: var(--shadow);
    padding: 8px; display: none;
}
.company-menu.open { display: block; }
.company-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 500;
}
.company-menu button:hover { background: rgba(255,255,255,.06); color: var(--accent); }
.company-menu .add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 11px; }

/* ── Main ──────────────────────────────────────────── */
main { flex: 1; min-width: 0; padding: 30px 36px 60px; }
.topline { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.greeting { font-size: 44px; font-weight: 900; color: var(--accent); letter-spacing: -.03em; line-height: 1.06; margin: 10px 0 0; }
.greeting::after { content: ''; display: block; width: 80px; height: 4px; border-radius: 999px; margin: 18px 0 16px;
    background-image: linear-gradient(to right, var(--gold-deep), var(--accent)); }
.greeting-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 26px; }

.view { display: none; }
.view.active { display: block; }

/* Statcards */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px;
}
.stat-card .k { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: rgba(252,211,77,.65); font-weight: 600; }
.stat-card .v { font-size: 40px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -.03em; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.stat-card .s { font-size: 12px; color: var(--ink-faint); }
.stat-card .delta { font-size: 12px; font-weight: 700; color: var(--lime-ink); background: var(--lime); border-radius: 999px; padding: 2px 8px; float: right; }

/* AI pulse-banner */
.pulse {
    display: flex; align-items: center; gap: 12px; background: var(--card); color: #fff;
    border: 1px solid var(--gold-line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px;
}
.pulse .tag { font-size: 10px; letter-spacing: .2em; font-weight: 700; color: var(--accent); }
.pulse .txt { font-size: 13.5px; }
.pulse .cta { margin-left: auto; background: linear-gradient(180deg, var(--accent), var(--gold-deep)); border-radius: 999px; color: var(--on-gold); font-weight: 600; font-size: 12.5px; padding: 7px 14px; flex-shrink: 0; }

/* Kaarten & panelen */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
.panel {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.panel-head h2 { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--accent); }
.panel-head .count { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--lavender); border-radius: 999px; padding: 2px 9px; }
.panel-head .right { margin-left: auto; }
.panel-sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 14px; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--gold-deep) 100%); color: var(--on-gold); border-radius: 999px;
    padding: 9px 18px; font-weight: 700; font-size: 13px; border: 1px solid transparent;
    transition: filter .15s, box-shadow .2s, border-color .15s, color .15s;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -12px rgba(249,156,0,.65); }
.btn.accent { background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%); color: #fff; box-shadow: 0 6px 24px -4px rgba(34,197,94,.45); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid var(--line); font-weight: 600; }
.btn.ghost:hover { border-color: rgba(252,187,0,.7); color: var(--accent); filter: none; box-shadow: none; }
.btn.small { padding: 6px 13px; font-size: 12px; }
.btn.danger { background: transparent; color: var(--rose-ink); border: 1px solid var(--line); }
.btn.danger:hover { border-color: rgba(248,113,113,.55); filter: none; box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; }

/* Lijstjes / rijen */
.rowline {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-top: 1px solid var(--line);
}
.rowline:first-of-type { border-top: 0; }
.score-pill {
    width: 40px; height: 40px; border-radius: 14px; background: var(--lavender); color: var(--accent); border: 1px solid var(--gold-line);
    display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.rowline .t { font-weight: 600; font-size: 13.5px; }
.rowline .m { font-size: 12px; color: var(--ink-soft); }
.rowline .end { margin-left: auto; text-align: right; flex-shrink: 0; }

.insp-thumb {
    width: 40px; height: 56px; border-radius: 8px; flex-shrink: 0;
    object-fit: cover; background: var(--bg); border: 1px solid var(--line);
}
.insp-thumb-fallback {
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    color: var(--ink-soft); text-transform: uppercase;
}

.chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; }
.chip.grey  { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.chip.lav   { background: var(--lavender); color: var(--accent); border-color: var(--gold-line); }
.chip.lime  { background: var(--lime); color: var(--lime-ink); }
.chip.amber { background: var(--amber); color: var(--amber-ink); }
.chip.rose  { background: var(--rose); color: var(--rose-ink); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(252,211,77,.65); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.clickable:hover td { background: var(--card-alt); cursor: pointer; }

/* Varianten (experimenten) */
.variant {
    display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
    border-radius: var(--radius-s); padding: 12px 14px; margin-top: 10px;
}
.variant.winner { border-color: var(--accent); background: var(--card-alt); }
.variant .vl {
    width: 28px; height: 28px; border-radius: 999px; background: var(--side-3); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.variant.winner .vl { background: var(--accent); color: var(--on-gold); }
.variant .vt { font-size: 13.5px; font-weight: 500; }
.variant .vm { margin-left: auto; text-align: right; font-size: 12px; color: var(--ink-soft); flex-shrink: 0; }
.variant .vm b { display: block; font-size: 15px; color: var(--ink); }

/* Kalender */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cal-view-switch { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.cal-view-switch button { border: none; background: transparent; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cal-view-switch button.active { background: var(--accent); color: var(--on-gold); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav #calRange { font-weight: 700; font-size: 13px; margin: 0 6px; min-width: 150px; text-align: center; }

/* Maandweergave */
.cal-month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.cal-month-head span { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-align: center; text-transform: uppercase; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); gap: 8px; }
.cal-month-day { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; cursor: pointer; min-width: 0; overflow: hidden; }
.cal-month-day.other-month { opacity: .4; }
.cal-month-day.today { border-color: var(--accent); }
.cal-month-day .d { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); margin-bottom: 6px; }
.cal-month-day.today .d { color: var(--accent); }
.cal-chip {
    background: var(--lavender); color: var(--accent); border-radius: 6px;
    font-size: 10.5px; font-weight: 600; padding: 3px 6px; margin-bottom: 4px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-more { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; padding: 2px 6px; }
/* per kanaal een kleur (stip), per status een achtergrond: live groen, ingepland paars, de rest neutraal */
.cal-chip { display: flex; align-items: center; gap: 5px; border-left: 3px solid var(--kanaal, var(--accent)); }
.cal-chip .time { flex-shrink: 0; font-variant-numeric: tabular-nums; opacity: .85; }
.cal-chip .cal-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.st-gepubliceerd, .cal-event.st-gepubliceerd { background: var(--lime); color: var(--lime-ink); }
.cal-chip.st-gepland, .cal-event.st-gepland { background: var(--lavender); color: var(--accent); }
.cal-chip.st-concept, .cal-chip.st-controle, .cal-chip.st-klaar { background: var(--side-3); color: var(--ink-soft); }
.cal-chip.st-gearchiveerd { background: var(--side-2); color: var(--ink-faint); text-decoration: line-through; }
.k-tiktok { --kanaal: #25F4EE; } .k-facebook { --kanaal: #1877F2; } .k-instagram { --kanaal: #E1306C; }
.k-youtube { --kanaal: #FF0000; } .k-linkedin { --kanaal: #0A66C2; } .k-gmb { --kanaal: #34A853; }
.cal-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-soft); align-items: center; }
.cal-legenda .stip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--kanaal); margin-right: 5px; vertical-align: -1px; }
.cal-legenda .blok { display: inline-block; width: 18px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Week-/dagweergave: tijdlijn zoals een telefoon- of Outlook-kalender.
   --slot is een halfuur; een uur is dus 2 * --slot hoog. De hele dag (00:00–
   24:00) staat er altijd, ook zonder content — een lege kalender is een
   kalender, geen "niets gepland"-melding. */
:root { --slot: 24px; }
.cal-timegrid { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--solid); box-shadow: var(--shadow); }
.cal-timegrid-scroll { max-height: 640px; overflow-y: auto; display: flex; }
.cal-gutter { width: 56px; flex-shrink: 0; border-right: 1px solid var(--line); }
.cal-gutter-head, .cal-daycol-head { height: 52px; flex-shrink: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: sticky; top: 0; background: var(--solid); z-index: 2; }
.cal-gutter-hours { position: relative; }
.cal-gutter-hour { height: calc(var(--slot) * 2); font-size: 10.5px; color: var(--ink-faint); text-align: right; padding-right: 8px; box-sizing: border-box; transform: translateY(-6px); }
.cal-daycols { flex: 1; display: flex; }
.cal-daycol { flex: 1; min-width: 0; border-right: 1px solid var(--line); }
.cal-daycol:last-child { border-right: none; }
.cal-daycol-head { flex-direction: column; gap: 1px; cursor: pointer; }
.cal-daycol-head .wd { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-faint); }
.cal-daycol-head .dn { font-size: 14px; font-weight: 700; }
.cal-daycol-head.today .dn { color: var(--accent); }
.cal-daycol-head:hover { background: var(--card-alt); }
.cal-daycol-body {
    position: relative; box-sizing: border-box;
    /* Twee lagen: een lijn per uur (steviger) en een lijn per halfuur (lichter) */
    background-image:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent calc(var(--slot) * 2)),
        repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent var(--slot));
    background-position: 0 -1px, 0 -1px;
    opacity: 1;
}
.cal-event {
    position: absolute; left: 3px; right: 3px; border-radius: 6px; overflow: hidden;
    background: var(--lavender); color: var(--accent); font-size: 11px; font-weight: 600;
    padding: 3px 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.cal-event .t { display: block; font-size: 9.5px; opacity: .8; font-weight: 700; }
.cal-nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent-2); z-index: 3; }
.cal-nowline::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }

/* Funnel */
.funnel-step { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.funnel-bar { height: 34px; background: linear-gradient(90deg, var(--gold-deep), var(--accent)); border-radius: 9px; display: flex; align-items: center; padding: 0 12px; font-weight: 800; font-size: 13px; color: var(--on-gold); min-width: 60px; }
.funnel-label { font-size: 12.5px; color: var(--ink-soft); }

/* Instellingen */
.toggle-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.toggle-row:first-of-type { border-top: 0; }
.toggle-row .t { font-weight: 600; }
.toggle-row .m { font-size: 12.5px; color: var(--ink-soft); }
.switch { margin-left: auto; width: 42px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.switch.on { background: var(--accent); }
.switch.on::after { left: 21px; }

.fact-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; margin: 0 6px 8px 0; }
.fact-tag button { color: var(--ink-faint); font-weight: 700; }
.fact-tag button:hover { color: var(--rose-ink); }

/* Formulieren / modals */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: #fff; margin-bottom: 7px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 11px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
    background: rgba(255,255,255,.07); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: rgba(255,255,255,.1); }
.field textarea { resize: vertical; min-height: 74px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(9,4,26,.65); backdrop-filter: blur(3px); z-index: 100;
    display: none; align-items: flex-start; justify-content: center; padding: 5vh 20px; overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--solid); border: 1px solid var(--gold-line); border-radius: var(--radius); width: 100%; max-width: 620px;
    padding: 28px; box-shadow: var(--shadow);
}
.modal.modal-breed { max-width: 900px; }
.modal h3 { font-size: 20px; font-weight: 900; color: var(--accent); letter-spacing: -.02em; margin-bottom: 4px; }
.modal .sub { color: var(--ink-soft); font-size: 13px; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Toast */
#toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--solid); color: var(--accent); border: 1px solid var(--gold-line); border-radius: 999px; padding: 10px 20px;
    font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s; z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { color: var(--rose-ink); border-color: rgba(248,113,113,.45); }

.empty { text-align: center; color: var(--ink-faint); padding: 30px 10px; font-size: 13px; }

/* "Meer laden": de lijst-endpoints geven één pagina, deze knop haalt de
   volgende erbij. Staat onder de lijst en alleen zolang er meer is. */
.load-more { display: flex; justify-content: center; padding: 14px 0 4px; }
.cal-paging { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; margin: -4px 0 12px; }
.muted { color: var(--ink-soft); }
.section-gap { margin-top: 26px; }

/* Rapport-weergave */
.report-print { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
@media print {
    aside, .no-print, .pulse { display: none !important; }
    main { padding: 0; }
    body { background: #fff; }
    .report-print { border: 0; }
}

@media (max-width: 860px) {
    .shell.active { flex-direction: column; }
    aside { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    main { padding: 20px; }
    .cal-grid { grid-template-columns: repeat(2, 1fr); }
    .field-row, .field-row-3 { grid-template-columns: 1fr; }
}

/* ── Website-sectie (webshop-maintenance per bedrijf) ── */
.ws-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ws-tabs button { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); }
.ws-tabs button.on { background: var(--accent); color: var(--on-gold); border-color: var(--accent); }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ws-dot.g { background: #3fb984; } .ws-dot.r { background: #e05555; } .ws-dot.y { background: #c9a96e; }
.ws-modstat { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ws-modstat > div { display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 13px; }

/* ── Marketing Engine: kop, tabbladen, dossiers en administratie ── */
.eng-kop { padding-bottom: 18px; }
.eng-kop-top { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.eng-titel { font-size: 24px; font-weight: 900; color: var(--accent); letter-spacing: -.02em; }
.eng-kop-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.eng-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; }
.eng-kpi { text-align: left; background: var(--card-alt); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; }
button.eng-kpi:hover { border-color: var(--accent); }
.eng-kpi .k { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: rgba(252,211,77,.65); font-weight: 600; }
.eng-kpi .v { font-size: 28px; font-weight: 900; color: var(--accent); letter-spacing: -.03em; margin: 4px 0 2px; }
.eng-kpi .s { font-size: 11.5px; color: var(--ink-faint); }
.eng-kpi.let-op { background: var(--amber); border-color: rgba(249,156,0,.35); }
.eng-subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.eng-subtab { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.eng-subtab:hover { background: var(--card-alt); color: var(--ink); }
.eng-subtab.actief { background: var(--accent); color: var(--on-gold); }
.eng-teller { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--lavender); color: var(--accent); font-size: 11px; text-align: center; }
.eng-teller.let-op { background: var(--amber); color: var(--amber-ink); }
.eng-subtab.actief .eng-teller { background: rgba(26,16,5,.15); color: var(--on-gold); }
.eng-grid { align-items: start; }
/* Engine → Voorraad (stap 1): eenvoudig, vijf tabbladen, per plan een kaart die openklapt */
.vr-top .muted { max-width: 78ch; }
.vr-hook:focus-visible, .vr-hoofd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-teller { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.18); }
.vr-balkje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 10px; font-size: 13px; color: var(--ink-soft); }
.vr-balkje select { margin-left: 6px; }
.vr-kaart { padding-top: 14px; padding-bottom: 14px; }
.vr-kaart.gekozen { outline: 2px solid var(--accent); }
.vr-kaart-rij { display: flex; gap: 14px; align-items: center; }
.vr-kies { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card-alt); cursor: pointer; }
.vr-kies input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.vr-duim { flex: none; width: 54px; height: 96px; overflow: hidden; border-radius: 8px; background: var(--card-alt); }
.vr-duim img { display: block; max-width: none; margin: -1px 0 0 -1px; }
.vr-hoofd { flex: 1; min-width: 0; cursor: pointer; }
.vr-hoofd h3 { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.vr-waarom { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.vr-open { flex: none; }
.vr-detail { margin-top: 16px; display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.vr-detail h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--accent); }
.vr-detail h4 span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-gold); font-size: 12px; }
.vr-origineel { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }
.vr-origineel em, .vr-hook-veld em { font-style: normal; font-weight: 700; color: var(--ink); margin-right: 6px; }
.vr-hooks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vr-hook { display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-alt); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45; }
button.vr-hook { cursor: pointer; }
button.vr-hook:hover { border-color: var(--accent); }
.vr-hook.actief { border: 2px solid var(--accent); padding: 11px 13px; }
.vr-hook-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vr-vink { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--accent); }
.vr-hook-waarom { font-size: 12.5px; color: var(--ink-soft); }
.vr-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.vr-rij2 { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vr-rij2:last-child { border-bottom: 0; }
.vr-rij2 p { margin: 0; font-size: 14px; line-height: 1.5; }
.vr-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding-top: 2px; }
.vr-rij2.let-op .vr-label { color: #F5C26B; }
.vr-lenzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vr-lens { padding: 12px 14px; border-radius: 12px; background: var(--card-alt); border: 1px solid var(--line); }
.vr-lens.zwak { border-color: var(--rose-ink); }
.vr-lens-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.vr-lens p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.vr-punten { display: inline-flex; gap: 3px; }
.vr-punten i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.vr-punten i.aan { background: var(--accent); }
.vr-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.vr-cijfers div { background: var(--card); padding: 8px 10px; }
.vr-cijfers dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.vr-cijfers dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vr-vellen { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.vr-vellen img { height: 220px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.vr-shots summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 6px 0; }
.vr-shots .vz-tabel-wrap { max-height: none; margin-top: 8px; }
.vr-shots td { vertical-align: top; font-size: 13px; }
.vr-tijd { white-space: nowrap; color: var(--ink-soft); }
.vr-overgang { color: var(--ink-soft); min-width: 90px; }
.vr-onze { font-weight: 600; }
.vr-klein { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.vr-detail-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vr-regels { padding-top: 6px; padding-bottom: 6px; }
.vr-regel { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vr-regel:last-child { border-bottom: 0; }
.vr-regel-tekst { flex: 1; min-width: 0; }
.vr-regel-titel { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-reden { margin-top: 4px; font-size: 12.5px; color: var(--rose-ink); }
.vr-regel-knoppen { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vr-meer { padding-top: 10px; text-align: center; }
.vr-rondes summary { cursor: pointer; }
.vr-rondes[open] summary { margin-bottom: 8px; }
.vr-termen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vr-balk { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: var(--solid); border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vr-balk-tekst { flex: 1 1 220px; display: grid; gap: 2px; }
.vr-balk-tekst span { font-size: 12.5px; color: var(--ink-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* De weg van een video van links naar rechts: vijf stappen, daarnaast in gebruik en afgewezen */
.vr-stappen { list-style: none; margin: 14px 0 0; padding: 0 0 4px; display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 14px; overflow-x: auto; }
.vr-stappen li { position: relative; display: flex; }
.vr-stappen li + li::before { content: '›'; position: absolute; left: -12px; top: 50%; transform: translateY(-52%); font-size: 20px; font-weight: 800; color: var(--ink-soft); pointer-events: none; }
.vr-stap { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 12px 12px; border-radius: 12px; background: var(--card-alt); border: 1px solid var(--line); color: var(--ink); cursor: pointer; font: inherit; }
.vr-stap:hover { border-color: var(--accent); }
.vr-stap.eind { border-color: var(--accent); }
.vr-stap.actief { background: var(--accent); color: var(--on-gold); border-color: var(--accent); }
.vr-stap:focus-visible, .vr-extra-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-stap-nr { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font-weight: 900; font-size: 13px; }
.vr-stap-tekst { display: grid; gap: 2px; min-width: 0; }
.vr-stap-tekst b { font-size: 14px; line-height: 1.2; }
.vr-stap-tekst small { font-size: 11.5px; line-height: 1.3; opacity: .8; }
.vr-stap-aantal { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.vr-extra { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.vr-extra-knop { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.vr-extra-knop:hover { color: var(--ink); }
.vr-extra-knop.actief { background: var(--accent); color: var(--on-gold); border-color: var(--accent); }
.vr-stapkop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 6px 4px 12px; }
.vr-stapkop h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 900; color: var(--accent); }
.vr-stapkop h3 .muted { font-size: 14px; font-weight: 700; }
.vr-stapkop p { margin: 4px 0 0; max-width: 80ch; font-size: 13.5px; }
.vr-stapkop-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.vr-sorteer select { margin-left: 6px; }
.vr-regel .vr-kies { width: 30px; height: 30px; }
.vr-kies.leeg { visibility: hidden; }
.vr-regel.gekozen { background: var(--card-alt); border-radius: 10px; }
.vr-regel .vr-duim { width: 40px; height: 71px; display: grid; place-items: center; text-decoration: none; }
.vr-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-speel { color: var(--ink-soft); font-size: 14px; }
.vr-plek { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--card-alt); font-weight: 700; color: var(--ink); }
.vr-regel { flex-wrap: wrap; }
.vr-regel-verloop { flex-basis: 100%; padding: 4px 0 4px 96px; }
.vr-verloop { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.vr-verloop li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 13px; line-height: 1.45; }
.vr-verloop li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.vr-verloop li.vr-v-keuring::before, .vr-verloop li.vr-v-plan::before, .vr-verloop li.vr-v-hook::before { background: var(--accent); }
.vr-verloop li.vr-v-afgewezen::before, .vr-verloop li.vr-v-verlopen::before { background: var(--rose-ink); }
.vr-verloop li.vr-v-geplaatst::before, .vr-verloop li.vr-v-resultaat::before { background: #34D399; }
.vr-verloop time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vr-plek i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-gold); font-size: 11px; font-weight: 900; }
@media (max-width: 720px) {
    .vr-stappen { grid-template-columns: repeat(5, 172px); }
    .vr-extra { justify-content: flex-start; }
    .vr-regel-verloop { padding-left: 0; }
    .vr-verloop li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 720px) {
    .vr-kaart-rij { flex-wrap: wrap; }
    .vr-hoofd { flex-basis: calc(100% - 120px); }
    .vr-open { margin-left: auto; }
    .vr-rij2 { grid-template-columns: 1fr; gap: 4px; }
    .vr-regel { flex-wrap: wrap; }
    .vr-regel-knoppen { justify-content: flex-start; }
    .vr-vellen img { height: 160px; }
    .vr-balk { gap: 8px 10px; padding: 10px 12px; bottom: 8px; }
    .vr-balk-tekst span { display: none; }
    .vr-balk .btn.accent { margin-left: auto; }
}
.eng-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.eng-filters select, .eng-filters input { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line); background: var(--card); outline: none; }
.eng-filters select:focus, .eng-filters input:focus { border-color: rgba(252,187,0,.7); }
.eng-filters input { flex: 1; min-width: 180px; }
.eng-wacht { border-left: 4px solid var(--amber-ink); }
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dossier-grid.compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.dossier-kaart { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--card); }
.dossier-kaart:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.dossier-beeld { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-weight: 700; font-size: 20px; }
.dossier-grid.compact .dossier-beeld { aspect-ratio: 1 / 1; }
.dossier-beeld img, .dossier-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dossier-speel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.dossier-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.dossier-info .t { font-weight: 600; font-size: 13px; line-height: 1.3; }
.dossier-info .m { font-size: 11.5px; color: var(--ink-soft); }
.dossier-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.dossier .sub .chip { vertical-align: middle; }
.tijdlijn { position: relative; margin-top: 8px; }
.tl-stap { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-stap::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.tl-stap:last-child::before { display: none; }
.tl-punt { width: 12px; height: 12px; margin: 4px 0 0 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(252,211,77,.18); }
.tl-kop { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 13.5px; }
.tl-inhoud .m { font-size: 12.5px; color: var(--ink); margin-bottom: 3px; line-height: 1.45; }
.tl-inhoud .m.muted, .tl-inhoud .muted { color: var(--ink-soft); }
.dossier-lijst { margin: 4px 0 6px 18px; font-size: 12.5px; line-height: 1.45; }
.dossier-lijst li { margin-bottom: 3px; }
.dossier-lijst.fout li { color: var(--rose-ink); }
.dossier-noot { background: var(--amber); color: var(--amber-ink); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin: 6px 0; }
.dossier-product { display: flex; gap: 10px; align-items: flex-start; }
.dossier-product img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.dossier-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dossier-beelden figure { margin: 0; }
.dossier-beelden img { width: 100%; border-radius: 10px; display: block; border: 1px solid var(--line); }
.dossier-beelden figcaption { font-size: 11.5px; margin-top: 4px; }
.dossier-takes { display: grid; gap: 8px; margin: 6px 0; }
.take { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.take.gekozen { border-color: var(--lime-ink); background: var(--lime); }
.take audio { width: 100%; height: 34px; margin-top: 4px; }
.dossier-video { width: 100%; max-width: 320px; border-radius: 12px; background: #111; display: block; margin-bottom: 4px; }
.werk-dag { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: capitalize; margin: 14px 0 4px; }
.werk-regel { cursor: pointer; align-items: flex-start; }
.werk-tijd { font-size: 12px; color: var(--ink-faint); width: 44px; flex-shrink: 0; padding-top: 2px; }
.werk-details { margin-top: 8px; }
.werk-pre { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; background: rgba(0,0,0,.2); border-radius: 8px; padding: 8px 10px; max-height: 260px; overflow: auto; margin: 4px 0 8px; }
@media (max-width: 900px) { .eng-grid { grid-template-columns: 1fr; } }

/* ── Posts en dossiers als projecten (inklapbaar) ── */
.project-acties { display: flex; gap: 6px; margin-bottom: 10px; }
.projecten { display: grid; gap: 10px; }
.project { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); overflow: hidden; }
.project[open] { border-color: var(--accent); box-shadow: var(--shadow); }
.project > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; }
.project > summary::-webkit-details-marker { display: none; }
.project > summary:hover { background: var(--card-alt); }
.project[open] > summary { border-bottom: 1px solid var(--line); background: var(--card-alt); }
.project-beeld { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-weight: 700; }
.project-beeld img, .project-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-kop { min-width: 0; }
.project-kop .t { font-weight: 600; font-size: 14px; }
.project-kop .m { font-size: 12px; color: var(--ink-soft); margin: 2px 0 6px; }
.project-stappen { display: flex; gap: 4px; flex-wrap: wrap; }
.ps { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
.ps.klaar { background: var(--lime); color: var(--lime-ink); }
.ps.fout { background: var(--rose); color: var(--rose-ink); }
.ps.bezig { background: var(--amber); color: var(--amber-ink); }
.ps.leeg { background: transparent; color: var(--ink-faint); border-color: var(--line); }
.project-eind { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.project-eind .m { font-size: 12px; color: var(--ink-soft); }
.project-pijl { color: var(--ink-faint); transition: transform .15s; }
.project[open] .project-pijl { transform: rotate(180deg); }
.project-body { padding: 16px 18px 6px; }
@media (max-width: 700px) { .project > summary { grid-template-columns: 56px 1fr; } .project-eind { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } .project-beeld { width: 56px; height: 56px; } }

/* run-opties: de voorbeelden met een ster, aan te vinken */
.vb-lijst { flex-basis: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px; background: var(--card-alt); max-height: 320px; overflow: auto; }
.vb-keuze { display: grid; grid-template-columns: auto 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.vb-keuze:first-of-type { border-top: 0; }
.vb-keuze img, .vb-plat { width: 44px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink-faint); }
.vb-tekst { display: flex; flex-direction: column; font-size: 12.5px; min-width: 0; }
.vb-tekst .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }

.opdracht-regel .m { margin-top: 2px; }

/* ── Engine live meekijken ─────────────────────────────────────────────────────────────── */
.live-knop { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; }
.live-knop.aan { background: var(--lime); border-color: rgba(34,197,94,.35); color: var(--lime-ink); }
.live-knop-tijd { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.live-stip { width: 8px; height: 8px; border-radius: 50%; background: #2ea44f; box-shadow: 0 0 0 0 rgba(46,164,79,.5); animation: live-puls 2s infinite; flex-shrink: 0; }
.live-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--lime-ink); text-transform: uppercase; letter-spacing: .06em; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(46,164,79,.5); } 70% { box-shadow: 0 0 0 8px rgba(46,164,79,0); } 100% { box-shadow: 0 0 0 0 rgba(46,164,79,0); } }
.eng-live { border: 1px solid var(--line); }

.live-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; margin: 10px 0 14px; border: 1px solid transparent; }
.live-banner .btn { margin-left: auto; flex-shrink: 0; }
.lb-icoon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; position: relative; background: rgba(0,0,0,.2); display: grid; place-items: center; }
.lb-icoon::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.lb-titel { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.lb-sub { font-size: 13px; opacity: .85; margin-top: 2px; }
.lb-tekst { min-width: 0; }
.lb-brein { background: var(--lavender); color: var(--accent); border-color: var(--gold-line); }
.lb-brein .lb-icoon::after, .lb-engine .lb-icoon::after, .lb-klus .lb-icoon::after { animation: live-puls-kleur 1.6s ease-in-out infinite; }
.lb-jij { background: var(--amber); color: var(--amber-ink); border-color: rgba(249,156,0,.35); }
.lb-wacht { background: var(--card-alt); color: var(--accent); border-color: var(--line); }
.lb-klus, .lb-engine { background: var(--blue); color: var(--blue-ink); border-color: rgba(96,165,250,.3); }
.lb-klaar { background: var(--lime); color: var(--lime-ink); border-color: rgba(34,197,94,.3); }
.lb-rust { background: var(--card); color: var(--ink-soft); border-color: var(--line); }
@keyframes live-puls-kleur { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .55; } }

.live-run { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--ink-soft); padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.live-run b { color: var(--ink); }
.live-run-knoppen { margin-left: auto; display: flex; gap: 6px; }
.live-sectiekop, .lk-subkop { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
.lk-subkop { margin: 14px 0 6px; }

/* stappenbalk */
.stapper-wrap { overflow-x: auto; margin: 4px -4px 4px; padding: 4px; }
.stapper { display: flex; min-width: 460px; }
.stp { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 12px; text-align: center; background: none; border: 0; cursor: pointer; color: var(--ink-soft); }
.stp:hover { background: var(--card-alt); }
.stp::before { content: ''; position: absolute; top: 23px; left: calc(-50% + 20px); width: calc(100% - 40px); height: 2px; background: var(--line); }
.stp:first-child::before { display: none; }
.stp.stp-klaar + .stp::before { background: #9CC36A; }
.stp-rondje { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--solid); border: 2px solid var(--line); color: var(--ink-faint); position: relative; z-index: 1; }
.stp-naam { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.stp-sub { font-size: 11px; }
.stp-klaar .stp-rondje { background: var(--lime); border-color: #9CC36A; color: var(--lime-ink); }
.stp-bezig .stp-rondje { background: var(--solid); border-color: var(--accent); color: var(--accent); animation: stp-puls 2s infinite; }
.stp-wacht .stp-rondje { background: var(--amber); border-color: #E0A93C; color: var(--amber-ink); }
.stp-wacht .stp-sub { color: var(--amber-ink); font-weight: 600; }
.stp.gekozen { background: var(--card-alt); box-shadow: inset 0 -3px 0 var(--accent); }
@keyframes stp-puls { 0% { box-shadow: 0 0 0 0 rgba(252,211,77,.35); } 70% { box-shadow: 0 0 0 8px rgba(252,211,77,0); } 100% { box-shadow: 0 0 0 0 rgba(252,211,77,0); } }

/* wanneer live: per post */
.live-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.live-post { display: flex; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); min-width: 0; }
.lp-inh { min-width: 0; flex: 1; }
.lp-titel { font-weight: 700; font-size: 14.5px; margin: 6px 0 2px; letter-spacing: -.01em; }
.lp-wanneer { font-size: 13px; color: var(--ink-soft); }
.lp-wanneer b { color: var(--ink); }
.datum-tegel { flex-shrink: 0; width: 62px; border-radius: 12px; background: linear-gradient(180deg, var(--accent), var(--gold-deep)); color: var(--on-gold); display: flex; flex-direction: column; align-items: center; padding: 7px 0 8px; line-height: 1.1; align-self: flex-start; }
.datum-tegel.live { background: linear-gradient(135deg, #22C55E, #16A34A); color: #fff; }
.dt-dag, .dt-maand { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.dt-nr { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.dt-uur { font-size: 12px; font-weight: 700; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.14); }
.fase-balk { display: flex; gap: 3px; flex-wrap: wrap; margin: 10px 0 4px; }
.fase-balk .fb { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--card); color: var(--ink-faint); border: 1px solid var(--line); }
.fase-balk .fb.klaar { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.fase-balk .fb.nu { background: var(--accent); color: var(--on-gold); border-color: transparent; }
.kanaal-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px 3px 8px; background: var(--card); border: 1px solid var(--line); }
.kanaal-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kanaal, var(--accent)); }

/* brein en engine: tijdlijnen */
.live-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media (max-width: 1000px) { .live-kolommen { grid-template-columns: 1fr; } }
.live-kaart { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); min-width: 0; }
.lk-kop { display: flex; gap: 10px; align-items: center; }
.lk-icoon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.lk-icoon.brein { background: var(--lavender); color: var(--accent); }
.lk-icoon.engine { background: var(--blue); color: var(--blue-ink); }
.lk-titel { font-weight: 700; font-size: 14px; }
.lk-sub { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-faint); }
.stip-bezig { background: var(--accent); animation: live-puls-kleur 1.4s ease-in-out infinite; }
.stip-actief { background: #2ea44f; }
.stip-wacht { background: #E0A93C; }
.lk-nu { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--lavender); color: var(--accent); font-size: 13px; }
.lk-taken { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-soft); display: grid; gap: 3px; }
.feed { display: grid; max-height: 360px; overflow-y: auto; }
.feed-regel { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: start; padding: 7px 4px; border-top: 1px solid var(--line); border-radius: 8px; }
.feed-regel:first-child { border-top: 0; }
.feed-stip { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--ink-faint); }
.fs-klaar .feed-stip { background: #7FB24A; }
.fs-bezig .feed-stip { background: var(--accent); animation: live-puls-kleur 1.4s ease-in-out infinite; }
.fs-mislukt .feed-stip { background: var(--rose-ink); }
.fs-overgeslagen .feed-stip { background: var(--ink-faint); }
.feed-inh { min-width: 0; }
.feed-titel { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.feed-sub { font-size: 11.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.feed-fout { font-size: 11.5px; color: var(--rose-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: help; }
.feed-tijd { font-size: 11px; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.feed-leeg { font-size: 12.5px; color: var(--ink-faint); padding: 8px 4px; }
.feed-regel.nieuw { animation: feed-nieuw 2.4s ease-out; }
@keyframes feed-nieuw { 0% { background: rgba(252,211,77,.18); } 100% { background: transparent; } }
.live-spinner { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(252,211,77,.25); border-top-color: var(--accent); animation: live-draai .9s linear infinite; flex-shrink: 0; }
@keyframes live-draai { to { transform: rotate(360deg); } }

/* ── Stappen ── */
.stappen-paneel .stapper-wrap { margin-top: 2px; }
.stap-detail { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
.sd-kop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.sd-titel { font-size: 17px; font-weight: 700; letter-spacing: -.02em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd-uitleg { font-size: 13px; color: var(--ink-soft); margin-top: 4px; max-width: 760px; }
.sd-links { display: flex; gap: 6px; flex-shrink: 0; }
.stap-actiebalk { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--amber); border: 1px solid rgba(249,156,0,.35); }
.stap-actiebalk .btn { margin-left: auto; }
.ab-alles { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ab-teller { font-size: 12.5px; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.sk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sk-grid.sk-script, .sk-grid.sk-beelden, .sk-grid.sk-check, .sk-grid.sk-resultaat { grid-template-columns: 1fr; }
.stap-kaart { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.stap-kaart:hover { box-shadow: var(--shadow); }
.stap-kaart.kiesbaar:has(.sk-vink input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--lavender); }
.sk-balk { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 12px; background: var(--card-alt); border-bottom: 1px solid var(--line); }
.sk-vink { display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sk-vink input, .ab-alles input { width: 16px; height: 16px; accent-color: var(--accent); }
.sk-inh { padding: 14px; }
.sk-kop { margin-bottom: 10px; }
.sk-titel { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 6px; }
.sk-rij { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.sk-maker { font-weight: 700; }
.sk-cijfers { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 6px; }
.sk-cijfers b { color: var(--ink); }
.sk-tekst, .sk-reden { font-size: 12.5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-reden { margin-top: 6px; font-style: italic; }
.sk-kal { display: flex; gap: 14px; }
.sk-kal-inh { min-width: 0; flex: 1; }
.sk-kal .sk-titel { margin: 8px 0 4px; }
.sk-hook { font-size: 13px; margin: 6px 0; }
.sk-vb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 8px; color: var(--ink-soft); }
.vb-speel { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-gold); font-size: 11px; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; padding-left: 2px; }
.vb-speel:hover { background: var(--accent-2); }
.sk-script { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .sk-script { grid-template-columns: 1fr; } }
.sk-label { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 6px; }
.sk-kol > .sk-label:first-child { margin-top: 0; }
.sk-vo { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--card-alt); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.5; }
.sk-tib { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-tib span { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--side-3); color: #fff; }
.sk-boards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-boards li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.sb-nr { font-weight: 700; font-size: 11px; min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--lavender); color: var(--accent); }
.sb-duur { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.sk-post { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.2); }
.sk-post .sk-label { margin-top: 0; }
.sk-post-tekst { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.sk-tags { font-size: 12.5px; color: var(--accent); margin-top: 6px; }
.sk-galerij { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.sk-board { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sk-board-info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.sk-board-tekst { font-size: 13px; line-height: 1.45; }
.sk-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sk-eerder summary { cursor: pointer; font-size: 12px; opacity: .75; }
.sk-beeld { flex-shrink: 0; height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); padding: 0; cursor: zoom-in; display: block; }
.sk-beeld img { height: 100%; width: auto; max-width: 440px; object-fit: contain; display: block; }
video.sk-beeld { cursor: default; width: auto; max-width: 320px; }
.sk-score { display: flex; align-items: center; gap: 12px; font-size: 13px; margin: 4px 0 8px; }
.sk-score-balk { flex: 1; max-width: 280px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.sk-score-balk span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.sk-score-balk.lime span { background: #7FB24A; } .sk-score-balk.rose span { background: var(--rose-ink); }
.sk-fouten { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--rose-ink); display: grid; gap: 4px; }
.beeld-groot img { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 12px; background: var(--bg); display: block; }

/* ── Nieuwe run ── */
.rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.rf-blok { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card-alt); display: grid; gap: 10px; align-content: start; min-width: 0; }
.rf-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.rf-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-gold); font-size: 11.5px; display: grid; place-items: center; }
.rf-rij { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rf-veld { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.rf-veld input { width: 110px; }
.rf-hint { font-size: 12px; color: var(--ink-soft); }
.rf-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.rf-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rf-std { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.linkknop { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: inherit; cursor: pointer; text-decoration: underline; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); gap: 2px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.seg input:checked + span { background: var(--accent); color: var(--on-gold); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.plan-rijen { display: grid; gap: 8px; }
.plan-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: end; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pr-wie { display: flex; gap: 8px; align-items: center; font-size: 12.5px; min-width: 0; }
.pr-wie img, .pr-nr { width: 30px; height: 40px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.pr-nr { display: grid; place-items: center; background: var(--lavender); color: var(--accent); font-weight: 700; height: 30px; border-radius: 50%; }
.pr-veld { display: grid; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.pr-veld input { font-size: 12.5px; padding: 5px 8px; width: 100%; min-width: 0; box-sizing: border-box; }
.pr-uitleg { grid-column: 1 / -1; font-size: 11.5px; color: var(--accent); }
@media (max-width: 700px) { .plan-rij { grid-template-columns: 1fr 1fr; } .pr-wie { grid-column: 1 / -1; } .live-banner { flex-wrap: wrap; } .live-banner .btn { margin-left: 50px; } .live-run-knoppen { margin-left: 0; } .sd-kop { flex-wrap: wrap; } }
.rf-blok input[type="number"], .rf-blok input[type="date"], .rf-blok input[type="datetime-local"], .rf-std select { padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.07); font: inherit; font-size: 13px; color: var(--ink); }
.rf-blok input:focus, .rf-std select:focus { outline: 2px solid rgba(252,211,77,.25); border-color: var(--accent); }
@media (max-width: 560px) { .plan-rij { grid-template-columns: 1fr; } }

/* ── Productieverzoek: per video de modellen met hun prijs ── */
.vz { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card-alt); }
.vz.vz-open { border-color: #E0A93C; background: var(--amber); }
.vz.vz-gekozen { background: var(--lime); border-color: rgba(34,197,94,.3); }
.vz.vz-leeg { font-size: 12.5px; color: var(--ink-soft); }
.vz-kop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.vz-titel { font-weight: 700; font-size: 14px; }
.vz-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.vz-uitleg { font-size: 12.5px; margin: 8px 0; }
.vz-keuze { font-size: 13px; margin-top: 8px; }
.vz-tabel-wrap { max-height: 380px; overflow: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.vz-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vz-tabel th { position: sticky; top: 0; background: var(--solid); text-align: left; font-size: 11px; color: var(--ink-soft); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.vz-tabel td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vz-tabel tr:last-child td { border-bottom: 0; }
.vz-tabel .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) { .vz-tabel th:nth-child(2), .vz-tabel td:nth-child(2) { display: none; } }

/* een lopende run: stoppen of stoppen en opnieuw */
.rf-lopend { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--amber); border: 1px solid rgba(249,156,0,.35); font-size: 13px; color: var(--amber-ink); }
.rf-lopend > div { flex: 1; min-width: 240px; }

/* stoppen kan altijd: de knop in de kop van de Engine-pagina */
.stop-knop { color: var(--rose-ink); border-color: rgba(248,113,113,.4); }
.stop-knop:hover { background: var(--rose); }

/* ── E-mail ── */
.mail-waarschuwing { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--amber); color: var(--amber-ink); font-size: 13px; }
.mail-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mail-grid > .panel { margin: 0; }
.mail-groep { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 6px; }
.mail-sjabloon { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--ink-soft);
    padding: 8px 10px; border-radius: 9px; font: inherit; font-size: 13.5px; cursor: pointer; }
.mail-sjabloon:hover { background: var(--card-alt); color: #fff; }
.mail-sjabloon.actief { background: var(--lavender); border-color: var(--gold-line); color: var(--accent); font-weight: 600; }
.mail-tag { font-size: 10px; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.mail-blokken { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.mail-blok { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.mail-blok-kop { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--accent); }
.mail-blok-kop button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 7px; width: 26px; height: 24px; margin-left: 4px; cursor: pointer; font-size: 12px; }
.mail-blok-kop button:hover { border-color: var(--gold-line); color: var(--accent); }
.mail-blok input:not([type=checkbox]), .mail-blok textarea, .mail-blok select { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06);
    border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; outline: none; resize: vertical; }
.mail-blok input:focus, .mail-blok textarea:focus, .mail-blok select:focus { border-color: var(--accent); }
.mail-blok .field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mail-blok .field-row > * { flex: 1; min-width: 120px; }
.mail-code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px !important; }
.mail-hint { font-size: 11.5px; color: var(--ink-faint); }
.mail-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); flex: 0 0 auto !important; min-width: 0 !important; }
.mail-toevoegen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-faint); }
.mail-bijlagen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mail-bijlage { font-size: 12.5px; background: var(--card-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 10px; }
.mail-bijlage small { color: var(--ink-faint); }
.mail-bijlage button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; }
.mail-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.mail-frame-wrap { background: #f4f1f8; border-radius: 12px; overflow: auto; display: flex; justify-content: center; }
.mail-frame-wrap iframe { border: 0; min-height: 600px; background: #f4f1f8; display: block; }
@media (max-width: 1400px) { .mail-grid { grid-template-columns: 200px minmax(0, 1fr); } .mail-voorbeeld { grid-column: 1 / -1; } }
@media (max-width: 800px) { .mail-grid { grid-template-columns: 1fr; } }

/* ── Mailflows ── */
.fl-kop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fl-kop select { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 13px; max-width: 240px; }
.fl-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.fl-grid > .panel { margin: 0; }
.fl-lijst .mail-sjabloon { display: grid; grid-template-columns: 14px 1fr; gap: 0 6px; align-items: center; }
.fl-sub { grid-column: 2; font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.fl-status { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.fl-status.aan { background: var(--lime-ink); box-shadow: 0 0 0 3px var(--lime); }
.fl-flowkop { display: flex; gap: 10px; align-items: center; }
.fl-naam { flex: 1; font: inherit; font-size: 18px; font-weight: 800; color: #fff; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 4px 8px; outline: none; min-width: 0; }
.fl-naam:hover, .fl-naam:focus { border-color: var(--line); background: rgba(255,255,255,.05); }
.fl-schakel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; position: relative; }
.fl-schakel input { position: absolute; opacity: 0; width: 0; height: 0; }
.fl-schakel span { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.15); position: relative; transition: background .15s; }
.fl-schakel span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fl-schakel input:checked + span { background: #16A34A; }
.fl-schakel input:checked + span::after { transform: translateX(16px); }
.fl-schakel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-acties { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.fl-acties select { padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 12.5px; }
.fl-palet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-faint); margin: 4px 0 12px; }
.fl-chip { cursor: grab; user-select: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--gold-line); color: var(--accent); background: var(--lavender); }
.fl-chip:active { cursor: grabbing; }
.fl-trigger { border: 1px solid var(--gold-line); background: var(--amber); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fl-trigger-kop { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); }
.fl-trigger select { padding: 7px 10px; border-radius: 9px; background: rgba(0,0,0,.2); border: 1px solid var(--line); font-size: 13px; width: 100%; }
.fl-stops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fl-trigger .fl-stops .fl-stopadd { width: auto; max-width: 200px; font-size: 12px; padding: 4px 8px; }
.fl-stappen { display: flex; flex-direction: column; position: relative; margin: 2px 0 0 14px; padding-left: 14px; border-left: 2px solid var(--line); }
.fl-stap { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; background: var(--card); }
.fl-stap::before { content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.fl-wacht { background: transparent; border-style: dashed; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; }
.fl-wacht::before { border-color: var(--ink-faint); }
.fl-wacht select, .fl-wacht input { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; font-size: 12.5px; }
.fl-klein { width: 58px; }
.fl-veld { width: 120px; }
.fl-mail { cursor: pointer; }
.fl-mail:hover { border-color: var(--gold-line); }
.fl-mail.gekozen { border-color: var(--accent); background: var(--lavender); }
.fl-mail-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fl-mail-tekst b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-mail-tekst small { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-greep { cursor: grab; color: var(--ink-faint); font-size: 13px; letter-spacing: -2px; user-select: none; padding: 0 2px; }
.fl-stap-knoppen { margin-left: auto; display: flex; gap: 4px; }
.fl-stap-knoppen button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 7px; width: 26px; height: 24px; cursor: pointer; font-size: 12px; }
.fl-stap-knoppen button:hover { border-color: var(--gold-line); color: var(--accent); }
.fl-drop { min-height: 28px; display: flex; justify-content: center; gap: 6px; align-items: center; border: 1px dashed transparent; border-radius: 10px; margin: 2px 0; }
.fl-drop .fl-plus { opacity: 0; transition: opacity .12s; }
.fl-stappen:hover .fl-drop .fl-plus, .fl-drop:focus-within .fl-plus { opacity: 1; }
.fl-plus { font-size: 11px; font-weight: 600; background: var(--card-alt); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.fl-plus:hover { color: var(--accent); border-color: var(--gold-line); }
body.fl-sleept-stap .fl-drop { border-color: var(--line); }
body.fl-sleept-stap .fl-drop .fl-plus { display: none; }
.fl-bdrop { height: 14px; border-radius: 8px; border: 1px dashed transparent; }
body.fl-sleept-blok .fl-bdrop { border-color: var(--line); }
.fl-drop.fl-over, .fl-bdrop.fl-over { border-color: var(--accent); background: var(--lavender); }
.fl-weg { opacity: .4; }
.fl-einde { font-size: 11.5px; color: var(--ink-faint); padding: 6px 0 0; }
.fl-editor .mail-blokken { gap: 0; }
.fl-bgreep { margin-right: 6px; }
.fl-velden { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-veldknop { font: 500 11px ui-monospace, Consolas, monospace; background: var(--card-alt); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.fl-veldknop:hover { color: var(--accent); border-color: var(--gold-line); }
.fl-pil { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--card-alt); color: var(--ink-soft); }
.fl-pil.actief { background: var(--lavender); color: var(--accent); }
.fl-pil.klaar { background: var(--lime); color: var(--lime-ink); }
.fl-pil.fout, .fl-pil.gestopt, .fl-pil.afgemeld { background: var(--rose); color: var(--rose-ink); }
.fl-fout { color: var(--rose-ink); }
.fl-inst { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.fl-inst > .panel { margin: 0; }
.fl-inst > .mail-acties { grid-column: 1 / -1; }
.fl-branches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fl-bib-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; }
.fl-bib { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--card); }
.fl-bib small { color: var(--ink-faint); font-size: 12px; }
.fl-bib p { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 6px; flex: 1; }
.fl-bib .btn { align-self: flex-start; }
@media (max-width: 1400px) { .fl-grid { grid-template-columns: 260px minmax(0, 1fr); } .fl-editor { grid-column: 1 / -1; } }
@media (max-width: 800px) { .fl-grid { grid-template-columns: 1fr; } }

/* ── Mailflows: schematisch overzicht ── */
.ov-samen { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.ov-samen b { color: #fff; font-size: 18px; margin-right: 4px; }
.ov-legenda { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.ov-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); margin-left: 8px; }
.ov-dot.start { background: var(--amber-ink); border-color: var(--amber-ink); }
.ov-dot.eigenaar { border-color: var(--lime-ink); }
.ov-groep { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 8px; }
.ov-lane { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.ov-lane.uit { opacity: .62; }
.ov-lane-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ov-naam { background: none; border: 0; padding: 0; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
.ov-naam:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ov-stop { color: var(--ink-faint); font-size: 12px; }
.ov-scroll { overflow-x: auto; padding-bottom: 4px; }
.ov-track { display: flex; min-width: min-content; }
.ov-node { flex: 0 0 200px; position: relative; padding-top: 24px; }
.ov-node::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line); }
.ov-node:first-child::before { left: 12px; }
.ov-node:last-child::before { right: calc(100% - 12px); }
.ov-node::after { content: ""; position: absolute; top: 2px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.ov-node.start::after { background: var(--amber-ink); border-color: var(--amber-ink); }
.ov-node.eigenaar::after { border-color: var(--lime-ink); }
.ov-delay { position: absolute; top: -1px; left: 22px; font: 600 11px ui-monospace, Consolas, monospace; color: var(--accent); background: var(--solid); padding: 0 6px; border-radius: 4px; }
.ov-node.start .ov-delay { color: var(--amber-ink); }
.ov-card { margin-right: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 2px; height: 100%; }
.ov-node.start .ov-card { background: var(--amber); border-color: var(--gold-line); }
.ov-node.eigenaar .ov-card { border-color: rgba(52,211,153,.35); }
.ov-card b { font-size: 12.5px; line-height: 1.35; }
.ov-card small { font-size: 11px; color: var(--ink-faint); }

/* ── Mailflows: lijst per groep, opvolgmails ── */
.fl-zoek { width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 13px; outline: none; margin-bottom: 8px; }
.fl-zoek:focus { border-color: var(--accent); }
.fl-filter { display: flex; gap: 4px; margin-bottom: 8px; }
.fl-filter button { flex: 1; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 0; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; }
.fl-filter button.actief { background: var(--lavender); border-color: var(--gold-line); color: var(--accent); }
.fl-groep { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 6px; background: none; border: 0; border-top: 1px solid var(--line); color: #fff; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-align: left; }
.fl-groep small { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.fl-pijl { width: 12px; color: var(--accent); }
.fl-item.actief { background: rgba(255,255,255,.03); border-radius: 10px; padding-bottom: 6px; margin-bottom: 4px; }
.fl-sub-lijst { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 20px; padding-left: 10px; border-left: 2px solid var(--gold-line); }
.fl-sub-mail { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.fl-sub-mail:hover { background: var(--card-alt); color: #fff; }
.fl-sub-mail.actief { background: var(--lavender); border-color: var(--gold-line); color: var(--accent); }
.fl-nr { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--card-alt); color: var(--accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fl-sub-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fl-sub-tekst small { font-size: 11px; color: var(--ink-faint); }
.fl-opvolg { align-self: flex-start; margin: 4px 0 2px 4px; background: none; border: 1px dashed var(--gold-line); color: var(--accent); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.fl-opvolg:hover { background: var(--lavender); }
.fl-opvolg.groot { align-self: stretch; margin: 10px 0 4px; padding: 8px; font-size: 12.5px; border-radius: 12px; }
.ov-lane { cursor: pointer; transition: border-color .12s; }
.ov-lane:hover { border-color: var(--gold-line); }
.ov-node[data-ov-stap] .ov-card:hover { border-color: var(--accent); background: var(--lavender); }
.ov-samen .btn { margin-left: auto; }
.ov-samen .ov-legenda { margin-left: 0; }
.fl-sub-tekst { overflow: hidden; }
.fl-sub-tekst > span, .fl-sub-kop { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* E-mail: mails uit flows */
.mail-lijst .mail-flowkop { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; border-top: 0; margin-top: 2px; padding: 6px 4px; }
.mail-lijst .mail-flowkop .fl-status { flex: 0 0 8px; }
.mail-groep small { font-weight: 500; letter-spacing: 0; }
@media (max-width: 860px) { .kp-menu { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; } .kp-groep { flex-basis: 100%; } }