/* Klantenportaal — huisstijl uniekaiconsultancy.nl: navy/blauw, Archivo + Instrument Sans, rustig en zakelijk */
@font-face { font-family: "Archivo"; src: url(archivo.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --nacht: #07142A; --navy: #0B1C3D; --blauw: #2563EB; --lucht: #7EA6F7; --ijs: #BAD1FC; --grijs: #D8DEE8; --wolk: #F2F5F9; --wit: #fff;
  --tekst: #0B1C3D; --zacht: rgba(11,28,61,.7); --lijn: #E1E6EE; --fout: #B3261E;
  --f-display: "Archivo", system-ui, sans-serif; --f-tekst: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--wolk); color: var(--tekst); font: 16px/1.55 var(--f-tekst); -webkit-font-smoothing: antialiased; }
a { color: var(--blauw); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h2 { font-size: 18px; } h3 { font-size: 16px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--wit); padding: 8px; z-index: 9; }
.klein { font-size: 14px; color: var(--zacht); margin: 2px 0 0; }

/* zijbalk */
.met-zijbalk { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.zijbalk { background: var(--navy); color: var(--grijs); padding: 26px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.woordmerk { font: 800 22px/1 var(--f-display); letter-spacing: -.03em; color: var(--wit); }
.woordmerk span { color: var(--lucht); } .woordmerk:hover { text-decoration: none; }
.merk small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lucht); }
.menu { display: flex; flex-direction: column; flex: 1; }
.menu-knop { display: none; }
.klant { display: flex; align-items: center; gap: 10px; margin: 28px 0 18px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: var(--wit); font-weight: 600; font-size: 14px; }
.klant img { width: 36px; height: 36px; object-fit: contain; background: var(--wit); border-radius: 8px; }
.initiaal { width: 36px; height: 36px; border-radius: 8px; background: var(--blauw); display: grid; place-items: center; font: 700 16px var(--f-display); flex: none; }
.zijbalk nav { display: grid; gap: 2px; margin-top: 8px; }
.zijbalk nav a { color: var(--grijs); padding: 9px 12px; border-radius: 8px; font-size: 15px; }
.zijbalk nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.zijbalk nav a.actief { background: var(--blauw); color: var(--wit); font-weight: 600; }
.teller { background: var(--lucht); color: var(--navy); font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.ik { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ik a { color: var(--wit); } .ik .link { color: var(--lucht); }

main { padding: 36px clamp(16px, 4vw, 48px) 64px; max-width: 1280px; width: 100%; }
.kaal main { max-width: none; }
.paginakop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.paginakop h1 { font-size: clamp(26px, 3vw, 34px); margin: 0; } .paginakop p { margin: 4px 0 0; color: var(--zacht); }
.tussenkop { margin: 32px 0 14px; }
.melding { background: #E8F0FE; border-left: 3px solid var(--blauw); padding: 10px 14px; border-radius: 6px; margin: 0 0 20px; }
.waarschuwing { background: #FFF6E5; border-left: 3px solid #C77700; padding: 10px 14px; border-radius: 6px; }
.demo { display: inline-block; font: 600 10px/1 var(--f-tekst); text-transform: uppercase; letter-spacing: .06em; background: #FFF3CD; color: #6B4E00; padding: 4px 6px; border-radius: 4px; vertical-align: middle; }

/* panelen */
.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.paneel.aandacht { border-color: #F2C26B; background: #FFFBF2; }
.rij-tussen { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rij-tussen a { font-size: 14px; }
.raster-dash { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; } .raster-dash .breed { grid-column: 1 / -1; }
.raster-project { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0 20px; align-items: start; }
.projectenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.projectkaart { display: block; border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; color: var(--tekst); background: var(--wit); transition: border-color .16s; }
.projectkaart:hover { border-color: var(--blauw); text-decoration: none; }
.projectkaart h3 { margin: 0; font-size: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 18px; }
.stat strong { display: block; font: 800 28px/1.1 var(--f-display); } .stat span { font-size: 13px; color: var(--zacht); }

/* status en voortgang */
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.status.grijs { background: #EEF1F5; color: #4A5568; } .status.blauw { background: #E8F0FE; color: #1D4ED8; } .status.oranje { background: #FFF1DB; color: #9A5B00; }
.status.paars { background: #F1EBFE; color: #6230C9; } .status.groen { background: #E3F4E8; color: #17803D; } .status.rood { background: #FCE8E6; color: var(--fout); }
.voortgang { height: 8px; background: var(--wolk); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.voortgang span { display: block; height: 100%; background: var(--blauw); border-radius: 999px; }
.v0 { width: 0%; } .v5 { width: 5%; } .v10 { width: 10%; } .v15 { width: 15%; } .v20 { width: 20%; } .v25 { width: 25%; } .v30 { width: 30%; } .v35 { width: 35%; } .v40 { width: 40%; } .v45 { width: 45%; } .v50 { width: 50%; } .v55 { width: 55%; } .v60 { width: 60%; } .v65 { width: 65%; } .v70 { width: 70%; } .v75 { width: 75%; } .v80 { width: 80%; } .v85 { width: 85%; } .v90 { width: 90%; } .v95 { width: 95%; } .v100 { width: 100%; }
.feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; }
.feiten dt { font-size: 13px; color: var(--zacht); } .feiten dd { margin: 0; font-weight: 600; }

/* lijsten */
.lijst, .taken, .bijlagen, .log, .reacties, .mijlpalen { list-style: none; padding: 0; margin: 0; }
.lijst li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.lijst li:last-child { border-bottom: 0; } .lijst li > div { flex: 1; }
.lijst li.klaar strong { text-decoration: line-through; color: var(--zacht); }
.meldingen li.nieuw { font-weight: 600; } .meldingen li.nieuw::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blauw); flex: none; order: -1; }
.datumblok { flex: none; width: 54px; text-align: center; font: 700 13px var(--f-display); background: var(--wolk); border-radius: 8px; padding: 6px 4px; color: var(--navy); }
.bestandsicoon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--wolk); border-radius: 8px; font: 700 10px var(--f-tekst); text-transform: uppercase; color: var(--blauw); }
.taken li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3E2BF; } .taken li:last-child { border: 0; }
.taken li.te-laat strong::after { content: " · te laat"; color: var(--fout); font-weight: 600; font-size: 13px; }
.vinkje { width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 6px; background: var(--wit); cursor: pointer; margin-top: 2px; }
.vinkje:hover { background: var(--ijs); }
.update { padding: 12px 0; border-bottom: 1px solid var(--lijn); } .update:last-child { border: 0; }
.update h3 { margin: 4px 0; } .update h3 a { color: var(--tekst); } .update p { margin: 0; color: var(--zacht); font-size: 15px; }
.update .meta { font-size: 13px; } .update.actie { border-left: 3px solid #E59A1A; padding-left: 12px; }
.updates { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 6px 22px; }
.mijlpalen li { position: relative; padding: 0 0 16px 26px; border-left: 2px solid var(--lijn); margin-left: 7px; display: grid; }
.mijlpalen li::before { content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wit); border: 2px solid var(--grijs); }
.mijlpalen li.klaar::before { background: var(--blauw); border-color: var(--blauw); }
.reacties li { padding: 12px 14px; background: var(--wolk); border-radius: 10px; margin-bottom: 10px; }
.reacties li.van-uniek { background: #E8F0FE; } .reacties p { margin: 0; } .reacties .wie { font-size: 13px; color: var(--zacht); margin-bottom: 4px; }
.bijlagen li { padding: 4px 0; }
.log li { padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; } .log li.fout { color: var(--fout); } .log time { color: var(--zacht); margin-right: 6px; }
.lees { max-width: 780px; }
.gegevens dt { font-size: 13px; color: var(--zacht); } .gegevens dd { margin: 0 0 12px; font-weight: 500; }

/* tabellen */
.tabelwrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--grijs); }
.tabel td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; } .r { text-align: right; }

/* formulieren */
.knop { display: inline-block; background: var(--navy); color: var(--wit); border: 1px solid var(--navy); border-radius: 999px; padding: 10px 20px; font: 600 15px var(--f-tekst); cursor: pointer; transition: background .16s; }
.knop:hover { background: var(--blauw); border-color: var(--blauw); text-decoration: none; color: var(--wit); }
.knop.licht { background: var(--wit); color: var(--navy); } .knop.licht:hover { background: var(--navy); color: var(--wit); }
.knop.gevaar { background: var(--wit); color: var(--fout); border-color: var(--fout); } .knop.gevaar:hover { background: var(--fout); color: var(--wit); }
.knop.klein { padding: 7px 14px; font-size: 14px; }
.knop[disabled], .knop.bezig { opacity: .6; cursor: progress; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--blauw); cursor: pointer; } .link:hover { text-decoration: underline; } .link.gevaar { color: var(--fout); }
.formulier { display: grid; gap: 14px; max-width: 620px; margin-top: 14px; } .formulier.breed { max-width: none; }
.paneel.formulier { margin-top: 0; }
.veld { display: grid; gap: 5px; font-size: 14px; font-weight: 600; } .veld small { font-weight: 400; color: var(--zacht); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea {
  font: 400 16px var(--f-tekst); padding: 10px 12px; border: 1px solid #B9C3D3; border-radius: 10px; background: var(--wit); color: var(--tekst); width: 100%; }
textarea { resize: vertical; }
input[type=file] { font-size: 14px; }
.ongeldig, input:user-invalid, textarea:user-invalid { border-color: var(--fout) !important; }
.foutje { color: var(--fout); font-size: 13px; font-weight: 500; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.check input { margin-top: 4px; }
.opties { border: 1px solid var(--lijn); border-radius: 10px; padding: 12px 16px; display: grid; gap: 6px; margin: 0; } .opties legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .knoppen form, form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline select { width: auto; padding: 4px 8px; font-size: 14px; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 18px; } .filters .veld { min-width: 170px; flex: 1; max-width: 260px; }
.rij-form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; max-width: none; }
.rij-form h2, .rij-form h3, .rij-form p { grid-column: 1 / -1; margin: 0; }
.statusrij { display: grid; gap: 12px; margin-bottom: 8px; }
.leeg { padding: 28px 0; text-align: center; color: var(--zacht); } .leeg h2 { color: var(--tekst); }
.contact p { margin: 0 0 12px; line-height: 1.8; }

/* inloggen */
.inlog { max-width: 420px; margin: 10vh auto; background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 36px; }
.inlog .woordmerk { color: var(--navy); font-size: 26px; } .inlog .woordmerk span { color: var(--blauw); }
.label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw); font-weight: 600; margin: 6px 0 28px; }

@media (max-width: 1000px) { .raster-project, .raster-dash { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .met-zijbalk { display: block; }
  .zijbalk { position: sticky; top: 0; height: auto; z-index: 5; padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .merk small { display: none; }
  .menu-knop { display: block; color: var(--wit); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
  .menu { display: none; width: 100%; max-height: calc(100vh - 60px); overflow-y: auto; }
  #menu-knop:checked ~ .menu { display: flex; }
  #menu-knop:focus-visible + .menu-knop { outline: 3px solid var(--lucht); }
  .klant { margin: 14px 0 6px; }
  main { padding-top: 22px; }
  .feiten { grid-template-columns: 1fr 1fr; }
  .paneel { padding: 16px; border-radius: 12px; }
  .tabel { font-size: 14px; }
  .inlog { margin: 24px 16px; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* agenda */
.maandnav { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .maandnav h2 { margin: 0; min-width: 170px; text-align: center; text-transform: capitalize; }
.kalender { border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden; }
.weekdagen, .dagen { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdagen span { padding: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); background: var(--wolk); }
.dag { min-height: 104px; padding: 6px; border-top: 1px solid var(--lijn); border-left: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dag:nth-child(7n+1) { border-left: 0; } .leeg-dag { background: #FAFBFD; }
.dagnr { font-size: 12px; color: var(--zacht); } .dagnr::first-letter { text-transform: uppercase; }
.dag.vandaag .dagnr { color: var(--wit); background: var(--blauw); border-radius: 999px; padding: 1px 8px; align-self: flex-start; }
.item { display: block; font-size: 12px; line-height: 1.3; padding: 4px 6px; border-radius: 6px; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; }
.item small { display: block; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item:hover { text-decoration: none; filter: brightness(.96); }
.item.grijs { background: #EEF1F5; } .item.blauw { background: #E8F0FE; } .item.oranje { background: #FFF1DB; } .item.paars { background: #F1EBFE; } .item.groen { background: #E3F4E8; } .item.rood { background: #FCE8E6; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.link-veld { display: inline-block; max-width: 100%; overflow-wrap: anywhere; background: var(--wolk); padding: 6px 10px; border-radius: 8px; font-size: 13px; }
@media (max-width: 820px) {
  .weekdagen, .leeg-dag, .dag:not(.heeft):not(.vandaag) { display: none; }
  .dagen { display: block; } .dag { min-height: 0; border-left: 0; padding: 10px 4px; } .dagnr { font-weight: 600; font-size: 14px; color: var(--tekst); }
  .item { font-size: 14px; padding: 8px 10px; }
}
.toevoegen { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.toevoegen a { font-size: 13px; padding: 3px 10px; border: 1px solid var(--lijn); border-radius: 999px; color: var(--navy); background: var(--wit); }
.toevoegen a:hover { border-color: var(--blauw); color: var(--blauw); text-decoration: none; }
.toevoegen a::before { content: "+ "; color: var(--blauw); }
.komend li { align-items: flex-start; }

/* chat */
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - 210px); min-height: 380px; }
.chatlijst { list-style: none; margin: 0; padding: 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--wolk); }
.chatlijst li { max-width: min(78%, 560px); background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px 14px 14px 4px; padding: 8px 12px; align-self: flex-start; }
.chatlijst li.eigen { align-self: flex-end; background: var(--navy); color: var(--wit); border-color: var(--navy); border-radius: 14px 14px 4px 14px; }
.chatlijst li.uniek:not(.eigen) { background: #E8F0FE; border-color: #D3E2FD; }
.chatlijst .wie { font-size: 12px; color: var(--zacht); margin: 0 0 2px; } .chatlijst li.eigen .wie { color: var(--ijs); }
.chatlijst .tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chatleeg { padding: 0 18px; }
.chatinvoer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--lijn); background: var(--wit); align-items: flex-end; }
.chatinvoer textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; }
.gesprekken li.nieuw strong::after { content: " •"; color: var(--blauw); }
.gesprekken .rechts { text-align: right; flex: none; }

/* ---------- mobiel ---------- */
.tabbalk { display: none; }
@media (max-width: 820px) {
  body.met-zijbalk { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--wit); border-top: 1px solid var(--lijn);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .tabbalk a, .tabbalk label { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    font-size: 11px; font-weight: 600; color: var(--zacht); cursor: pointer; min-height: 48px; justify-content: center; }
  .tabbalk a:hover { text-decoration: none; } .tabbalk a.actief { color: var(--blauw); }
  .tabbalk .stip { position: absolute; top: 0; left: calc(50% + 6px); background: var(--blauw); color: var(--wit); font-size: 10px; line-height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; }
  .zijbalk .menu-knop { display: none; }
  .zijbalk { padding: 12px 16px; }
  .menu { position: fixed; inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0; top: 50px; background: var(--navy); padding: 8px 16px 16px; overflow-y: auto; z-index: 15; }
  .zijbalk nav a { padding: 12px; font-size: 16px; }
  main { padding: 20px 16px 32px; }
  .paginakop { margin-bottom: 16px; } .paginakop h1 { font-size: 24px; }
  .paginakop > .knop, .paginakop > a.knop { width: 100%; text-align: center; }
  .knop { padding: 12px 20px; }
  .filters .veld { min-width: 100%; }
  .raster-dash, .raster-project { gap: 0; }
  /* tabellen worden kaartjes; de kolomnaam komt uit data-label (gezet door app.js) */
  .tabelwrap { overflow: visible; }
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--wit); }
  .tabel td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tabel td::before { content: attr(data-label); color: var(--zacht); font-size: 13px; text-align: left; flex: none; }
  .tabel td:first-child { font-weight: 600; text-align: left; } .tabel td:first-child::before { display: none; }
  .tabel td:empty, .tabel td[data-label=""]::before { display: none; }
  .tabel .r { text-align: right; }
  /* chat vult het scherm */
  .chat { height: calc(100dvh - 50px - 64px - 120px - env(safe-area-inset-bottom)); min-height: 320px; margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .chatlijst li { max-width: 85%; }
  .toevoegen a { padding: 8px 12px; font-size: 14px; }
  .datumblok { width: 48px; }
}