:root{--teal:#51b9b0;--teal-dark:#258e88;--ink:#263238;--muted:#6d7a80;--line:#dce3e4;--panel:#fff;--bg:#f3f6f6;--red:#df4054}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}body{display:flex;flex-direction:column}.topbar{height:70px;flex:0 0 70px;background:var(--teal);display:flex;align-items:center;gap:26px;padding:0 22px;color:white;box-shadow:0 2px 8px #173b3b22;z-index:2}.brand{display:flex;align-items:center;gap:10px;min-width:255px}.radar-mark{font-size:42px;line-height:1;font-weight:300}.brand strong{display:block;font-size:22px;letter-spacing:1.3px;font-weight:500}.brand small{display:block;font-size:11px;opacity:.9;letter-spacing:.2px}.top-control{display:flex;align-items:center;gap:10px;font-size:13px;margin-left:auto}.top-control select,.search input,.search button{height:40px;border:0;border-radius:5px;padding:0 12px;font:inherit}.top-control select{min-width:210px;background:#fff;color:var(--ink)}.search{display:flex;gap:6px}.search input{width:min(270px,24vw);background:white}.search button{background:#253b3b;color:white;cursor:pointer}.layout{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:0;flex:1}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:1}.side-head{padding:20px 18px 15px;display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line)}h1{font-size:19px;margin:0 0 5px;font-weight:650}.side-head p{margin:0;color:var(--muted);font-size:12px}.pill{background:#e4f5f2;color:#147b74;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:800;letter-spacing:1px}.section{padding:15px 18px;border-bottom:1px solid var(--line)}.section label{font-size:13px}.full-input{width:100%;height:38px;border:1px solid #ccd6d8;border-radius:4px;margin-top:8px;padding:0 10px;font:inherit}.section h2{font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:#68777b;margin:0 0 12px}.filters label,.layer-toggles label{display:flex;align-items:center;gap:9px;margin:11px 0}.filters input,.layer-toggles input{accent-color:var(--teal-dark);width:16px;height:16px}.hint{font-size:11px;color:#7c898d;line-height:1.5;margin:12px 0 0}.photo-section{padding:14px 0 0;flex:1;min-height:0;display:flex;flex-direction:column}.list-heading{display:flex;align-items:center;justify-content:space-between;padding:0 18px 12px}.list-heading h2{margin:0}.list-heading span{font-size:11px;color:var(--muted)}.photo-list{overflow:auto;min-height:0}.photo-item{display:flex;align-items:center;gap:10px;padding:11px 17px;border-top:1px solid #edf0f0;cursor:pointer;background:#fff}.photo-item:nth-child(even){background:#f7f8f8}.photo-item:hover,.photo-item.selected{background:#e5f5f3}.photo-symbol{width:23px;height:23px;border:2px solid #111;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}.photo-name{font-size:13px;flex:1}.photo-item button{border:0;background:transparent;cursor:pointer;color:#56666a;font-size:18px}.empty{font-size:12px;color:var(--muted);padding:15px 18px;line-height:1.5}.sidebar-footer{padding:11px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.status-dot{width:8px;height:8px;border-radius:50%;background:#e7a43b;display:inline-block;flex-shrink:0}.status-dot.ok{background:#20a16b}.status-dot.error{background:#d9485f}.map-wrap{position:relative;min-width:0;min-height:0}.map{height:100%;width:100%;background:#e7ece9}.map-tools{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:5px}.map-tools button{width:38px;height:38px;border:1px solid #d1d9da;border-radius:5px;background:#fff;color:#263238;font-size:23px;cursor:pointer;box-shadow:0 2px 7px #26323818}.map-attribution{position:absolute;bottom:5px;right:8px;background:#ffffffd9;padding:4px 7px;font-size:10px;color:#56666a;border-radius:3px}.selection-card{position:absolute;bottom:30px;left:16px;width:min(330px,calc(100% - 32px));padding:15px 18px;background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 24px #0002}.selection-card strong{font-size:15px}.selection-card p{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.5}.close-card{position:absolute;right:8px;top:6px;border:0;background:transparent;font-size:22px;cursor:pointer}.hidden{display:none!important}.ol-zoom{display:none}.ol-attribution{font-size:10px}@media(max-width:760px){.topbar{height:auto;min-height:65px;flex-wrap:wrap;gap:10px;padding:10px 12px}.brand{min-width:0;flex:1}.brand strong{font-size:17px}.radar-mark{font-size:32px}.top-control{margin-left:0}.top-control select{min-width:150px;max-width:45vw}.search{width:100%}.search input{width:100%;flex:1}.layout{grid-template-columns:minmax(220px,40%) minmax(0,1fr)}.side-head{padding:13px 10px}.section{padding:12px 10px}.photo-item{padding:10px}.photo-name{font-size:12px}}@media(max-width:520px){.layout{grid-template-columns:1fr;grid-template-rows:43vh minmax(0,1fr)}.sidebar{grid-row:2;border-right:0}.map-wrap{grid-row:1}.photo-section{max-height:36vh}.top-control{display:none}}


/* Beheer van meerdere geopende historische foto's */
.open-photos-section {
  flex: 0 0 auto;
  max-height: 34%;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.open-photos-heading {
  padding: 0 18px 9px;
}
.open-photos-list {
  overflow-y: auto;
  min-height: 0;
}
.open-photo-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 17px;
  border-top: 1px solid #edf0f0;
}
.open-photo-item.selected {
  background: #fff0df;
  border-left: 3px solid #ff9c32;
  padding-left: 14px;
}
.open-photo-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.open-photo-action {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-size: 17px;
}
.open-photo-action:hover,
.close-all-photos:hover:not(:disabled) {
  background: #e5f5f3;
}
.close-open-photo {
  color: #b42335;
  font-size: 21px;
}
.close-all-photos {
  align-self: flex-start;
  margin: 0 18px 8px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
}
.close-all-photos:disabled {
  opacity: .45;
  cursor: default;
}


/* Transparantieregelaar voor historische luchtfoto's */
.opacity-control {
  margin-top: 15px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafa;
}

.opacity-control > label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.opacity-control input[type="range"] {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 0;
  accent-color: var(--teal-dark);
  cursor: pointer;
}

.opacity-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--muted);
}

