/* Vertimac MachineHub. Huisstijl: wit, rood #ff0100, zwart #212322. Space Grotesk. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/SpaceGrotesk.woff2") format("woff2");
}

:root {
  --rood: #ff0100;
  --rood-donker: #d40100;
  --zwart: #212322;
  --wit: #ffffff;
  --gebroken: #f1f3f5;
  --lichtgrijs: #bebebe;
  --donkergrijs: #626262;
  --lijn: #e3e6e9;
  --schaduw: 0 1px 2px rgba(33, 35, 34, .06), 0 4px 14px rgba(33, 35, 34, .05);
  --radius: 3px;
  --font: "Space Grotesk", "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--zwart);
  background: var(--gebroken);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

/* ---------- Kop ---------- */

.kopbalk {
  background: var(--wit);
  border-bottom: 3px solid var(--rood);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopbalk-binnen {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 62px;
}

.merk { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.merk img { height: 26px; display: block; }
.merk .titel {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  padding-left: 12px;
  border-left: 1px solid var(--lijn);
  color: var(--zwart);
}

.hoofdnav { display: flex; gap: 4px; margin-left: 4px; }
.hoofdnav a {
  color: var(--zwart);
  padding: 8px 13px;
  font-size: .9rem;
  font-weight: 500;
  border-radius: var(--radius);
  white-space: nowrap;
}
.hoofdnav a:hover { background: var(--gebroken); text-decoration: none; }
.hoofdnav a.actief { color: var(--rood); background: rgba(255, 1, 0, .07); font-weight: 600; }

.kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.bel {
  position: relative;
  color: var(--zwart);
  padding: 8px 10px;
  border-radius: var(--radius);
  display: flex;
}
.bel:hover { background: var(--gebroken); }
.bel .teller {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--rood);
  color: var(--wit);
  font-size: .62rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.gebruikerblok { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.gebruikerblok .rol { color: var(--donkergrijs); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.avatar {
  width: 32px; height: 32px;
  background: var(--zwart);
  color: var(--wit);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}

/* ---------- Layout ---------- */

.inhoud { max-width: 1440px; margin: 0 auto; padding: 26px 24px 70px; }
.paginakop { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.paginakop .sub { color: var(--donkergrijs); margin: 0; font-size: .92rem; }
.paginakop .acties { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}
.kaart-kop {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lijn);
  display: flex; align-items: center; gap: 12px;
}
.kaart-kop h2, .kaart-kop h3 { margin: 0; font-size: .95rem; }
.kaart-body { padding: 18px; }

.rooster { display: grid; gap: 18px; }
.rooster-4 { grid-template-columns: repeat(4, 1fr); }
.rooster-2 { grid-template-columns: 1fr 1fr; }
.rooster-fiche { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

@media (max-width: 1100px) {
  .rooster-4 { grid-template-columns: repeat(2, 1fr); }
  .rooster-fiche, .rooster-2 { grid-template-columns: 1fr; }
  .hoofdnav a { padding: 8px 9px; font-size: .85rem; }
}
@media (max-width: 700px) {
  .rooster-4 { grid-template-columns: 1fr; }
  .kopbalk-binnen { gap: 12px; }
}

/* ---------- Statistiektegels ---------- */

.tegel {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--lichtgrijs);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--schaduw);
  display: block;
  color: inherit;
}
.tegel:hover { text-decoration: none; border-color: var(--lichtgrijs); }
.tegel .cijfer { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.tegel .naam { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--donkergrijs); font-weight: 600; }
.tegel .toelichting { font-size: .8rem; color: var(--donkergrijs); margin-top: 6px; }
.tegel.concept { border-top-color: var(--lichtgrijs); }
.tegel.gevalideerd { border-top-color: var(--rood); }
.tegel.verwerking { border-top-color: var(--zwart); }
.tegel.gepubliceerd { border-top-color: #1f8a4c; }

/* ---------- Markeringen ---------- */

.markering {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
  font-family: var(--font);
}
.markering.commercieel { background: var(--rood); color: var(--wit); }
.markering.intern { background: var(--zwart); color: var(--wit); }
.markering.leeg { background: var(--gebroken); color: var(--donkergrijs); border: 1px solid var(--lijn); }
.markering::before {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
  opacity: .95;
}
.markering.leeg::before { display: none; }

.badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid var(--lijn);
  background: var(--gebroken);
  color: var(--donkergrijs);
  white-space: nowrap;
}
.badge.CONCEPT { background: var(--gebroken); color: var(--donkergrijs); border-color: var(--lichtgrijs); }
.badge.GEVALIDEERD { background: var(--rood); color: var(--wit); border-color: var(--rood); }
.badge.IN_VERWERKING { background: var(--zwart); color: var(--wit); border-color: var(--zwart); }
.badge.GEPUBLICEERD { background: #e8f5ec; color: #16663a; border-color: #99ceb0; }
.badge.TE_DOEN { background: var(--gebroken); color: var(--donkergrijs); }
.badge.BEZIG { background: #fff3e0; color: #8a5200; border-color: #f0c98a; }
.badge.KLAAR { background: #e8f5ec; color: #16663a; border-color: #99ceb0; }
.badge.waarschuwing { background: #fff0f0; color: var(--rood-donker); border-color: #f5b5b5; }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: .87rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--zwart);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.knop:hover { background: var(--gebroken); text-decoration: none; }
.knop.primair { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.knop.primair:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
.knop.donker { background: var(--zwart); border-color: var(--zwart); color: var(--wit); }
.knop.donker:hover { background: #000; }
.knop.klein { padding: 5px 11px; font-size: .78rem; }
.knop:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Formulieren ---------- */

label.veld { display: block; margin-bottom: 12px; }
label.veld > span {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--donkergrijs);
  margin-bottom: 4px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=search], select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--zwart);
  padding: 8px 11px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--wit);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(255, 1, 0, .1);
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
select { cursor: pointer; }

/* ---------- Tabellen ---------- */

table.lijst { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.lijst thead th {
  background: var(--rood);
  color: var(--wit);
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 9px 12px;
  font-weight: 600;
  white-space: nowrap;
}
table.lijst tbody td { padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
table.lijst tbody tr:hover { background: var(--gebroken); }
table.lijst .num { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst a.modelnaam { font-weight: 600; color: var(--zwart); }
table.lijst a.modelnaam:hover { color: var(--rood); text-decoration: none; }

/* ---------- Fiche ---------- */

.fichekop {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--schaduw);
}
.fichekop h1 { margin: 0 0 2px; }
.fichekop .meta { color: var(--donkergrijs); font-size: .85rem; display: flex; gap: 14px; flex-wrap: wrap; }
.fichekop .omschrijving { margin: 12px 0 0; font-size: .97rem; max-width: 72ch; }

.sectie {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.sectie.is-intern { border-left: 4px solid var(--zwart); }
.sectie.is-commercieel { border-left: 4px solid var(--rood); }

.sectie-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--wit);
}
.sectie-kop:hover { background: var(--gebroken); }
.sectie-kop h2 { margin: 0; font-size: .98rem; flex: 1; }
.sectie-kop .pijl { color: var(--donkergrijs); transition: transform .15s; font-size: .8rem; }
.sectie[data-open="false"] .pijl { transform: rotate(-90deg); }
.sectie[data-open="false"] .sectie-body { display: none; }
.sectie-body { padding: 4px 16px 16px; border-top: 1px solid var(--lijn); }

.specrij {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dotted var(--lijn);
}
.specrij:last-child { border-bottom: none; }
.specrij .sleutel { color: var(--donkergrijs); font-size: .85rem; }
.specrij .waarde { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .specrij { grid-template-columns: 1fr; gap: 2px; } }

ul.punten { list-style: none; margin: 0; padding: 0; }
ul.punten li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px dotted var(--lijn);
}
ul.punten li:last-child { border-bottom: none; }
ul.punten li::before {
  content: "";
  position: absolute;
  left: 2px; top: 15px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--rood);
}
ul.punten li.intern::before { border-bottom-color: var(--zwart); }
ul.punten li .itemlabel { font-weight: 600; display: block; }

.probleem { padding: 12px 0; border-bottom: 1px dotted var(--lijn); }
.probleem:last-child { border-bottom: none; }
.probleem .titel { font-weight: 600; }
.probleem .symptoom { color: var(--zwart); margin: 2px 0 6px; }
.probleem .oplossing {
  background: var(--gebroken);
  border-left: 3px solid var(--rood);
  padding: 8px 12px;
  font-size: .89rem;
}
.probleem .oplossing strong { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: var(--rood); display: block; }

.bronnoot { font-size: .72rem; color: var(--donkergrijs); }
.bronnoot a { color: var(--donkergrijs); text-decoration: underline; }
.vinkje { color: #1f8a4c; font-weight: 700; }
.kruisje { color: var(--donkergrijs); }

.item-acties { opacity: 0; transition: opacity .12s; display: flex; gap: 4px; }
.bewerkbaar:hover .item-acties, .item-acties:focus-within { opacity: 1; }

/* ---------- Zijkolom ---------- */

.zij { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 14px; }
.zij .kaart-body { padding: 15px 16px; }
.zij dl { margin: 0; font-size: .85rem; }
.zij dt { color: var(--donkergrijs); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; font-weight: 600; }
.zij dt:first-child { margin-top: 0; }
.zij dd { margin: 1px 0 0; font-weight: 600; }

.tijdlijn { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.tijdlijn li { padding: 8px 0 8px 16px; border-left: 2px solid var(--lijn); position: relative; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -5px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--lichtgrijs);
}
.tijdlijn li.markant::before { background: var(--rood); }
.tijdlijn .wanneer { color: var(--donkergrijs); font-size: .74rem; display: block; }

/* ---------- Meldingen ---------- */

.melding {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: .9rem;
  border: 1px solid;
  display: flex; gap: 10px; align-items: flex-start;
}
.melding.goed { background: #e8f5ec; border-color: #99ceb0; color: #16663a; }
.melding.fout { background: #fff0f0; border-color: #f5b5b5; color: var(--rood-donker); }
.melding.let-op { background: #fff8e6; border-color: #f0d28a; color: #7a5200; }
.melding.info { background: var(--gebroken); border-color: var(--lijn); color: var(--zwart); }

/* ---------- Zoeken ---------- */

.zoekbalk { position: relative; flex: 1; max-width: 420px; }
.zoekbalk input {
  padding-left: 34px;
  background: var(--gebroken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626262' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center / 15px;
  border-color: transparent;
}
.zoekbalk input:focus { background-color: var(--wit); }
.zoekresultaten {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(33, 35, 34, .14);
  max-height: 380px;
  overflow-y: auto;
  z-index: 80;
}
.zoekresultaten a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  color: var(--zwart);
  border-bottom: 1px solid var(--lijn);
  font-size: .87rem;
}
.zoekresultaten a:last-child { border-bottom: none; }
.zoekresultaten a:hover, .zoekresultaten a.gemarkeerd { background: var(--gebroken); text-decoration: none; }
.zoekresultaten .cat { color: var(--donkergrijs); font-size: .76rem; margin-left: auto; }

.filterbalk { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filterbalk label.veld { margin-bottom: 0; min-width: 140px; }
.filterbalk .smal { min-width: 96px; }

/* ---------- Marketing ---------- */

.outputrij {
  display: grid;
  grid-template-columns: 150px 118px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dotted var(--lijn);
}
.outputrij:last-child { border-bottom: none; }
.outputrij .naam { font-weight: 600; font-size: .87rem; }
@media (max-width: 800px) { .outputrij { grid-template-columns: 1fr; } }

.voortgang { height: 5px; background: var(--gebroken); border-radius: 3px; overflow: hidden; display: flex; }
.voortgang span { display: block; height: 100%; }
.voortgang .klaar { background: #1f8a4c; }
.voortgang .bezig { background: var(--rood); }

/* ---------- Login ---------- */

.loginpagina {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--wit);
}
.loginlinks { display: flex; align-items: center; justify-content: center; padding: 40px; }
.loginvorm { width: 100%; max-width: 350px; }
.loginvorm img.logo { height: 34px; margin-bottom: 30px; }
.loginrechts {
  background: var(--zwart);
  color: var(--wit);
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.loginrechts h2 { color: var(--wit); font-size: 1.9rem; max-width: 15ch; line-height: 1.2; }
.loginrechts p { color: var(--lichtgrijs); max-width: 44ch; font-size: .95rem; }
.loginrechts .driehoek {
  position: absolute;
  right: -70px; bottom: -70px;
  width: 0; height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 260px solid var(--rood);
  opacity: .22;
}
@media (max-width: 900px) { .loginpagina { grid-template-columns: 1fr; } .loginrechts { display: none; } }

/* ---------- Klein ---------- */

.stil { color: var(--donkergrijs); }
.mini { font-size: .78rem; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.streep { height: 1px; background: var(--lijn); margin: 14px 0; border: 0; }
.leegstaat { text-align: center; padding: 46px 20px; color: var(--donkergrijs); }
.leegstaat .driehoek-icoon {
  width: 0; height: 0; margin: 0 auto 14px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 28px solid var(--lichtgrijs);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: .76rem;
  padding: 3px 9px;
  background: var(--gebroken);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  color: var(--donkergrijs);
}
.paginering { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 20px; }

.bewerkveld { display: none; }
.bewerkmodus .bewerkveld { display: block; }
.bewerkmodus .toonveld { display: none; }

@media print {
  .kopbalk, .zij, .item-acties, .paginakop .acties { display: none !important; }
  body { background: var(--wit); }
  .sectie[data-open="false"] .sectie-body { display: block !important; }
}

/* Bewerkbalk bovenaan een sectie, enkel zichtbaar in bewerkmodus */
.sectiebalk {
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 6px;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.bewerkmodus .sectiebalk { display: flex; }

/* Bewerkformulier binnen een specificatierij over de volle breedte */
.specrij .itemvorm { grid-column: 1 / -1; }
.specrij .itemvorm input[type=text],
.specrij .itemvorm textarea { max-width: 640px; }
.bewerkmodus .specrij { grid-template-columns: 1fr; padding: 6px 0 14px; }