:root {
  --bs-primary: #ee2829;
  --bs-primary-rgb: 238,40,41;
  --bs-secondary: #222;
  --bs-secondary-rgb: 34,34,34;
  --bs-secondary-light: #6b6b6b;
  --bs-secondary-light-rgb: 107,107,107;
  --bs-body-color: var(--bs-secondary);
  --bs-body-bg: #fff;
}

#app input, #app button, #app select, #app textarea,
#zonModal input, #zonModal button, #zonModal select, #zonModal textarea {
  height: auto;
  width: auto;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  box-sizing: border-box;
}

#app input[type="range"],
#zonModal input[type="range"] {
  width: 100%;
  border: 0;
  padding: 0;
}

html, body, #app {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background: #fff;
}

#controls { box-sizing: border-box; }

.search-wrap { position: relative; }
.search-wrap .form-control { padding-right: 2.5rem; }
.suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 1200;
  max-height: 260px;
  overflow: auto;
  font-size: 14px;
}
.suggestions .item { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.suggestions .item:last-child { border-bottom: none; }
.suggestions .item:hover, .suggestions .item.active { background: rgba(238,40,41,0.06); }
.suggestions .name { display: block; color: var(--bs-secondary); }
.suggestions .type { display: block; color: #666; font-size: 12px; margin-top: 4px; }

#map-wrap { height: 100%; }
#map { width: 100%; height: 100%; }
.modal-body #map { height: 70vh; min-height: 320px; }
.modal-body #map-wrap { height: 70vh; }

.btn-circle {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-circle i { font-size: 16px; line-height: 1; }
.btn-circle.icon-only { width: 34px; border-radius: 50%; padding: 0; }
.modal-header { padding: 0.25rem 0.5rem; }
.modal-header .btn-close.small-close { width: 1.2rem; height: 1.2rem; padding: 0.15rem; transform: scale(0.95); }
.modal-header .btn-close.small-close::after { font-size: 0.9rem; }

#controls h5, #locationName { display: none !important; }
.modal #controls h5, .modal #locationName { display: block !important; }
.modal .form-select { border-color: var(--bs-primary); color: var(--bs-secondary); background-color: #fff; }
.modal .form-select:hover, .modal .form-select:active { border-color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb),0.04); }
.modal .form-select:focus { border-color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb),0.06); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.12); outline: none; }
.modal #locationName { display: block !important; margin-left: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--bs-secondary); }

