:root {
  --brand: #006980;
  --accent: #f5b51b;
  --grey: #cfcfcf;
  --error: #b00020;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  margin: 0;
  padding-bottom: 3rem;   /* ruimte voor vaste footer */
}

.header {
  color: var(--brand);
  background: #fff;
  text-align: center;
  padding: 10px;
}
.logo { width: 20%; min-width: 150px; vertical-align: middle; }

.topnav { overflow: hidden; background: var(--brand); }
.topnav a {
  float: left;
  color: #fff;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}
.topnav .right { float: right; }
.topnav form { margin: 0; }
/* Logout-knop ziet eruit als de andere menu-items */
.topnav button {
  display: block;
  color: #fff;
  background: none;
  border-radius: 0;
  padding: 14px 12px;
  font: bold 12px Verdana, sans-serif;
}
.topnav a:hover, .topnav button:hover { color: #000; background: var(--accent); }

.content { padding: 0 20px; }

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
  background: var(--brand);
}

a { color: #1F8DD6; text-decoration: none; }
a:hover { text-decoration: underline; }

button, .button {
  display: inline-block;
  background: var(--grey);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
  font: bold 12px Verdana, sans-serif;
}
button:hover, .button:hover { background: #bfbfbf; }
input[type="file"] { display: none; }

.flash, .error { color: var(--error); font-weight: bold; }

.form-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 20rem);
  gap: 10px 16px;
  align-items: center;
}
.form-grid input { padding: 6px; font-size: 14px; }

progress { width: 100%; max-width: 40rem; height: 1.2rem; }

.file-list { line-height: 1.8; }

/* Analysepagina: 2x2 raster, op smalle schermen onder elkaar */
.status { padding: 2rem 0; }
.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 10px 0;
}
.panel { min-width: 0; }
#map { height: 420px; }
.frame {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
}
.frame img { max-width: 100%; max-height: 100%; }
.graph { width: 100%; }
.frame img, .graph { transition: opacity 0.15s; }
.loading { opacity: 0.6; }
.graph-bar { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-weight: bold; }
/* Knoppenbalk over de volle breedte, zodat kaart en frame op dezelfde hoogte beginnen */
.nav-buttons { grid-column: 1 / -1; display: flex; justify-content: space-between; }

.legend { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 4px; }
.legend .gradient {
  flex: 0 1 200px;
  height: 10px;
  background: linear-gradient(to right, green, yellow, orange, red);
}

.info dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.info dt { font-weight: bold; }
.info dd { margin: 0; overflow-wrap: anywhere; }
.verdeling { display: inline-block; margin-right: 12px; }
.verdeling::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
}
.verdeling.groen::before { background: green; }
.verdeling.oranje::before { background: orange; }
.verdeling.rood::before { background: red; }
.verdeling-n { display: block; font-size: 12px; color: #666; }

@media (max-width: 800px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  #map, .frame { height: 300px; }
}