#photoOpacityValue {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-dark);
}


/* Uitklapbaar menu voor geavanceerde historische-fotobediening */
.advanced-section {
  flex: 0 0 auto;
  padding-top: 12px;
  padding-bottom: 12px;
}
.advanced-section > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: #526469;
  list-style-position: inside;
}
.advanced-intro {
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.advanced-photo-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  margin-top: 9px;
  background: #f8fafa;
}
.advanced-photo-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 9px;
  overflow-wrap: anywhere;
}
.advanced-photo-card label {
  display: block;
  font-size: 11px;
  margin-bottom: 5px;
}
.advanced-slider-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.advanced-slider-row input {
  flex: 1;
  min-width: 0;
  accent-color: var(--teal-dark);
}
.advanced-opacity-value {
  width: 42px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
}
.advanced-layer-actions {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.advanced-layer-actions button {
  flex: 1;
  padding: 6px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  font-size: 11px;
  cursor: pointer;
}
.advanced-layer-actions button:disabled {
  opacity: .4;
  cursor: default;
}
.advanced-layer-actions button:hover:not(:disabled) {
  background: #e5f5f3;
}


/* Historisch/huidig vergelijken */
.comparison-divider {
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid #fff;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}
.comparison-divider[hidden] {
  display: none !important;
}
.comparison-divider button {
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 6px;
  background: #263238;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
#compareToggle[aria-pressed="true"] {
  background: #258e88;
  color: #fff;
}


/* Vergelijking: knip de tegelcontainer van historische foto's af. */
#map.comparison-enabled .ol-layer.historical-photo-layer {
  clip-path: none;
}

#map.comparison-enabled .ol-layer.historical-photo-layer .ol-layer {
  clip-path: inset(0 calc(100% - var(--comparison-position, 50%)) 0 0);
}

/* Vergelijkingsbediening verborgen; HTML-elementen blijven beschikbaar voor app.js */
#compareToggle,
#comparisonDivider {
  display: none !important;
}


/* Historische kaartlagen */
.historical-map-section > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.historical-map-card {
  padding: 10px;
  margin-top: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafa;
}

.historical-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.historical-map-heading > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.historical-map-heading input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal-dark);
}

.historical-map-order {
  display: flex;
  gap: 4px;
}

.historical-map-order button {
  width: 27px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.historical-map-order button:disabled {
  opacity: .35;
  cursor: default;
}

.historical-map-opacity {
  margin-top: 9px;
}

.historical-map-opacity > label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
}

.historical-map-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.historical-map-slider input {
  flex: 1;
  min-width: 0;
  accent-color: var(--teal-dark);
}

.historical-map-slider span {
  width: 37px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
}


/* Herstel kaartformaat bij scrollen en herschalen */
.layout {
  grid-template-rows: minmax(0, 1fr);
}

