html, body { height: 100%; }
#map { height: calc(100vh - 56px); }
.leaflet-container { background: #f2efe6; }

/* Tag filter dropdown list */
.tag-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.15rem 0; }
.tag-item label { margin:0; flex:1; cursor:pointer; }
.tag-item small { color:#6c757d; }

/* Pin-Liste */
.pin-item { cursor:pointer; }
.pin-item:hover { background: rgba(0,0,0,.04); }
.pin-item .name { font-weight: 600; }
.pin-item .tags { color:#6c757d; }
.pin-item .count { margin-left:auto; }
.pin-item.active { outline: 2px solid rgba(13,110,253,.4); background: rgba(13,110,253,.05); }
.pin-group-header { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); color:#6c757d; font-weight:600; letter-spacing:.04em; }
#pinListAZ { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }
#pinListAZ .az-btn { margin: 0 .125rem .25rem 0; }

/* List icon for pin list */
.pin-list-icon { width: 20px; height: 20px; margin-right: .5rem; display: inline-flex; align-items: center; justify-content: center; }
.pin-list-icon svg { display: block; }

/* Runde Marker-Scheiben (Defaultfarben + Kontrast) */
:root {
  --lm-marker-color: #70543E;   /* Default-Hintergrundfarbe, falls kein icon_color */
  --lm-marker-fg: #ffffff;      /* Symbolfarbe in der Scheibe */
  --lm-marker-stroke: #222222;  /* Außenrand-Farbe */
}
.lm-icon {
  color: var(--lm-marker-color); /* wird durch icon_color via inline style überschrieben */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.lm-icon svg { display: block; }
.icon-preview svg { display:block; width:24px; height:24px; }
.color-swatch { width:28px; height:28px; padding:0; border-width:1px; }
.color-swatch[data-color=""] { background: repeating-conic-gradient(#eee 0 25%, #ccc 0 50%) 0/8px 8px; color:#555; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--bs-border-color); border-radius:.375rem; background:var(--bs-body-bg); cursor:pointer; }
.icon-btn.active { outline:2px solid rgba(13,110,253,.5); box-shadow: 0 0 0 2px rgba(13,110,253,.15) inset; }
.icon-btn .svgwrap { display:block; width:32px; height:32px; }
.icon-btn[data-id=""] { font-weight:600; }

/* Ensure modals work well on small displays (low height / small devices) */
.modal-dialog.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); }
.modal-dialog.modal-dialog-scrollable .modal-body { overflow: auto; }
/* Make footer stay visible while body scrolls */
.modal-dialog .modal-footer { position: sticky; bottom: 0; background: var(--bs-body-bg); z-index: 1; }
/* Prevent Markdown editors from growing too tall on short screens */
.EasyMDEContainer .CodeMirror, .EasyMDEContainer .CodeMirror-scroll { max-height: 40vh; }
@media (max-height: 700px) {
  .EasyMDEContainer .CodeMirror, .EasyMDEContainer .CodeMirror-scroll { max-height: 32vh; }
}

/* Fix Mapkey webfont path (so <i class="mk ..."> glyphs show up) */
@font-face {
  font-family: 'MapkeyIcons';
  src: url('../../vendor/mapkey/fonts/MapkeyIcons.woff') format('woff'),
       url('../../vendor/mapkey/fonts/MapkeyIcons.ttf') format('truetype'),
       url('../../vendor/mapkey/fonts/MapkeyIcons.svg#MapkeyIcons') format('svg'),
       url('../../vendor/mapkey/fonts/MapkeyIcons.eot');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* Ensure Mapkey webfont is used by plugin-generated spans */
.mk, .mapkey, .mki-intext { font-family: 'MapkeyIcons' !important; }

/* Offcanvas für Icon-Picker etwas luftiger auf größeren Displays */
@media (min-width: 768px) {
  #iconPickerCanvas .offcanvas-body { max-width: 520px; }
}

/* Make the icon picker Offcanvas appear above the modal/backdrop so it is clickable */
.icon-picker-canvas { z-index: 1061; }
/* Optional: ensure its internal header/footer also sit above */
.icon-picker-canvas .offcanvas-header,
.icon-picker-canvas .offcanvas-body,
.icon-picker-canvas .offcanvas-footer { position: relative; z-index: 1; }

/* Image upload dropzone */
.upload-dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: .5rem;
  padding: 1rem;
  text-align: center;
  color: #6c757d;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.upload-dropzone.dragover {
  background-color: rgba(13,110,253,.06);
  border-color: rgba(13,110,253,.6);
  color: #0d6efd;
}
.upload-thumb {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
}

/* Thumbnail in View-Modal oben rechts */
.view-thumb {
  max-width: 170px;
}