.world-map-modal,
.expedition-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(8px, var(--safe-top))
    max(8px, var(--safe-right))
    max(8px, var(--safe-bottom))
    max(8px, var(--safe-left));
  box-sizing: border-box;
  overflow: hidden;
}

.world-map-modal[hidden],
.expedition-modal[hidden] {
  display: none;
}

.world-map-panel,
.expedition-panel {
  border-image: url('/assets/ui/ui_map_chrome.png') 12 fill / 12px / 0 stretch;
  background: rgba(20, 22, 28, 0.96);
  border-radius: 4px;
  width: 100%;
  max-width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  color: #e8e6e3;
  overflow: hidden;
  min-width: 0;
}

.world-map-header,
.expedition-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #3a3d4a;
  flex-shrink: 0;
}

.world-map-header h2,
.expedition-header h2 {
  flex: 1 1 120px;
  margin: 0;
  font-size: 0.95rem;
  min-width: 0;
}

/* Kompakte Buttons im Karten-Dialog (ohne globale 44px-Touch-Ziele) */
.world-map-modal .btn,
.expedition-modal .btn {
  min-height: unset;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.world-map-modal .btn-primary,
.expedition-modal .btn-primary {
  padding: 6px 10px;
}

.world-map-body,
.expedition-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}

.world-map-canvas,
.expedition-map-canvas {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 200px;
  height: min(52vh, 420px);
  display: block;
  background: #0d1117;
  border-radius: 4px;
  touch-action: none;
}

.world-map-sidebar,
.expedition-sidebar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 28vh;
}

/* Koordinaten: eine Zeile, schmale Felder */
.world-map-sidebar > label,
.expedition-sidebar > label:not(.map-layer-row) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.75rem;
  line-height: 1.3;
}

.world-map-modal input[type="number"],
.expedition-modal input[type="number"] {
  width: auto;
  min-width: 3.2rem;
  max-width: 5rem;
  flex: 0 1 auto;
  min-height: unset;
  height: 26px;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
}

.world-map-modal input[type="checkbox"],
.expedition-modal input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: unset;
  min-width: 14px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.map-layers {
  border: 1px solid #3a3d4a;
  border-radius: 6px;
  padding: 6px 8px 4px;
  margin: 0;
}

.map-layers legend {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0 4px;
}

.map-layers label.map-layer-row,
.map-layers label:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 0;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
}

.expedition-preview {
  border-top: 1px solid #3a3d4a;
  padding-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.expedition-preview p {
  margin: 0 0 4px;
}

.expedition-warn {
  font-size: 0.7rem;
  color: #c4a35a;
  word-break: break-word;
}

/* Breitere Viewports: Sidebar neben der Karte */
@media (min-width: 640px) {
  .world-map-body,
  .expedition-body {
    flex-direction: row;
  }

  .world-map-sidebar,
  .expedition-sidebar {
    width: 152px;
    max-width: 152px;
    max-height: none;
    flex-shrink: 0;
  }

  .world-map-canvas,
  .expedition-map-canvas {
    height: min(60vh, 480px);
  }
}