/* =====================================================================
   templates.css — Module 2.5b · Templatebeheer. Registerlijst +
   drawer met merge-velden en template-editor. Tokens + bouwstenen.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.tpl { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.tpl-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; }
.tpl-lijst__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tpl-lijst__kop strong { font-size: .95rem; }
.tpl-lijst__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; max-width: 72ch; }

.tpl-rij { display: grid; grid-template-columns: 1.4fr .7fr 1.6fr 1fr .7fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.tpl-rij:hover { background: var(--c-creme); }
.tpl-rij--kop { padding: 6px 18px 8px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.tpl-rij--kop:hover { background: transparent; }
.tpl-rij__naam { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--c-ink); }
.tpl-rij__koppelt { font-size: .7rem; color: var(--c-ink-3); }
.tpl-rij__versie { font-size: .68rem; color: var(--c-groen-d); font-weight: 700; }
.tpl-rij .chip { justify-self: start; }

.tpl-kop { display: block; margin: 14px 0 7px; }
.tpl-kop:first-child { margin-top: 0; }
.tpl-velden { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-veld { font-size: .64rem; font-weight: 600; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 3px 8px; border-radius: 7px; }
.tpl-koppeling { font-size: .76rem; line-height: 1.5; color: var(--c-ink-2); margin: 0; }
.tpl-body { font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 14px 16px; white-space: pre-wrap; margin: 0; max-height: 46vh; overflow: auto; }
.tpl-editor { width: 100%; min-height: 320px; box-sizing: border-box; font-family: var(--font-mono); font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 11px; padding: 14px 16px; resize: vertical; }

/* contract-preview (modaal, gedeeld met uitvoerders 2.5b) */
.tpl-preview { white-space: pre-wrap; font-family: var(--font-mono); font-size: .68rem; line-height: 1.65; max-height: 58vh; overflow: auto; padding: 4px 2px; }

/* E5b · versies + diff */
.tpl-versierij { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.tpl-versierij__door { font-size: 11.5px; color: var(--c-ink-2); }
.tpl-versierij__acties { display: flex; gap: 6px; }
.tpl-diff { border: 1px solid var(--c-lijn); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.tpl-diff__kop { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--c-lijn); background: var(--c-creme); }
.tpl-diff__body { max-height: 320px; overflow: auto; font-size: 11.5px; line-height: 1.5; padding: 8px 0; }
.tpl-diff__regel { display: flex; gap: 8px; padding: 0 12px; white-space: pre-wrap; }
.tpl-diff__regel i { font-style: normal; width: 10px; flex: none; font-weight: 800; }
.tpl-diff__regel.is-plus { background: color-mix(in srgb, var(--c-groen) 14%, transparent); }
.tpl-diff__regel.is-plus i { color: var(--c-groen-d); }
.tpl-diff__regel.is-min { background: color-mix(in srgb, var(--c-terra) 12%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 55%, transparent); }
.tpl-diff__regel.is-min i { color: var(--c-terra); }

/* E5c · merkvarianten */
.tpl-merken { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-merkchip { border: 1px solid var(--c-lijn); border-radius: 99px; background: var(--c-paneel); font: inherit; font-size: 11.5px; padding: 4px 12px; cursor: pointer; color: var(--c-ink); }
.tpl-merkchip.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 14%, var(--c-paneel)); font-weight: 700; }
.tpl-merkblok { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.tpl-merkblok textarea { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); resize: vertical; }

/* E5 · merge-velden: kiezer + invoeg-strip */
.tpl-mvkiezer { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 14px; max-height: 300px; overflow: auto; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; }
.tpl-mvgroep { display: flex; flex-direction: column; gap: 4px; }
.tpl-mvkeuze { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; cursor: pointer; }
.tpl-mvkeuze__veld { font-size: 10.5px; color: var(--c-ink-2); }
.tpl-invoeg { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; flex-wrap: wrap; }
.tpl-invoeg__kies { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.tpl-invoeg__kies select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); }

/* E5b · clausule-eisen */
.tpl-clausrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); }
.tpl-clausrij__zoek { font-size: 10.5px; color: var(--c-ink-2); }
.tpl-clmlink { color: var(--c-groen-d); font-weight: 700; text-decoration: none; }
.tpl-clmlink:hover { text-decoration: underline; }