* {
        font-family:arial;
}
.error,.error2,.error3 {
	color:red;	
}
html {
     overflow: -moz-scrollbars-vertical;
     overflow-y: scroll;
}
html,body {
    margin:0;
    padding:0;
}
body {
        background-color:#009933;
}
img {
	border:0;
	}
br {
    clear:left;
}
label {
		width:150px;
		float:left;
	}
.planner {
		xborder-left:solid 1px black;
		xborder-top:solid 1px black;
	}
.planner th {
	border-bottom:dotted 2px black;
	xborder-right:solid 1px black;
	background-color:black;
	color:white;
	width:160px;
	}
.planner td {
	border-bottom:dotted 2px black;
	xborder-right: solid 1px black;
	height:40px;
	vertical-align:top;
	padding:2px;
}
.reminder {
		background-color:#E0841B;
		border:solid 2px #9C5E17;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
	}
.afspraak {
		background-color:#009933;
		border:solid 2px #006E25;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
.rapport {
		background-color:#009933;
		border:solid 2px #00adef;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
.rapportNederland {
		background-color:#009933;
		border:solid 2px #00adef;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
	
	.rapportBelgie {
		background-color:purple;
		border:solid 2px #00adef;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
	
	.rapportExtern {
		background-color:red;
		border:solid 2px #00adef;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
	
	.bandOnderweg {
		border:dotted 4px purple;
	}
.inspectie {
		background-color:#009933;
		border:solid 2px #f36d24;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;
		color:white;
	}
.vrij {
		background-color:#E8E115;
		border:solid 2px #A39E0D;
		margin-bottom:2px;
		padding:2px;
		cursor:pointer;		
	}	
.wrap {
    width:1400px;
    margin-left:auto;
    margin-right:auto;
}
.header {
    display:block;
}
.header ul {
        padding:0;
        margin:0;
        list-style:none;
}
.header ul li {
        float:left;
        margin:0px;
        margin-right:0;
        margin-bottom:0;
}
.header ul a {
        width:100px;
        height:60px;
        background-color:white;
        color:#009933;
        text-align:center;
        vertical-align:middle;
        text-decoration:none;
        display:block;
            margin:5px;
        margin-right:0;
        margin-bottom:0;
        padding:0;
        padding-top:40px;
        font-size:18px;
        

}
.header ul a:hover {
    background-image:none;
}
.content {
    width:1360px;
    background-color:white;
    margin:5px;
    padding:20px;
}

form {
    padding:20px;
    background-color:#eee;
    border:solid 1px #fff;
}

.form label {
    width:130px;
    float:left;
    font-size:14px;
    padding-top:3px;
}
.form  input,.form  select,.form  textarea {
    width:200px;
    font-size:16px;
}
.tabel input {
    width:90px;
}

.block {
    float:left;
    margin-right:40px;
}
.fout {
    padding:20px;
    color:red;
    font-weight:bold;
    font-size:16px;
    background-color:#fff;
    border:solid 4px #009933;
    margin-bottom:20px;
}
.goed {
    padding:20px;
    color:#009933;
    font-weight:bold;
    font-size:16px;
    background-color:#fff;
    border:solid 4px #009933;
    margin-bottom:20px;
}
.black {
    text-decoration:none;
    text-transform:uppercase;
    display: inline-block;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: inset #ccc 0 2px 2px;
    border: solid 1px #777;
    background-color:#009933;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#85daae), color-stop(0.5, #10a156), color-stop(0.5, #009246), to(#00823e));  
    color: #fff;
    text-shadow: #000 0 1px 0;
    font: normal 13px Helvetica, Sans-serif;
    padding: 5px;
}
.red {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.5, #ee0000), color-stop(0.5, #550000), to(#990000));  
	background-color:red;
	}
.tabel tr td input {
    width:140px;
}

.items {
    border-radius:10px;
    border:solid 1px;
    padding: 0;
    width:100%;
    background-color:white;
}
.items th {
    text-align:left;
    padding:8px;
}
.items td {
    padding:8px;
}
.items td a {
    text-decoration:none;
    color:black;
}
#urlDisable {
	background-image:none;
	background-color:#ccc;
	color:white;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}




#passwordStrength
{
        height:10px;
        display:block;
        float:left;
}

.strength0
{
        width:330px;
        background:#cccccc;
}

.strength1
{
        width:50px;
        background:#ff0000;
}

.strength2
{
        width:130px;    
        background:#ff5f5f;
}

.strength3
{
        width:200px;
        background:#56e500;
}

.strength4
{
        background:#4dcd00;
        width:330px;
}

.strength5
{
        background:#399800;
        width:400px;
}
/* ===== Login-scherm beheer (toegevoegd) — alleen actief op de loginpagina ===== */
.loginpagina{ background:#eef1f0; }
.loginpagina .wrap{ width:auto; background:transparent; box-shadow:none; border:0; }
.loginpagina .header{ display:none; }
.loginpagina .content{ background:transparent; width:auto; margin:0; padding:0; box-shadow:none; border-radius:0; border:0; }
.loginbox{
  max-width:380px; margin:7vh auto; background:#fff; border-radius:16px;
  box-shadow:0 12px 40px rgba(20,40,30,.15); padding:34px 30px; text-align:center;
}
.loginbox .loginlogo{ max-height:48px; width:auto; margin:0 auto 16px; display:block; }
.loginbox h2{ margin:0 0 22px; font-size:18px; font-weight:600; color:#1f2a30;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.loginbox form.form{ text-align:left; background:none; border:0; padding:0; margin:0; }
.loginbox label{ display:block; float:none; width:100%; margin:12px 0 4px;
  font-size:13px; font-weight:600; color:#6b7780; }
.loginbox input[type=text], .loginbox input[type=password]{
  width:100%; box-sizing:border-box; margin:0; padding:11px 12px; font-size:15px;
  border:1px solid #e3e8ea; border-radius:10px; background:#fff;
}
.loginbox input[type=text]:focus, .loginbox input[type=password]:focus{
  outline:0; border-color:#14a55a; box-shadow:0 0 0 3px rgba(20,165,90,.18);
}
.loginbox input[type=submit]{
  width:100%; box-sizing:border-box; margin-top:20px; padding:13px; cursor:pointer;
  background:#14a55a; color:#fff; border:0; border-radius:10px; font-size:15px; font-weight:700;
}
.loginbox input[type=submit]:hover{ background:#0e8a49; }
.loginbox .loginlink{ display:inline-block; margin-top:16px; font-size:13px; color:#6b7780; text-decoration:none; }
.loginbox .loginlink:hover{ color:#14a55a; }
/* ===== einde login-scherm ===== */

/* =====================================================================
   MODERNE SKIN beheer-app (toegevoegd) — zelfde stijl als de loginpagina.
   Niet-destructief: verwijder dit blok om terug te keren. DataTables-lijsten
   worden niet aangeraakt.
   ===================================================================== */
body{
  background:#eef1f0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1f2a30; -webkit-font-smoothing:antialiased;
}
.wrap{ padding-top:14px; }

/* Header: witte balk, logo links, menu rechts */
.header{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  width:1360px; max-width:100%; box-sizing:border-box;
  margin:0 5px 10px; padding:10px 16px;
  background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(20,40,30,.07);
}
.beheerlogo{ display:flex; align-items:center; margin-right:auto; }
.beheerlogo img{ height:30px; width:auto; display:block; }
.header ul{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; list-style:none; }
.header ul li{ float:none; margin:0; }
.header ul a{
  width:auto; height:auto; padding:9px 13px; margin:0; display:inline-block;
  font-size:14px; font-weight:600; border-radius:9px;
  background:#eef6f0; color:#0e8a49; text-decoration:none;
}
.header ul a:hover{ background:#14a55a; color:#fff; }

/* Content als witte kaart */
.content{ border-radius:14px; box-shadow:0 2px 10px rgba(20,40,30,.07); }

/* Knoppen */
.black{
  background:#14a55a !important; background-image:none !important;
  border:0 !important; border-radius:9px !important; box-shadow:0 1px 3px rgba(0,0,0,.18) !important;
  text-shadow:none !important; text-transform:none; font-weight:600 !important; padding:8px 13px !important;
}
.black:hover{ background:#0e8a49 !important; }
.red{ background:#e23b3b !important; background-image:none !important; }

/* Alle knoppen binnen een tabelcel compacter, zodat de regels niet hoog worden */
td a.black, td .black{
  padding:3px 7px !important; font-size:11px !important; line-height:1.3 !important;
  border-radius:5px !important; margin:0 1px; vertical-align:middle;
}

/* Compacte icoon-knopjes in tabellen (bewerken / verwijderen) */
.actie-icon{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0 !important; margin:0 1px;
  font-size:11px; line-height:1; border-radius:5px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.15) !important; text-decoration:none; vertical-align:middle;
}
td .actie-icon{ vertical-align:middle; }

/* Actiekolom: knoppen mogen afbreken (was nowrap) en compact bij elkaar,
   zodat brede lijsten niet buiten de pagina vallen */
td.acties{ white-space:normal !important; min-width:120px; line-height:1.9; }
td.acties a.black{ display:inline-block; margin:1px; }

/* Formulieren + invoervelden */
form{ background:#f7faf8; border:1px solid #e6ebed; border-radius:12px; }
input,select,textarea{
  box-sizing:border-box; border:1px solid #e3e8ea; border-radius:9px; padding:8px 10px; font-size:14px;
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:#14a55a; box-shadow:0 0 0 3px rgba(20,165,90,.18); }
input[type=submit]{
  background:#14a55a; color:#fff; border:0; border-radius:9px; padding:9px 16px; font-weight:700;
  cursor:pointer; text-transform:none;
}
input[type=submit]:hover{ background:#0e8a49; }

/* Meldingen */
.goed,.fout{ border:0; border-left:4px solid; border-radius:10px; padding:14px 16px; background:#fff; }
.goed{ background:#e8f6ee; border-left-color:#14a55a; color:#0e8a49; }
.fout{ background:#fdecec; border-left-color:#e23b3b; color:#b42318; }

/* Titels */
.content h1{ font-size:22px; }

/* ===== Responsive / mobiel + hamburgermenu ===== */
/* Layout vloeiend maken zodat niets buiten beeld valt */
.wrap{ width:1400px; max-width:100%; box-sizing:border-box; margin:0 auto; }
.content{ width:auto; max-width:100%; margin:5px; box-sizing:border-box; }
/* Brede DataTables-lijsten horizontaal scrollbaar binnen de kaart */
.content{ overflow-x:auto; }

/* Hamburgerknop — standaard verborgen op desktop */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:42px; height:38px; padding:0 9px; margin-left:auto;
  background:#eef6f0; border:0; border-radius:9px; cursor:pointer;
}
.hamburger span{ display:block; height:3px; border-radius:3px; background:#0e8a49; }

@media (max-width:820px){
  .wrap{ padding-top:8px; }
  .header{ flex-wrap:wrap; gap:8px; margin:0 5px 8px; padding:9px 12px; }
  .beheerlogo{ margin-right:0; }
  .beheerlogo img{ height:26px; }
  .hamburger{ display:flex; }
  /* Menu wordt een uitklapbare verticale lijst */
  .header ul{ display:none; flex-basis:100%; flex-direction:column; gap:4px; }
  .header ul.open{ display:flex; }
  .header ul li{ width:100%; }
  .header ul a{ display:block; width:100%; box-sizing:border-box; }

  /* Formulieren full-width en gestapeld */
  .form label{ float:none; width:100%; padding-top:0; margin-bottom:3px; }
  .form input,.form select,.form textarea{ width:100%; max-width:100%; box-sizing:border-box; }
  .content{ padding:14px; }
}
/* =====================================================================
   DataTables-lijsten in de moderne stijl (overschrijft het jQuery UI-thema).
   De wrapper/zoekbalk/paginatie worden door JS opgebouwd met ui-* classes;
   daarom !important om het smoothness-thema te verslaan.
   ===================================================================== */
/* Lettertype gelijktrekken (jQuery UI forceert Verdana) */
.dataTables_wrapper, .dataTables_wrapper .ui-widget, .dataTables_wrapper .ui-widget *{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
.dataTables_wrapper{ background:transparent !important; border:0 !important; padding:0 !important; }
/* Brede lijsten: de tabel zelf horizontaal scrollbaar binnen de kaart,
   zodat hij nooit buiten de pagina valt. */
.dataTables_wrapper{ width:100% !important; max-width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
/* Schuifbalken onzichtbaar maken (scrollen blijft werken) */
.dataTables_wrapper, .content{ scrollbar-width:none; -ms-overflow-style:none; }
.dataTables_wrapper::-webkit-scrollbar, .content::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Boven-/onderbalk (length, filter, info, paginate) — plat, geen gradient/rand */
.dataTables_wrapper .fg-toolbar,
.dataTables_wrapper .ui-toolbar,
.dataTables_wrapper .ui-widget-header{
  background:transparent !important; background-image:none !important; border:0 !important;
  border-radius:0 !important; font-weight:normal !important; color:#1f2a30 !important; padding:8px 0 !important;
}

/* Zoekveld + "aantal tonen"-select */
.dataTables_filter input, .dataTables_length select{
  border:1px solid #e3e8ea !important; border-radius:9px !important; padding:7px 10px !important;
  font-size:14px !important; background:#fff !important; box-sizing:border-box !important; color:#1f2a30 !important;
}
.dataTables_filter input:focus, .dataTables_length select:focus{
  outline:0 !important; border-color:#14a55a !important; box-shadow:0 0 0 3px rgba(20,165,90,.18) !important;
}
.dataTables_filter, .dataTables_length, .dataTables_info{ color:#6b7780 !important; font-size:13px !important; }

/* De tabel zelf */
table.display{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important; margin:6px 0 !important;
  border-radius:12px !important; overflow:hidden; box-shadow:0 1px 4px rgba(20,40,30,.06);
}
table.display thead th, table.display thead th.ui-state-default{
  background:#f4f7f5 !important; background-image:none !important; border:0 !important;
  border-bottom:2px solid #e3e8ea !important; color:#3a474e !important; font-weight:700 !important;
  text-align:left !important; padding:10px 12px !important; font-size:12px !important;
  text-transform:uppercase; letter-spacing:.02em;
}
table.display tbody td{
  border:0 !important; border-bottom:1px solid #eef1f0 !important; padding:7px 12px !important;
  font-size:13px !important; color:#2b363c !important;
}
table.display tbody tr.odd td, table.display tbody tr.even td,
table.display tbody tr.odd, table.display tbody tr.even,
table.display tbody tr.gradeA td{ background:#fff !important; }
table.display tbody tr:hover td,
table.display tbody tr.odd:hover td, table.display tbody tr.even:hover td{ background:#f0faf4 !important; }

/* Sorteer-indicatoren: jQuery UI-icoontjes verbergen, eigen pijltjes tonen */
table.display thead th .DataTables_sort_icon,
table.display thead th .css_right.ui-icon,
table.display thead th span.ui-icon{ display:none !important; }
table.display thead th.sorting,
table.display thead th.sorting_asc,
table.display thead th.sorting_desc{ cursor:pointer; }
table.display thead th.sorting::after{ content:"\2195"; opacity:.35; margin-left:6px; font-size:11px; }
table.display thead th.sorting_asc::after{ content:"\2191"; color:#14a55a; margin-left:6px; font-size:11px; }
table.display thead th.sorting_desc::after{ content:"\2193"; color:#14a55a; margin-left:6px; font-size:11px; }

/* Paginatieknoppen (Vorige/Volgende) */
.dataTables_paginate .fg-button, .dataTables_paginate .ui-button,
.dataTables_paginate a{
  background:#fff !important; background-image:none !important; border:1px solid #e3e8ea !important;
  border-radius:8px !important; color:#0e8a49 !important; padding:6px 12px !important; margin-left:5px !important;
  font-weight:600 !important; cursor:pointer; outline:0 !important; text-decoration:none !important;
}
.dataTables_paginate .fg-button:hover, .dataTables_paginate a:hover{
  background:#14a55a !important; color:#fff !important; border-color:#14a55a !important;
}
.dataTables_paginate .ui-state-disabled,
.dataTables_paginate .ui-state-disabled:hover{
  opacity:.4 !important; background:#fff !important; color:#9aa6ac !important;
  border-color:#eef1f0 !important; cursor:default !important;
}

/* DataTables 1.10+ varianten (span-knoppen) voor de zekerheid */
.dataTables_paginate .paginate_button{
  background:#fff !important; border:1px solid #e3e8ea !important; border-radius:8px !important;
  color:#0e8a49 !important; padding:6px 11px !important; margin-left:4px !important;
}
.dataTables_paginate .paginate_button.current{ background:#14a55a !important; color:#fff !important; border-color:#14a55a !important; }
.dataTables_paginate .paginate_button:hover{ background:#0e8a49 !important; color:#fff !important; border-color:#0e8a49 !important; }
/* ===================== EINDE DataTables-stijl ===================== */

/* ===== Eenvoudige tabel (.table) — gebruikt op de bandenpagina i.p.v. DataTables ===== */
table.table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(20,40,30,.06); margin:6px 0;
}
table.table th{
  background:#f4f7f5; color:#3a474e; text-align:left; padding:10px 12px; font-size:12px;
  text-transform:uppercase; letter-spacing:.02em; border-bottom:2px solid #e3e8ea;
  cursor:pointer; user-select:none; white-space:nowrap;
}
table.table th:hover{ background:#e9efea; }
table.table td{ padding:8px 12px; border-bottom:1px solid #eef1f0; font-size:13px; color:#2b363c; }
table.table tr:last-child td{ border-bottom:0; }
table.table tbody tr:hover td{ background:#f0faf4; }

/* Zoekformulier bandenpagina */
.bandzoek-rij{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.bandzoek input[type=text]{ width:100%; max-width:440px; }
.bandzoek input[type=number]{ width:150px; }
/* ===== Band bewerken — gegroepeerd formulier ===== */
form.bandform{ background:transparent; border:0; padding:0; box-shadow:none; }
.bandform-sectie{
  background:#fff; border:1px solid #e6ebed; border-radius:12px; padding:14px 18px;
  margin-bottom:14px; box-shadow:0 1px 4px rgba(20,40,30,.05);
}
.bandform-sectie h3{
  margin:0 0 12px; font-size:13px; font-weight:700; color:#0e8a49;
  text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid #eef1f0; padding-bottom:8px;
}
.bandform-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.bandveld{ display:flex; flex-direction:column; }
.bandveld label{ float:none; width:auto; margin:0 0 3px; padding:0; font-size:12px; font-weight:600; color:#6b7780; }
.bandveld input, .bandveld select, .bandveld textarea{ width:100%; box-sizing:border-box; }
.bandform-acties{ display:flex; gap:10px; align-items:center; margin-top:4px; }
@media(max-width:820px){ .bandform-grid{ grid-template-columns:1fr; } }

/* Rechten-toggles (gebruiker bewerken) */
.rechten-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.schakel{
  display:flex; align-items:center; gap:9px; padding:9px 12px; font-size:14px; color:#1f2a30;
  border:1px solid #e6ebed; border-radius:9px; background:#fff; cursor:pointer;
  float:none; width:auto;   /* globale label{float:left;width:150px} neutraliseren */
}
.schakel:hover{ border-color:#14a55a; }
.schakel input[type=checkbox]{ width:17px; height:17px; min-width:17px; margin:0; padding:0; box-shadow:none; accent-color:#14a55a; }
@media(max-width:820px){ .rechten-grid{ grid-template-columns:1fr; } }

/* QR-koppeling indicator in de bandenlijst */
.qr-ja{ color:#14a55a; font-weight:700; font-size:16px; }
.qr-nee{ color:#cdd6da; font-size:15px; }

/* Bandentabel in het rapportformulier (server-side, vervangt de oude JS-lijst) */
.bandtoevoeg{ margin:6px 0 10px; }
.bandtoevoeg #bandzoeker{ width:360px; max-width:100%; }
.bandtabelwrap{ overflow-x:auto; }
table.bandtabel{ border-collapse:collapse; width:100%; table-layout:fixed; }
table.bandtabel td, table.bandtabel th{ overflow:hidden; }
table.bandtabel th{ font-size:11px; text-align:left; padding:4px 6px; white-space:nowrap; color:#3a474e; border-bottom:1px solid #e3e8ea; }
table.bandtabel td{ padding:2px 4px; vertical-align:middle; border-bottom:1px solid #eef1f0; }
table.bandtabel input[type=text]{ box-sizing:border-box; padding:4px 6px; font-size:12px; width:100%; }
table.bandtabel select{ font-size:12px; padding:3px; box-sizing:border-box; width:100%; }
table.bandtabel input[type=checkbox]{ width:18px; height:18px; min-width:0; padding:0; border-radius:3px; box-shadow:none; accent-color:#14a55a; vertical-align:middle; }
.bandtabel .bi-aantal{ width:42px; }
.bandtabel .bi-nummer{ width:78px; }
.bandtabel .bi-positie{ width:112px; background:#f3f6f4; }
.bandtabel .bi-lijn{ width:48px; }
.bandtabel .bi-type{ width:140px; }
.bandtabel .bi-lengte, .bandtabel .bi-breedte{ width:56px; }
.bandtabel .bi-opmerking{ width:130px; }
.bandtabel .bi-cb, .bandtabel th.bi-cbh{ width:34px; text-align:center; white-space:nowrap; padding-left:2px; padding-right:2px; }
.bandverwijder{ background:#e23b3b; color:#fff; border:0; border-radius:6px; width:24px; height:24px; line-height:1; cursor:pointer; padding:0; }
.bandverwijder:hover{ background:#c0392b; }
.bandtabel .bi-foto{ text-align:center; }
.bandfoto-thumb{ max-height:42px; max-width:100%; cursor:pointer; border:1px solid #ccc; border-radius:4px; vertical-align:middle; }
.bandfoto-thumb.groot{ max-height:440px; max-width:440px; }
.bandfoto-geen{ color:#cdd6da; }

/* Bandzoek-resultaten in het rapportformulier */
.bandzoekres{ margin:2px 0 10px; max-height:230px; overflow:auto; }
.bzitem{ padding:6px 9px; border:1px solid #e6ebed; border-radius:7px; margin:3px 0; cursor:pointer; font-size:13px; background:#fff; }
.bzitem:hover{ background:#14a55a; color:#fff; border-color:#14a55a; }
.bzleeg{ padding:6px 9px; color:#9aa6ac; font-size:13px; }

/* Spoed-badge + spoedregel in het rapportenoverzicht */
.spoedbadge{ display:inline-block; background:#e23b3b; color:#fff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:6px; margin-left:5px; vertical-align:middle; letter-spacing:.3px; }
table.table tr.spoedrij td{ background:#fdecec; }
table.table tr.spoedrij:hover td{ background:#fbdcdc; }

/* Jaar-knoppen (rapportenoverzicht) */
.jaarbalk{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px; }
.jaarknop{
  display:inline-block; padding:7px 14px; border-radius:9px; font-size:14px; font-weight:600;
  background:#eef6f0; color:#0e8a49; text-decoration:none; border:1px solid #e0ebe4;
}
.jaarknop:hover{ background:#14a55a; color:#fff; border-color:#14a55a; }
.jaarknop.actief{ background:#14a55a; color:#fff; border-color:#14a55a; }

/* Verzamelknop voor rij-acties: ✎ blijft staan, ⋮ vouwt de rest inline uit */
td.acties .meeracties{ display:none; }
td.acties.open .meeracties{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
/* Verzamelknop (⋮): zelfde box als het bewerkicoon, oranje, zonder native button-chrome */
.meer-knop{
  background:#ff8c1a !important; color:#fff !important; border:0 !important; box-sizing:border-box;
  -webkit-appearance:none; appearance:none; font-size:15px !important; line-height:1; cursor:pointer;
}
.meer-knop:hover{ background:#e67a0a !important; }
/* Bewerk- en verzamelknop in de actiekolom exact even groot (hoge specificiteit
   zodat ze 'td a.black'-padding overrulen) */
td.acties .actie-icon{ width:28px !important; height:28px !important; padding:0 !important; font-size:14px !important; border-radius:7px !important; }
/* ===================== EINDE MODERNE SKIN beheer-app ===================== */

/* =====================================================================
   AGENDA / WEEKPLANNER — moderne look.
   REVERTEN: verwijder dit hele blok (of zet css/style.css.bak-agenda terug).
   ===================================================================== */
.planner{
  width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0;
  margin:0 0 18px; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 4px rgba(20,40,30,.06);
}
.planner th{
  background:#14a55a; color:#fff; border:0; width:auto;
  padding:9px 8px; font-size:12px; font-weight:700; text-align:left; letter-spacing:.2px;
}
.planner th:first-child{ width:52px; text-align:center; }
.planner td{
  border:0; border-bottom:1px solid #eef1f0; border-right:1px solid #f1f4f3;
  height:auto; vertical-align:top; padding:5px; font-size:12px;
}
.planner td:last-child{ border-right:0; }
.planner td:first-child{
  width:52px; text-align:center; vertical-align:middle;
  font-size:26px !important; font-weight:700; color:#9aa6ac; background:#f7faf8;
}

/* Event-blokjes: afgerond, zachte kleuren, gekleurde rand links */
.reminder,.afspraak,.vrij,.rapport,.rapportNederland,.rapportBelgie,.rapportExtern,.inspectie{
  border:0 !important; border-radius:8px; margin-bottom:4px; padding:6px 8px;
  cursor:pointer; font-size:11.5px; line-height:1.35; color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.12); border-left:4px solid rgba(0,0,0,.22) !important;
  word-break:break-word;
}
.reminder span,.afspraak span,.vrij span,.rapport span,.rapportNederland span,.rapportBelgie span,.rapportExtern span,.inspectie span{ opacity:.92; }
.reminder{ background:#f0892b; }              /* reminder = oranje */
.afspraak{ background:#14a55a; }              /* afspraak = groen */
.vrij{ background:#f2cd13; color:#3a3000; }   /* vrij = geel, donkere tekst */
.vrij span{ color:#5a4d00; }
.rapport,.rapportNederland{ background:#1f7ae0; } /* rapport NL = blauw */
.rapportBelgie{ background:#8e44ad; }          /* rapport BE = paars */
.rapportExtern{ background:#e23b3b; }          /* rapport extern = rood */
.inspectie{ background:#0e8a49; }
/* Band onderweg: opvallende gestreepte rand (overschrijft de oude dotted-border) */
.bandOnderweg{ border:0 !important; outline:2px dashed #ffffff; outline-offset:-4px; box-shadow:0 0 0 2px #e23b3b !important; }

/* Mobiel: rooster leesbaar houden en horizontaal kunnen swipen (de .content-kaart
   scrollt al zijwaarts). Liever swipen dan onleesbaar samengeperste kolommen. */
@media (max-width:820px){
  .planner{ min-width:700px; }
  .planner th{ font-size:11px; padding:7px 5px; }
  .planner th:first-child, .planner td:first-child{ width:42px; }
  .planner td{ font-size:11px; padding:4px; }
  .planner td:first-child{ font-size:18px !important; }
  .reminder,.afspraak,.vrij,.rapport,.rapportNederland,.rapportBelgie,.rapportExtern,.inspectie{ font-size:11px; padding:5px 6px; }
}
/* ===================== EINDE AGENDA-LOOK ===================== */

/* Band-koppelknop per rij + actieve rij + foto-popup (beheer rapport) */
.bandkoppel{ background:#14a55a; color:#fff; border:0; border-radius:6px; width:24px; height:24px; line-height:1; cursor:pointer; padding:0; font-size:12px; }
.bandkoppel:hover{ background:#0f8a4a; }
.bandtabel tr.koppel-actief td{ background:#fff7e0 !important; }
#bandfotopopup{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.75); z-index:99999; align-items:center; justify-content:center; cursor:zoom-out; }
#bandfotopopup img{ max-width:92%; max-height:92%; border:4px solid #fff; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); }