/* =====================================================================
   artikelen.css — Module 2.4b · Artikelbeheer. Registerlijst met
   soort-chips en beheerdossier (vijf tabs) in de drawer.
   Bouwt op tokens + bouwstenen.css.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.art { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


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

.art-rij { display: grid; grid-template-columns: 1.6fr .7fr .9fr 1fr 1fr .8fr .5fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.art-rij:hover { background: var(--c-creme); }
.art-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); }
.art-rij--kop:hover { background: transparent; }
.art-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); }
.art-rij__cat { font-size: .74rem; color: var(--c-ink-2); }
.art-rij__sub { font-size: .66rem; color: var(--c-ink-3); font-weight: 400; }
.art-rij__extra { font-size: .72rem; color: var(--c-ink-2); }
.art-rij__code { font-size: .68rem; color: var(--c-groen-d); }
.art-rij__versie { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); }
.art-rij .chip { justify-self: start; }

/* drawer / beheerdossier */
.art-tabinhoud { padding-top: 13px; }
.art-kop { display: block; margin: 14px 0 6px; }
.art-kop:first-child { margin-top: 0; }
.art-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.art-kv > span:first-child { color: var(--c-ink-2); }
.art-kv > span:last-child { text-align: right; }
.art-link { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); text-decoration: none; }
.art-link:hover { text-decoration: underline; }
.art-uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 10px; }
.art-voetnoot { font-size: .7rem; color: var(--c-ink-3); }

.art-bewerk { margin-top: 14px; width: 100%; }
.art-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.art-veld { display: flex; flex-direction: column; gap: 4px; }
.art-veld--breed { grid-column: 1 / -1; }
.art-input { width: 100%; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink); background: #fff; box-sizing: border-box; }
.art-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; }
.art-status { text-transform: capitalize; }

/* Prijsimport (E5a): diff-preview vóór doorvoeren */
.art-diffrij { display: grid; grid-template-columns: 1.3fr 1.2fr 1.2fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.art-diffrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom-width: 2px; }
.art-delta--op { color: var(--c-terra); font-weight: 700; }
.art-delta--af { color: var(--c-groen-d); font-weight: 700; }