/* StoryTailors CRM — systeemlettertypen (geen externe fonts) */
:root {
  --tekst: #1f2430; --grijs: #6b7280; --lijn: #e5e7eb; --vlak: #f7f7f8; --wit: #fff;
  --accent: #e8590c; --accent-licht: #fff1e6; --groen: #2f9e44; --rood: #c92a2a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Ubuntu, sans-serif; color: var(--tekst); background: var(--vlak); }
main { padding: 16px 20px 40px; }
code { font-size: 12px; background: var(--vlak); padding: 1px 4px; border-radius: 3px; }

.kop { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.merk { font-size: 16px; }
.merk b { color: var(--accent); }
.kop nav a { color: var(--grijs); text-decoration: none; padding: 6px 0; }
.kop nav a.actief { color: var(--tekst); border-bottom: 2px solid var(--accent); }
.uitloggen { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--grijs); }

.knop, .knop-licht { font: inherit; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.knop { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.knop-licht { background: var(--wit); color: var(--tekst); border: 1px solid var(--lijn); }
.knop-licht:hover { border-color: var(--grijs); }
button:disabled { opacity: .5; cursor: wait; }

.login { max-width: 340px; margin: 60px auto; background: var(--wit); padding: 24px 28px; border-radius: 10px; border: 1px solid var(--lijn); }
.login label { display: block; margin: 12px 0; color: var(--grijs); }
.login input { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; font: inherit; border: 1px solid var(--lijn); border-radius: 6px; }
.melding { background: var(--accent-licht); padding: 8px 10px; border-radius: 6px; }
.melding.fout { background: #ffe3e3; color: var(--rood); }

.overzicht { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 14px; color: var(--grijs); }
.tegel .getal { font-size: 20px; font-weight: 600; color: var(--tekst); margin-right: 4px; }
.tegel.nu .getal { color: var(--accent); }
.ruimte { flex: 1; }

.taak { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--grijs); }
.taak .balk { width: 200px; height: 6px; background: var(--lijn); border-radius: 3px; overflow: hidden; }
.taak .vulling { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.taak.fout { color: var(--rood); }

.gebeurd { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 14px; margin-bottom: 12px; }
.gebeurd summary { cursor: pointer; }
table.klein { border-collapse: collapse; margin-top: 6px; font-size: 13px; }
table.klein td { padding: 2px 10px 2px 0; vertical-align: top; }
tr.belangrijk td { font-weight: 600; color: var(--accent); }
.toelichting { color: var(--grijs); font-size: 12px; margin: 6px 0 0; }

.filters { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.filters input[type=search] { flex: 1; min-width: 240px; padding: 7px 10px; font: inherit; border: 1px solid var(--lijn); border-radius: 6px; }
.filters select { padding: 6px; font: inherit; border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); }
.teller { color: var(--grijs); }

.tabelvak { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; overflow: auto; max-height: calc(100vh - 260px); }
.tabel { border-collapse: collapse; width: 100%; }
.tabel th { position: sticky; top: 0; background: var(--wit); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); cursor: pointer; white-space: nowrap; user-select: none; }
.tabel th.gesorteerd-op::after { content: " ▲"; color: var(--accent); font-size: 10px; }
.tabel th.gesorteerd-op.aflopend::after { content: " ▼"; }
.tabel td { padding: 6px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel tbody tr:not(.detail) { cursor: pointer; }
.tabel tbody tr:not(.detail):hover, .tabel tr.open { background: var(--vlak); }
.tabel tr.rij-later td { color: var(--grijs); }
.tabel tr.detail td { background: var(--vlak); padding: 10px 16px 14px; }
.grijs { color: var(--grijs); }
.label-nu { background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.label-soort { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--lijn); }
.soort-mail { background: var(--accent-licht); color: var(--accent); }
.soort-adres { background: #e7f5ff; color: #1971c2; }
.soort-open { background: #ebfbee; color: var(--groen); }
dl { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; margin: 0; }
dt { color: var(--grijs); }
dd { margin: 0; }

/* --- Stap 2: acties --- */
a.knop, a.knop-licht { display: inline-block; text-decoration: none; }
.knop.klein, .knop-licht.klein { padding: 2px 8px; font-size: 12px; }
.taak { display: block; }
.taakkop { display: flex; align-items: center; gap: 10px; }
.taaklog { background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 8px; max-height: 220px; overflow: auto; font-size: 12px; white-space: pre-wrap; margin: 6px 0 0; }
.melding.fout, .opgeslagen.fout, .status.fout { color: var(--rood); }
th.vak, td.vak { width: 28px; text-align: center; cursor: default; }
.selectiebalk { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--accent-licht); border: 1px solid #ffd8a8; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.selectiebalk[hidden] { display: none; }
.extra-label { flex: 1; min-width: 300px; color: var(--grijs); font-size: 12px; }
.extra-label textarea { display: block; width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 6px; margin-top: 3px; }
.detailvak { display: grid; gap: 12px; }
.acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.statusform { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; border-top: 1px solid var(--lijn); padding-top: 10px; }
.statusform label { color: var(--grijs); font-size: 12px; }
.statusform label.breed { flex: 1; min-width: 260px; }
.statusform input { display: block; width: 100%; min-width: 180px; font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--lijn); border-radius: 6px; margin-top: 3px; }
.opgeslagen { color: var(--groen); font-size: 12px; }

.bladeren { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.maillijst { list-style: none; margin: 0; padding: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.maillijst li { padding: 8px 12px 8px 30px; border-bottom: 1px solid var(--lijn); cursor: pointer; position: relative; }
.maillijst li.actief { background: var(--accent-licht); }
.maillijst .vink { position: absolute; left: 10px; top: 8px; color: var(--groen); font-weight: 600; }
.mailvak { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 14px 18px; }
.mailvak[hidden] { display: none; }
.mailvak h2 { font-size: 16px; margin: 0 0 10px; }
.mailvak label { display: block; color: var(--grijs); margin-bottom: 10px; }
.mailvak input, .mailvak textarea { display: block; width: 100%; font: inherit; color: var(--tekst); padding: 7px 9px; border: 1px solid var(--lijn); border-radius: 6px; margin-top: 4px; }
.mailvak textarea { line-height: 1.5; resize: vertical; }
.mailknoppen { display: flex; gap: 8px; align-items: center; }
.na-maken { margin-top: 10px; }

/* --- Correspondentie per persoon --- */
.correspondentie h3 { font-size: 13px; margin: 0 0 6px; color: var(--grijs); font-weight: 600; }
.correspondentie details.mail { background: var(--wit); border: 1px solid var(--lijn); border-left: 3px solid var(--lijn); border-radius: 6px; margin-bottom: 6px; }
.correspondentie details.mail-van-ons { border-left-color: var(--accent); }
.correspondentie details.mail-van-hen, .correspondentie details.mail-reactie-indirect-, .correspondentie details.mail-afspraak { border-left-color: var(--groen); }
.correspondentie summary { cursor: pointer; padding: 6px 10px; display: flex; gap: 10px; align-items: baseline; }
.maildatum { color: var(--grijs); font-size: 12px; white-space: nowrap; }
.mailonderwerp { font-weight: 500; }
.mailkop { padding: 0 10px; font-size: 12px; }
.mailtekst { padding: 6px 10px; white-space: pre-wrap; max-height: 320px; overflow: auto; }
.mailvoet { padding: 4px 10px 8px; display: flex; gap: 8px; align-items: center; font-size: 12px; }
.soort-van-ons { background: var(--accent-licht); color: var(--accent); }
.soort-van-hen, .soort-afspraak, .soort-reactie-indirect- { background: #ebfbee; color: var(--groen); }
.soort-onbestelbaar { background: #ffe3e3; color: var(--rood); }
span.fout { color: var(--rood); }
.gebeurtenis { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 10px; margin-bottom: 6px; border-left: 3px solid #a5d8ff; background: var(--wit); border-radius: 6px; font-size: 13px; }
.gebeurtenistekst { font-weight: 500; }
.mailknopjes { display: inline-flex; gap: 6px; }
span.klein { font-size: 12px; }

/* --- LinkedIn-profielen --- */
.teller-nieuw { background: var(--accent); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; margin-left: 2px; }
.blok { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.blok h2 { font-size: 15px; margin: 0 0 6px; }
.zoekregel, .verwerkregel { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.zoekregel label, .verwerkregel label { color: var(--grijs); font-size: 12px; }
.zoekregel label.breed, .verwerkregel label.breed { flex: 1; min-width: 240px; }
.zoekregel input, .zoekregel select, .verwerkregel input, .verwerkregel select { display: block; width: 100%; min-width: 150px; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 6px; margin-top: 3px; background: var(--wit); }
.zoekknoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.klein-tabel td, .klein-tabel th { font-size: 13px; }
.bekend-zeker { color: var(--accent); font-weight: 500; }
.bekend-naam { color: var(--tekst); }
.vinkje { display: flex; gap: 6px; align-items: center; color: var(--tekst) !important; font-size: 13px !important; }
.vinkje input { width: auto !important; min-width: 0 !important; margin: 0 !important; }

/* --- Personen en organisaties --- */
.label-doelgroep { display: inline-block; background: #f1f3f5; color: var(--tekst); border-radius: 4px; padding: 0 6px; font-size: 12px; margin: 1px 2px 1px 0; }
.blok.waarschuwing { border-color: #ffd8a8; background: var(--accent-licht); }
.dubbelregel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
tr.rij-link { cursor: pointer; }
tr.rij-link:hover { background: var(--vlak); }
.dienstverband { border: 1px solid var(--lijn); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.dienstverband.beeindigd { opacity: .65; }
.dv-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.klein-dl { grid-template-columns: 140px 1fr; font-size: 13px; }
.doelgroepform { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.doelgroepform input.kort { width: 200px !important; display: inline-block; padding: 4px 6px; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; }
.formulier { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.formulier label { color: var(--grijs); font-size: 12px; }
.formulier label[hidden] { display: none; }
.formulier label.breed { flex: 1; min-width: 240px; }
.formulier input, .formulier select { display: block; width: 100%; min-width: 160px; font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--lijn); border-radius: 6px; margin-top: 3px; background: var(--wit); }
details.bewerk { margin-top: 8px; }
details.bewerk > summary { cursor: pointer; color: var(--accent); }
.opgeslagen.fout { color: var(--rood); }