.btn-close-circle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.btn-close-circle i { font-size: 1.05rem; line-height: 1; color: #fff; }
.btn-close-circle:focus { outline: 3px solid rgba(var(--bs-primary-rgb),0.18); outline-offset: 2px; }
.btn-close-circle:hover { filter: brightness(0.96); }

.form-range { height: 1.4rem; }
.form-label { font-weight: 600; color: var(--bs-secondary); }
.btn-primary { background: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover { background: #d62624; border-color: #d62624; }
.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary:hover { background: rgba(var(--bs-primary-rgb),0.06); }
.btn-outline-secondary { color: var(--bs-secondary); border-color: rgba(0,0,0,0.08); }
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }

.form-range::-webkit-slider-thumb { background: var(--bs-primary); border: 2px solid rgba(0,0,0,0.12); }
.form-range::-moz-range-thumb { background: var(--bs-primary); border: 2px solid rgba(0,0,0,0.12); }

@media (max-width:900px) {
  #app > .row { flex-direction: column; }
  #map-wrap { order: 1; display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; height: 60vh; max-height: 70vh; }
  #map { flex: 1 1 auto; height: 100%; }
  #controls { order: 2; width: 100%; border-right: none !important; border-top: 1px solid #eee; flex: 0 0 auto; max-height: 40vh; overflow: auto; }
  #controls.border-end { border-right: none !important; }
}

#searchBtn, #clearBtn { display: none; }
#address, #suggestions { display: none !important; }

.house-marker-divicon { display: block; width: 28px; height: 28px; text-align: center; line-height: 28px; }
.house-marker-divicon i { display: inline-block; vertical-align: middle; font-size: 22px; color: var(--bs-secondary-light); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); }

#openToolBtn.btn-circle { transition: transform 180ms ease, box-shadow 200ms ease; }
#openToolBtn.btn-circle:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
#openToolBtn .bi-sun { display: inline-block; transform-origin: 50% 50%; }
#openToolBtn:hover .bi-sun { animation: spin-sun 1s linear infinite; }

@keyframes spin-sun { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.house-marker-divicon img { pointer-events: none; }
.btn-check + .btn { position: relative; padding-right: 2.6rem; padding-left: 0.6rem; }
.btn-check + .btn::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 50%; }
.btn-check:checked + .btn::after { content: '✔'; font-size: 0.95rem; color: #fff; background: rgba(0,0,0,0.14); }

.shadow-mode-block .btn-group .btn { border-radius: 0.35rem !important; display: inline-flex; align-items: center; justify-content: center; }
.shadow-mode-block .btn-group { gap: 0.35rem; }
.shadow-mode-block .btn-group .btn, .season-select-wrap .form-select { border-radius: 0.35rem !important; padding-top: 0.28rem !important; padding-bottom: 0.28rem !important; padding-left: 2.6rem !important; padding-right: 1.4rem !important; font-size: 0.95rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; }
.btn-check:checked + .btn { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

#controls .top-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
#controls .top-row .season-block { margin-left: 0 !important; }
#controls .top-row .season-block .form-select { width: auto; min-width: 90px; }
#controls .form-label { font-size: 0.85rem; }

.modal input[type="date"].form-control { border-color: var(--bs-primary); color: var(--bs-secondary); background-color: #fff; accent-color: var(--bs-primary); }
.modal input[type="date"].form-control:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.12); border-color: var(--bs-primary); outline: none; }
.modal .form-select option:hover { background-color: rgba(var(--bs-primary-rgb),0.06); }
.modal .form-select option:checked { background-color: var(--bs-primary); color: #fff; font-weight: 600; }
.modal .form-select { padding-right: 2.5rem; }
.season-select-wrap { position: relative; display: inline-block; }
.season-select-wrap .form-select { padding-right: 2.5rem; }
.season-select-wrap.has-check .form-select { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); font-weight: 600; }
.season-select-wrap .form-select { padding-right: 2.5rem; padding-left: 2.6rem; text-align: left; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-text-align-last: left; text-align-last: left; background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 10px 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23222' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); }
.season-select-wrap.has-check .form-select { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); }
.season-select-wrap.has-check::after { content: '✔'; position: absolute; left: 8px; right: auto; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 50%; background: rgba(0,0,0,0.14); color: #fff; font-size: 0.95rem; }
.season-select-wrap .form-select option { background-color: #fff; color: var(--bs-secondary); text-align: left !important; padding-left: 0.6rem !important; }
.season-select-wrap .form-select option:hover { background-color: rgba(var(--bs-secondary-light-rgb),0.12); color: var(--bs-secondary); }
.season-select-wrap .form-select option:checked { background-color: var(--bs-primary); color: #fff; font-weight: 600; }

.season-block + #treeToggleRow, .season-block #treeToggleRow { margin-left: 0.5rem; }
#treeToggleRow .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
#treeToggleRow .form-check-input { cursor: pointer; }
#treeToggleRow .form-check-label { cursor: pointer; font-size: 0.85rem; }

#manualTreesRow #addTreeModeBtn { border-radius: 0.35rem; font-size: 0.95rem; line-height: 1; padding: 0.28rem 0.6rem; display: inline-flex; align-items: center; }
#manualTreesRow .form-control-sm { font-size: 0.85rem; line-height: 1; padding: 0.22rem 0.45rem; border-radius: 0.35rem; }
#manualTreesRow .tiny-help small { font-size: 0.65rem; line-height: 1.15; }
#manualTreesRow #manualTreesList { font-size: 0.7rem; line-height: 1.3; }
#manualTreesRow #manualTreesList span { font-size: 0.7rem; }
#manualTreesRow #manualTreesList .btn-link { font-size: 0.7rem; }
.manual-tree-label { pointer-events: none; }
.manual-tree-label span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,160,0,0.9); color: #fff; font-size: 0.7rem; border: 1px solid rgba(0,0,0,0.25); }

#treeInfo { font-size: 0.65rem; line-height: 1.15; }
.leaflet-touch .leaflet-control-attribution { display: none !important; }
.leaflet-bottom { display: none !important; }

@media (max-width:320px) {
  #controls .top-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  #controls .top-row .shadow-mode-block, #controls .top-row .season-block { width: 100%; display: flex; align-items: center; gap: 0.5rem; }
  #controls .top-row .season-block { margin-left: 0 !important; }
  .season-block .season-select-wrap { width: 100%; }
  .season-block .form-select { width: 100%; min-width: 0; }
  .shadow-mode-block .btn-group { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0.25rem; }
  .shadow-mode-block .btn-group .btn { white-space: nowrap; flex: 0 0 auto; }
}

@media (max-width:480px) {
  #controls .top-row { gap: 0.35rem !important; }
  .shadow-mode-block .btn-group { gap: 0.35rem !important; }
  .shadow-mode-block .btn-group .btn { padding: 0.22rem 0.5rem; font-size: 0.92rem; line-height: 1; min-width: 0; border-radius: 0.35rem; }
  .season-block .form-select { font-size: 0.92rem; padding: 0.18rem 0.5rem 0.18rem 1.6rem; min-width: 56px; width: auto; line-height: 1.1; }
  .season-select-wrap .form-select { padding-right: 2.0rem; }
  #map-wrap { height: 50vh; max-height: 60vh; }
  #controls { max-height: 46vh; }
  .shadow-mode-block .btn-group { width: auto; justify-content: flex-start; flex-wrap: nowrap; gap: 0.35rem !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shadow-mode-block .btn-group.me-2 { margin-right: 0 !important; }
  .shadow-mode-block .btn-group .btn { white-space: nowrap; flex: 0 0 auto; padding-left: 1.6rem !important; padding-right: 0.8rem !important; }
  .btn-check:checked + .btn::after { font-size: 0.95rem; right: 10px; }
}

@media (max-width:360px) {
  #controls .top-row { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .shadow-mode-block .btn-group { width: 100%; justify-content: flex-start; }
  .shadow-mode-block .btn-group .btn { font-size: 0.74rem; padding: 0.14rem 0.4rem; }
  .season-block .form-select { width: 100%; min-width: 0; font-size: 0.82rem; padding: 0.12rem 0.4rem 0.12rem 1.2rem; }
  #map-wrap { height: 46vh; max-height: 56vh; }
}

.shadow-mode-block .btn-check + .btn { padding-right: 0.6rem !important; padding-left: 1.7rem !important; min-width: 50px; }
.shadow-mode-block .btn-check + .btn::after { right: 10px !important; width: 20px !important; height: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
.shadow-mode-block .btn-check:checked + .btn::after { content: '✔' !important; font-size: 1rem !important; color: #fff !important; background: rgba(0,0,0,0.14) !important; }
.shadow-mode-block .btn-group .btn { border-radius: 0.35rem !important; }
.shadow-mode-block .btn-group .btn:first-child { border-top-left-radius: 0.35rem !important; border-bottom-left-radius: 0.35rem !important; }
.shadow-mode-block .btn-group .btn:last-child { border-top-right-radius: 0.35rem !important; border-bottom-right-radius: 0.35rem !important; }
.shadow-mode-block .btn-check + .btn::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; border-radius: 50%; background: rgba(0,0,0,0.14); color: #fff; font-size: 0.95rem; }
.shadow-mode-block .btn-check:checked + .btn::before { content: '✔'; }
.shadow-mode-block .btn-check + .btn::after { display: none !important; }
.shadow-mode-block label[for="shadowEnv"] { padding-left: 1rem !important; padding-right: 1rem !important; min-width: 0 !important; }
.season-select-wrap .form-select option { padding-left: 0.6rem; text-align: left; }

@media (min-width:992px) {
  #controls { flex: 0 0 340px; max-width: 340px; }
  .shadow-mode-block .btn-group { gap: 0.5rem; }
}

#timeRange { border: 0; }

.zon-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.88);
  z-index: 9999;
}

/* Voorkom dat de Domino-pagina CSS de Leaflet SVG-lagen kapot maakt */
#map .leaflet-pane {
  position: absolute !important;
}
#map svg {
  width: auto !important;
  height: auto !important;
  vertical-align: baseline !important;
}
#map .leaflet-overlay-pane svg,
#map .leaflet-footprintPane-pane svg,
#map .leaflet-shadowPane-pane svg,
#map .leaflet-envShadowPane-pane svg,
#map .leaflet-housePane-pane svg,
#map .leaflet-sunPane-pane svg {
  position: absolute !important;
  overflow: visible !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}