/* Schil */
.schil { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.zijbalk {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem .9rem; background: var(--donker); color: #e9e6dd;
}
.zijbalk__logo { display: flex; align-items: center; gap: .65rem; color: #f4f2ec; text-decoration: none; padding: 0 .35rem; }
.zijbalk__logo img { width: 40px; height: 40px; }
.zijbalk__nav { display: grid; gap: .2rem; }
.zijbalk__nav a {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: var(--radius);
  color: #c9c5ba; text-decoration: none; font: 500 14px var(--kop);
}
.zijbalk__nav a svg { width: 18px; height: 18px; stroke-width: 1.6; }
.zijbalk__nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.zijbalk__nav a.is-actief { background: rgba(243,217,122,.1); color: #f3d97a; }
.zijbalk__voet { margin-top: auto; padding: .75rem .35rem 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: .35rem; }
.ik__naam { font: 500 14px var(--kop); color: #f4f2ec; }
.ik__uit { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; color: #b4b0a6; font: 500 13px var(--kop); cursor: pointer; justify-self: start; }
.ik__uit:hover { color: #f3d97a; }
.ik__uit svg { width: 15px; height: 15px; }

.inhoud { padding: 2rem clamp(1rem, 3vw, 2.5rem) 6rem; max-width: 1280px; width: 100%; outline: none; }
.laden { color: var(--tekst-3); padding: 2rem 0; }

@media (max-width: 860px) {
  .schil { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; flex-direction: row; align-items: center; padding: .75rem 1rem; gap: 1rem; }
  .zijbalk__nav { display: flex; }
  .zijbalk__nav a span { display: none; }
  .zijbalk__voet { margin: 0 0 0 auto; border: 0; padding: 0; }
  .ik__naam { display: none; }
  .zijbalk__logo .woordmerk { display: none; }
}

/* Kopbalk */
.kopbalk { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kopbalk h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.08; }
.kopbalk .label { margin-bottom: .6rem; }
.kopbalk__klant { display: block; }
.kopbalk__sub { display: flex; align-items: center; gap: .75rem; color: var(--tekst-2); margin-top: .35rem; flex-wrap: wrap; }
.knoppen { display: flex; gap: .5rem; flex-wrap: wrap; }
.terug { display: inline-flex; align-items: center; gap: .25rem; color: var(--tekst-2); text-decoration: none; font-size: 14px; margin-bottom: .35rem; }
.terug svg { width: 16px; height: 16px; }
.terug:hover { color: var(--tekst); }

/* Kaarten */
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: 1.25rem 1.4rem; }
.kaart > h2, .kaart__kop h2 { font-size: 17px; font-weight: 600; margin-bottom: 1rem; }
.kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kaart__kop h2 { margin: 0; }
.kaart__uitleg { margin: -.6rem 0 1rem; font-size: 14px; color: var(--tekst-3); }
.kaart--tabel { padding: 0; overflow-x: auto; }

.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: 1.1rem 1.25rem; display: grid; gap: .2rem; }
.tegel::before { content: ''; width: 28px; border-top: 2px solid var(--goud-licht); margin-bottom: .5rem; }
.tegel span { font-size: 13px; color: var(--tekst-2); }
.tegel strong { font-family: var(--kop); font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--tekst); }
.tegel small { color: var(--tekst-3); }
@media (max-width: 700px) { .tegels { grid-template-columns: 1fr; } }

/* Filters */
.filters { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs { display: flex; gap: .15rem; flex-wrap: wrap; padding: .3rem; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); }
.tab { border: 0; background: none; padding: .5rem .85rem; border-radius: 999px; font: 500 14px/1 var(--kop); color: var(--tekst-2); cursor: pointer; }
.tab:hover { color: var(--tekst); }
.tab.is-actief { background: var(--tekst); color: #fff; }
.tab__aantal { font-size: 12px; opacity: .6; margin-left: .2rem; }
.zoek { position: relative; width: min(320px, 100%); }
.zoek svg { position: absolute; left: .7rem; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--tekst-3); }
.zoek input { padding-left: 2.1rem; }

/* Tabel */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font: 600 11px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); padding: .8rem 1rem; border-bottom: 1px solid var(--lijn); background: var(--vlak-2); }
.tabel td { padding: .8rem 1rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr[data-id] { cursor: pointer; }
.tabel tbody tr[data-id]:hover, .tabel tbody tr[data-id]:focus-visible { background: var(--vlak-2); }
.tabel small { color: var(--tekst-3); }
.tabel .inbegrepen { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--tekst-2); font-size: 13px; }
.r { text-align: right; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.zacht { color: var(--tekst-3); }
.tabel td.kort { max-width: 28ch; color: var(--tekst-2); font-size: 13px; }
.tabel tr.is-nieuw td:first-child { box-shadow: inset 3px 0 0 var(--goud-licht); }
.gegevens dd.klein { font-size: 12px; overflow-wrap: anywhere; }

.leeg { text-align: center; padding: 3rem 1rem; display: grid; gap: .6rem; justify-items: center; color: var(--tekst-2); }
.leeg h1, .leeg h2 { color: var(--tekst); font-size: 20px; }
.leeg--klein { padding: 1.5rem; border: 1px dashed var(--lijn-sterk); border-radius: var(--radius); }

.melding--info { background: var(--blauw-vlak); color: var(--blauw); margin-bottom: 1.25rem; }
.melding--let { background: var(--goud-vlak); color: #6b5210; margin-bottom: 1.25rem; }
.melding--ok, .melding--fout { margin-bottom: 1.25rem; }

/* Editor */
.editor { display: grid; gap: 1.25rem; }
.raster { display: grid; gap: .9rem 1rem; }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--klant { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.raster--klant > .veld { grid-column: span var(--breed, 2); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.veld--breed { grid-column: span 2; }
.veld--vol { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .raster--klant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--klant > .veld { grid-column: span 1; }
  .raster--klant > .veld:first-child, .raster--klant > .veld:nth-child(6) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .raster--4, .raster--2, .raster--klant { grid-template-columns: 1fr; } .raster--klant > .veld { grid-column: auto !important; } .veld--breed { grid-column: auto; } }
.veld small { font-weight: 400; color: var(--tekst-3); }
.klantkeuze select { min-width: 240px; }

/* Klantformulier: twee blokken naast elkaar, label links en velden rechts */
.klantformulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.klantblok { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .75rem; align-content: start; }
.klantblok legend { padding: 0; margin-bottom: 1rem; font: 600 11.5px/1.2 var(--kop); letter-spacing: .26em; text-transform: uppercase; color: var(--goud); }
.formrij { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.formrij__label { font-size: 14px; color: var(--tekst-2); }
.formrij__label span { color: var(--goud); }
.formrij__velden { display: grid; gap: .5rem; min-width: 0; }
.formrij__velden--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formrij__velden--postcode { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.formrij__hint { grid-column: 2; margin-top: .4rem; font-size: 13px; color: var(--tekst-3); max-width: 40ch; }
.formrij__status:empty { display: none; }
.formrij__status[data-soort="ok"] { color: var(--groen); }
.formrij__status[data-soort="fout"] { color: var(--rood); }
@media (max-width: 1100px) { .klantformulier { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .formrij { grid-template-columns: 1fr; row-gap: .35rem; }
  .formrij__hint { grid-column: 1; }
}

.segment { display: inline-flex; gap: .15rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 999px; padding: .3rem; flex-wrap: wrap; }
.segment button { border: 0; background: none; padding: .5rem .85rem; border-radius: 999px; font: 500 14px/1 var(--kop); color: var(--tekst-2); cursor: pointer; }
.segment button[aria-checked="true"] { background: var(--tekst); color: #fff; }

.pakketten { display: grid; grid-template-columns: repeat(3, 1fr) .7fr; gap: .9rem; }
@media (max-width: 1000px) { .pakketten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pakketten { grid-template-columns: 1fr; } }
.pakket {
  text-align: left; display: grid; align-content: start; gap: .35rem; padding: 1rem; cursor: pointer;
  border: 1px solid var(--lijn); border-radius: var(--radius-kaart); background: var(--vlak); font: inherit; color: inherit;
}
.pakket:hover { border-color: var(--goud-donker); }
.pakket.is-gekozen { border-color: var(--goud-licht); box-shadow: 0 0 0 1px var(--goud-licht) inset; background: #fffdf6; }
.pakket__naam { font-family: var(--kop); font-weight: 600; font-size: 17px; }
.pakket__prijs { font-family: var(--kop); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--tekst); }
.pakket__prijs small { font-size: 13px; font-weight: 400; color: var(--tekst-3); }
.pakket ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: 13px; color: var(--tekst-2); display: grid; gap: .3rem; }
.pakket li { position: relative; padding-left: 1.2rem; }
.pakket li::before { content: ''; position: absolute; left: 0; top: .35em; width: .65rem; height: .35rem; border-left: 1.6px solid var(--goud-donker); border-bottom: 1.6px solid var(--goud-donker); transform: rotate(-45deg); }
.pakket--geen { align-content: center; border-style: dashed; }

.extra { display: flex; gap: .4rem; flex-wrap: wrap; }

.regels { display: grid; gap: .5rem; }
.regel {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 130px 110px 110px; gap: .6rem; align-items: start;
  padding: .75rem; border: 1px solid var(--lijn); border-radius: var(--radius-kaart); background: var(--vlak-2);
}
.regel--kop { background: none; border: 0; padding: 0 .75rem; font: 600 11px/1.2 var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); }
.regel--pakket { border-color: rgba(212,175,55,.5); background: #fffdf6; }
.regel__omschrijving, .regel__aantal { display: grid; gap: .35rem; }
.regel input.klein { min-height: 32px; padding: .3rem .6rem; font-size: 13px; }
.regel__totaal { font-weight: 600; padding-top: .55rem; font-variant-numeric: tabular-nums; }
.regel__knoppen { display: flex; justify-content: flex-end; gap: 0; padding-top: .2rem; }
.regel__knoppen .knop { min-height: 32px; padding: .3rem .35rem; }
.regel__inhoud { grid-column: 1 / -1; }
.regel__inhoud textarea { min-height: 0; font-size: 13px; }
@media (max-width: 1000px) {
  .regel { grid-template-columns: 1fr 1fr; }
  .regel--kop { display: none; }
  .regel__omschrijving { grid-column: 1 / -1; }
}

.totaalblok { display: flex; gap: 2rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.totaalblok > div { display: grid; text-align: right; }
.totaalblok span { font-size: 13px; color: var(--tekst-2); }
.totaalblok strong { font-family: var(--kop); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.totaalblok small { color: var(--tekst-3); font-size: 12px; }
.totaalblok p { flex-basis: 100%; text-align: right; font-size: 13px; }
.totaalblok--rechts { margin: 0; padding: 1rem; }

.actiebalk {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: .6rem;
  padding: .9rem 1rem; background: rgba(245,244,240,.92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--lijn); margin: 0 calc(-1 * clamp(1rem, 3vw, 2.5rem));
}
.actiebalk__fout { margin-right: auto; color: var(--rood); font-size: 14px; }

/* Detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.detail__hoofd, .detail__zij { display: grid; gap: 1.25rem; }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; font-size: 14px; }
.gegevens dt { color: var(--tekst-3); }
.gegevens dd { margin: 0; overflow-wrap: anywhere; }
.voorgevormd { white-space: pre-wrap; }
.kaart--acties { display: grid; gap: .5rem; }
.kaart--acties h2 { margin-bottom: .25rem; }
.kaart--acties .knop { justify-content: flex-start; }

.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.tijdlijn li { display: grid; padding-left: 1.1rem; position: relative; font-size: 14px; }
.tijdlijn li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--lijn-sterk); }
.tijdlijn--aangemaakt::before { background: var(--goud-licht) !important; }
.tijdlijn--geaccepteerd::before { background: var(--groen) !important; }
.tijdlijn--afgewezen::before { background: var(--rood) !important; }
.tijdlijn--verstuurd::before, .tijdlijn--bekeken::before { background: var(--blauw) !important; }
.tijdlijn time, .tijdlijn small { color: var(--tekst-3); font-size: 12px; }

/* Dialoog */
.dialoog { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: 0; width: min(520px, calc(100vw - 2rem)); }
.dialoog::backdrop { background: rgba(8,8,10,.5); }
.dialoog form { padding: 1.5rem; display: grid; gap: 1rem; }
.dialoog h2 { font-size: 20px; }
.dialoog__tekst { color: var(--tekst-2); }
.dialoog__knoppen { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.dialoog .melding { margin: 0; font-size: 13px; }
.link-veld { display: flex; gap: .5rem; }
.link-veld input { font-size: 13px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; translate: -50% 1rem; opacity: 0; pointer-events: none;
  background: var(--donker); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius); font-size: 14px;
  transition: opacity .2s, translate .2s; z-index: 100; max-width: calc(100vw - 2rem);
}
.toast.is-zichtbaar { opacity: 1; translate: -50% 0; }
.toast[data-soort="fout"] { background: var(--rood); }