@import url('fonts/fonts.css');

:root {
  /* Huisstijl dev.dealerautoverzekeringen.nl */
  --groen: #00A878;
  --groen-donker: #008A63;
  --groen-licht: #E6F6F0;
  --oranje: #FF6B35;
  --oranje-donker: #E8601A;
  --room: #F7F4EF;
  --beige: #F1E9DD;
  --ink: #1A1A2E;
  --groen-diep: #003328;
  --grijs: #6B7280;
  --lijn: #E5E0D8;
  --rood: #d64545;
  --geel: #b98a1d;
  --kopfont: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--room); font-size: 15px; }

h1, h2, h3 { font-family: var(--kopfont); font-weight: 800; letter-spacing: -0.01em; color: var(--groen-diep); }

.woordmerk { font-family: var(--kopfont); font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.woordmerk .auto { color: var(--oranje); }
.woordmerk.wit { color: #fff; }

header {
  background: #fff; border-bottom: 3px solid var(--groen);
  display: flex; align-items: center; gap: 32px; padding: 0 28px; height: 64px;
}
header .logo img { height: 36px; display: block; }
nav { display: flex; gap: 4px; height: 100%; }
nav button {
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--grijs);
  padding: 0 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -3px;
}
nav button.actief { color: var(--ink); border-bottom-color: var(--oranje); }
nav button:hover { color: var(--ink); }

main { max-width: 1280px; margin: 28px auto; padding: 0 24px; width: 100%; }
.view { display: none; }
.view.actief { display: block; }

h2 { font-size: 22px; margin-bottom: 18px; }
h2 .accent { color: var(--oranje); }
h3 { font-size: 16px; margin: 22px 0 10px; }

.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--grijs); padding: 8px 10px; border-bottom: 2px solid var(--ink); }
th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
th.sorteer:hover { color: var(--ink); }
th.sorteer.actief { color: var(--oranje-donker); }
th.sorteer.actief::after { content: ' ▲'; font-size: 10px; }
th.sorteer.actief.aflopend::after { content: ' ▼'; }
td { padding: 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
tr:hover td { background: #FBF9F5; }
td.geld, th.geld { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.status { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.status.concept { background: #fdf6e3; color: var(--geel); }
.status.definitief { background: #e8f0fe; color: #2b5ec4; }
.status.verzonden { background: var(--groen-licht); color: var(--groen-donker); }

button.knop {
  background: var(--oranje); color: #fff; border: 0; border-radius: 4px;
  font-family: var(--kopfont); font-size: inherit; font-weight: 700; padding: 9px 18px; cursor: pointer;
}
button.knop:hover { background: var(--oranje-donker); }
button.knop.stil { background: #fff; color: var(--ink); border: 1px solid #c9c9c9; font-family: inherit; font-weight: 600; }
button.knop.stil:hover { border-color: var(--ink); background: #fff; }
button.knop.klein { padding: 5px 12px; font-size: 13.5px; }
button.knop:disabled { opacity: .5; cursor: default; }
button.link, a.link { background: none; border: 0; color: var(--groen-donker); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; text-decoration: none; }
button.link.rood { color: var(--rood); }
button.link:hover, a.link:hover { text-decoration: underline; }

label { display: block; font-size: 13px; color: var(--grijs); font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  font: inherit; color: var(--ink); border: 1px solid #c9c9c9; border-radius: 8px;
  padding: 8px 10px; width: 100%; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--groen); outline-offset: 0; border-color: var(--groen); }
textarea { resize: vertical; }
.veld { margin-bottom: 14px; }
.rij { display: flex; gap: 14px; }
.rij > * { flex: 1; }
.rij .smal { flex: 0 0 130px; }

.acties { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hulp { font-size: 13px; color: var(--grijs); margin-top: 6px; line-height: 1.5; }

#melding {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 10px;
  font-weight: 600; display: none; z-index: 50; max-width: 80vw;
}
#melding.fout { background: var(--rood); }

.totaalbalk {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;
  margin-top: 14px; padding: 12px 16px; background: var(--groen-licht);
  border: 1px solid var(--groen); border-radius: 8px; font-weight: 700;
}
.totaalbalk .bedrag { font-size: 20px; }

.balkwrap { background: #eef1ee; border-radius: 4px; height: 10px; min-width: 120px; }
.balk { background: var(--groen); border-radius: 4px; height: 10px; }

.leeg { color: var(--grijs); padding: 26px 0; text-align: center; }
.regel-verwijder { flex: 0 0 34px; display: flex; align-items: flex-end; padding-bottom: 4px; }