.map-wrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.map {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.map .ol-viewport {
  height: 100% !important;
  width: 100% !important;
}

/* Fix: zijbalk scrollt zelfstandig, kaart blijft op zijn plaats */
html,
body {
  height: 100%;
  overflow: hidden;
}

.layout {
  height: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.map-wrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.map {
  height: 100%;
  width: 100%;
}


/* Overzichtelijke Nederlandse historische kaartperioden */
.dutch-map-search {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
}

.dutch-map-period {
  margin: 7px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafa;
  overflow: hidden;
}

.dutch-map-period > summary {
  padding: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.dutch-map-period-content {
  padding: 0 8px 8px;
}

.dutch-map-period-content .historical-map-card {
  background: white;
}

.dutch-map-period[hidden] {
  display: none;
}

/* Inklapbare bediening voor WOII-luchtfoto's */
.photo-tools-content {
  padding-top: 12px;
}

.photo-tools-section > summary,
.layer-toggles > summary,
.open-photos-section > summary,
.photo-section > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  list-style-position: inside;
}

.photo-tools-section[open],
.layer-toggles[open],
.open-photos-section[open],
.photo-section[open] {
  padding-bottom: 10px;
}

.open-photos-section > summary span,
.photo-section > summary span {
  float: right;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.photo-section > summary {
  padding: 2px 0;
}

.photo-map-controls {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.photo-map-controls h2 {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* GEOVERLEDEN - nieuwe huisstijl */
:root {
  --teal: #173B63;
  --teal-dark: #245B8F;
  --ink: #26384A;
  --muted: #6D7D8C;
  --line: #D9E3EC;
  --bg: #F1F5F9;
}
.topbar {
  background: #173B63;
  box-shadow: 0 2px 8px #173b6322;
}
.brand { gap: 12px; }
.brand-mark {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
}
.brand strong {
  font-size: 23px;
  letter-spacing: .3px;
  font-weight: 650;
}
.search button { background: #245B8F; }
.search button:hover { background: #3478B8; }
.filters input, .layer-toggles input,
.section input[type="checkbox"] {
  accent-color: #245B8F;
}
.photo-item:hover, .photo-item.selected {
  background: #E8F1F8;
}

/* GEOVERLEDEN - vernieuwde kaartbibliotheek */
.sidebar details.section {
  margin: 9px 12px;
  padding: 0;
  border: 1px solid #dce6ef;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .2s, box-shadow .2s;
}

.sidebar details.section:hover {
  border-color: #a9c5df;
}

.sidebar details.section[open] {
  border-color: #b7cde2;
  box-shadow: 0 2px 8px #173b630d;
  background: #f8fbfe;
}

.sidebar details.section > summary {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  color: #263f59;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .1px;
  user-select: none;
}

.sidebar details.section > summary::-webkit-details-marker {
  display: none;
}

.sidebar details.section > summary::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-right: 10px;
  border-radius: 7px;
  background: #e8f1f8;
  color: #245b8f;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar details.photo-tools-section > summary::before { content: "📷"; }
.sidebar details.historical-map-section > summary::before { content: "🗺"; }
.sidebar details.advanced-section > summary::before { content: "⚙"; }
.sidebar details.open-photos-section > summary::before { content: "🖼"; }
.sidebar details.photo-section > summary::before { content: "⌖"; }

.sidebar details.section > summary::after {
  content: "›";
  margin-left: auto;
  padding-left: 12px;
  color: #6485a5;
  font-size: 23px;
  font-weight: 400;
  transform: rotate(0deg);
  transition: transform .2s;
}

.sidebar details.section[open] > summary::after {
  transform: rotate(90deg);
}

.sidebar details.section[open] > summary {
  background: #edf4fa;
  border-bottom: 1px solid #dce6ef;
  color: #173b63;
}

.sidebar details.section > :not(summary) {
  padding-left: 14px;
  padding-right: 14px;
}

.sidebar details.section > summary span {
  margin-left: auto;
  color: #71869a;
  font-size: 11px;
  font-weight: 500;
}

.sidebar details.section[open] > summary span {
  margin-left: 8px;
}

.sidebar details.section .section {
  border: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}


/* Landherkenning historische kaartcollecties */
.sidebar details.belgium-map-section > summary::before {
  content: "🇧🇪";
  font-size: 19px;
}
.sidebar details.netherlands-map-section > summary::before {
  content: "🇳🇱";
  font-size: 19px;
}

/* WOII-functies gegroepeerd onder de fotocollectie */
.photo-subsections {
  padding: 4px 14px 10px;
}
.sidebar .photo-subsections details.section {
  margin: 8px 0;
  background: #fff;
}
.sidebar .photo-subsections details.section > summary {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
}

/* V2-status altijd onderaan het zijpaneel */
.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;
  min-height: 42px;
  background: #fff;
}



/* GeoVerleden - nieuwe huisstijl */
:root {
  --teal: #173B63;
  --teal-dark: #245B8F;
  --ink: #26384A;
  --muted: #6D7D8C;
  --line: #D9E3EC;
  --panel: #FFFFFF;
  --bg: #F1F5F9;
}

.topbar {
  background: #173B63;
}

.brand {
  gap: 12px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  color: #FFFFFF;
}

.brand strong {
  font-size: 24px;
  letter-spacing: .5px;
  font-weight: 650;
}

.brand small {
  color: #D8E8F6;
  font-size: 12px;
  letter-spacing: .2px;
}

.search button {
  background: #245B8F;
}

.search button:hover {
  background: #3478B8;
}

.pill {
  background: #E8F1F8;
  color: #245B8F;
}

.section summary {
  color: #173B63;
}

.photo-item:hover,
.photo-item.selected {
  background: #E8F1F8;
}