/* Huisstijl Van Aken: petrol/turquoise/creme/oranje, Lato Light voor tekst
   en Lato Black voor koppen. De lettertypes staan op de eigen server (geen
   Google Fonts), zodat bezoekers geen verbinding met Google hoeven te maken. */

@font-face{font-family:'Lato';font-weight:300;font-style:normal;font-display:swap;src:url('/fonts/Lato-Light.ttf') format('truetype');}
@font-face{font-family:'Lato';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/Lato-Bold.ttf') format('truetype');}
@font-face{font-family:'Lato';font-weight:900;font-style:normal;font-display:swap;src:url('/fonts/Lato-Black.ttf') format('truetype');}

:root{
  --petrol:#1b3834;
  --turquoise:#4eb79a;
  --creme:#f2f1e9;
  --wit:#ffffff;
  --oranje:#f7a70f;
  --muted:#6b7c78;
  --line:#dcdccf;
  --fout:#b3261e;
}
*{box-sizing:border-box;}
body{font-family:'Lato',Arial,Helvetica,sans-serif;font-weight:300;color:var(--petrol);background:var(--creme);margin:0;padding:0 16px 48px;}

/* Bovenbalk */
.topbar{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;flex-wrap:wrap;}
.topbar .wie{font-size:13px;color:var(--muted);}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap;}
.topbar nav a,.topbar nav button{font-family:inherit;font-size:13px;font-weight:700;color:var(--petrol);text-decoration:none;background:none;border:none;border-radius:6px;padding:6px 10px;margin:0;cursor:pointer;}
.topbar nav a:hover,.topbar nav button:hover{background:var(--wit);}
.topbar nav a.actief{background:var(--petrol);color:var(--wit);}

.wrap{max-width:560px;margin:0 auto;background:var(--wit);border:1px solid var(--line);border-radius:12px;padding:28px 32px 36px;}
.wrap.breed{max-width:960px;}
.wrap.smal{max-width:420px;margin-top:48px;}
.wrap + .wrap{margin-top:20px;}
@media (max-width:560px){.wrap{padding:22px 18px 28px;}}

.logo{height:56px;margin-bottom:20px;display:block;max-width:100%;}
.badge{display:inline-block;background:var(--petrol);color:var(--wit);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 10px;margin-bottom:14px;}
h1{font-weight:900;font-size:20px;margin:0 0 4px;}
h2.sectie{font-weight:900;font-size:16px;margin:0 0 12px;}
.sub{font-size:13px;color:var(--muted);margin:0 0 24px;}
.hint{font-size:12px;color:var(--muted);margin-top:16px;}

.group{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:14px;}
.group h2{font-weight:700;font-size:13px;margin:0 0 10px;}
.row{display:flex;gap:12px;margin-bottom:8px;}
.row > div{flex:1;min-width:0;}
@media (max-width:480px){.row.stapel{flex-direction:column;}}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
input,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;color:var(--petrol);background:var(--wit);}
input:focus,select:focus{outline:none;border-color:var(--turquoise);}

button,a.knop{display:inline-block;margin-top:8px;background:var(--oranje);color:var(--petrol);border:none;border-radius:8px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;line-height:normal;}
button:hover,a.knop:hover{background:#e39900;}
button.secundair,a.knop.secundair{background:var(--wit);color:var(--petrol);border:1px solid var(--petrol);}
button.secundair:hover,a.knop.secundair:hover{background:var(--creme);}
button.klein,a.knop.klein{margin:0;padding:6px 10px;font-size:12px;border-radius:6px;}
button.gevaar{background:var(--wit);color:var(--fout);border:1px solid var(--fout);}
button.gevaar:hover{background:#fbeceb;}
button:disabled{opacity:0.6;cursor:default;}
.volle-breedte{width:100%;}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.knoppen button{margin-top:0;}

.result{margin-top:24px;display:none;}
.result.show{display:block;}
.result .secundair{margin-top:16px;}
.stats{display:flex;flex-direction:column;gap:12px;}
.stat{background:var(--creme);border-radius:8px;padding:12px 16px;}
.stat .lab{font-size:12px;color:var(--muted);margin-bottom:2px;}
.stat .val{font-size:22px;font-weight:900;}

.error{color:var(--fout);font-size:13px;margin-top:12px;display:none;}
.error.show{display:block;}
.melding{margin-top:16px;padding:12px 16px;border-radius:8px;background:#eaf6f1;border:1px solid var(--turquoise);font-size:14px;display:none;}
.melding.show{display:block;}
.melding a{color:var(--petrol);font-weight:700;}

.adresveld{position:relative;}
.suggesties{position:absolute;top:100%;left:0;right:0;background:var(--wit);border:1px solid var(--line);border-top:none;border-radius:0 0 6px 6px;z-index:10;max-height:180px;overflow-y:auto;display:none;}
.suggesties.show{display:block;}
.suggestie{padding:8px 10px;font-size:14px;cursor:pointer;}
.suggestie:hover,.suggestie.actief{background:var(--creme);}

/* Beheer */
.linkvak{margin-top:16px;padding:14px 16px;border-radius:8px;background:#eaf6f1;border:1px solid var(--turquoise);display:none;}
.linkvak.show{display:block;}
.linkvak p{margin:0 0 8px;font-size:13px;}
.linkvak input{font-family:ui-monospace,Menlo,monospace;font-size:12px;}
.linkvak .knoppen{margin-top:10px;}
.zoek{max-width:280px;margin-bottom:12px;}
.tabelwrap{overflow-x:auto;margin:0 -4px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:middle;}
td .klein-tekst{display:block;font-size:12px;color:var(--muted);}
td select{width:auto;padding:4px 6px;font-size:13px;}
td:first-child{min-width:170px;word-break:break-word;}
td.acties{text-align:right;min-width:150px;}
td.acties button{margin:2px 0 2px 4px;}
tr.inactief td{color:var(--muted);}
.label{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.label.ok{background:#eaf6f1;color:#1f6b55;}
.label.wacht{background:#fdf3dc;color:#7a5200;}
.label.uit{background:#eee;color:var(--muted);}
.cijfers{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.cijfers .stat{flex:1;min-width:140px;}

/* Telefonie (/bel en /beheer/telefonie) */
.statusbalk{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;margin-bottom:16px;}
.statusbalk.ok{background:#eaf6f1;color:#1f6b55;border:1px solid var(--turquoise);}
.statusbalk.fout{background:#fbeceb;color:var(--fout);border:1px solid var(--fout);}
.leeg{color:var(--muted);font-size:14px;margin:8px 0 0;}
.kaart{border:1px solid var(--line);border-left:6px solid var(--turquoise);border-radius:8px;padding:14px 16px;margin-bottom:12px;background:var(--wit);}
.kaart.onbekend{border-left-color:var(--oranje);}
.kaart.gemist{border-left-color:var(--fout);}
.kaart.weg{border-left-color:var(--line);color:var(--muted);}
.kaart-kop{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.kaart .naam{font-size:20px;font-weight:900;}
.kaart .sub{margin:2px 0 0;}
.kaart .nummer{font-size:14px;margin-top:2px;}
.kaart .deal{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.kaart .knoppen{margin-top:12px;}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.filters > div{flex:1;min-width:160px;}
.label.fout{background:#fbeceb;color:var(--fout);}
label.vink{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--petrol);margin-top:22px;}
label.vink input{width:auto;}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;}
td input[type=email]{min-width:210px;}
td input[type=checkbox]{width:auto;}
[hidden]{display:none !important;}
.kaart .deal strong{font-weight:700;}