/* ============================================
   Global layout / base styles
   ============================================ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eee;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* full viewport height */
}

/* Map wrapper fills space under the marker-set bar */
.map-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* prevents flex overflow issues */
}

#map {
  width: 100%;
  height: 100%;
  background-color: #202020 !important;
}

/* ============================================
   Left overlay: panel + coordinate display
   ============================================ */

/* Wrapper holding the side panel (top) and coord display (bottom) */
.left-overlay-wrapper {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  gap: 8px; /* gap between panel and coord display */
}

.top-panel-wrapper {
  position: relative;
  width: 220px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  /* occupies space above the coordinate display */
  flex: 1 1 auto;
  min-height: 0;

  /* scroll only inside marker-list, not here */
  overflow-y: hidden;
  overflow-x: hidden;
}

/* Shared sizing for panel-style blocks */
.top-panel,
.top-panel-wrapper .toggle-label,
.coord-jump {
  width: 100%;
  box-sizing: border-box;
}

/* Main "Locations" panel */
.top-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: max-content;
  background: rgba(0, 0, 0, 0.75);
  padding: 8px 10px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Collapsed state: stop filling vertical space, hide list */
.top-panel.collapsed {
  padding-bottom: 4px;
  flex: 0 0 auto;
}

.top-panel.collapsed #marker-list {
  display: none;
}

/* Header row: title + toggle button */
.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-header {
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 15px;
}

.panel-toggle {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}

.panel-toggle:hover {
  color: #ffcc33;
}

/* Checkbox blocks ("show labels", hover popups) */
.top-panel-wrapper .toggle-label {
  background: rgba(0, 0, 0, 0.75);
  padding: 8px 10px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: #fff;
}

/* Coordinate jump card */
.coord-jump {
  background: rgba(0, 0, 0, 0.75);
  padding: 8px 10px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: #fff;
}

.coord-jump label {
  display: block;
  margin-bottom: 4px;
}

.coord-jump input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 4px;
  border: none;
  font-size: 13px;
  background: #111;
  color: #fff;
}

/* Coordinate display box at the bottom of the left overlay */
#coord-display {
  background: rgba(0, 0, 0, 0.75);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  backdrop-filter: blur(4px);
  font-family: monospace;
}

#coord-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coord-copy-toggle {
  font-size: 11px;
  color: #ccc;
  user-select: none;
}


/* Zoom level indicator */
.zoom-level-display {
  background: rgba(0, 0, 0, 0.75);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  backdrop-filter: blur(4px);
  font-family: monospace;
}

/* Optional legacy select (if used somewhere) */
#marker-set-select {
  width: 100%;
  margin-bottom: 4px;
  font-size: 13px;
  padding: 3px 4px;
  border-radius: 4px;
}

/* ============================================
   Marker-set buttons bar (top)
   ============================================ */

.marker-set-buttons {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  padding: 8px 12px;
  background: #000; /* hides the map under the bar */
  border-bottom: 1px solid #333;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* Tile-style marker set buttons */
.marker-set-button {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  cursor: pointer;
  user-select: none;

  display: flex;
  flex-direction: column; /* icon on top, label under */
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 6px 10px;
  min-width: 80px;
  text-align: center;
  font-size: 11px;
}

.marker-set-icon {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 1));
}

.marker-set-label {
  white-space: normal;
  line-height: 1.2;
  font-size: 14px;
  font-weight: bold;
}

.marker-set-button.active {
  background: #ffcc33;
  color: #222;
  border-color: #ffcc33;
}

.marker-set-button:hover {
  filter: brightness(1.1);
}

/* ============================================
   Marker list (Locations panel)
   ============================================ */

/* Scrollable list area */
#marker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Group header per marker set */
.marker-list-header {
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  color: #ddd;
}

/* Individual row in the Locations list */
.marker-list-item {
  width: 100%;
  text-align: left;
  margin: 2px 0;
  padding: 6px 6px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  background: #1f2933;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.marker-list-item:hover {
  background: #2b7cff;
}

/* Icon inside a marker list item */
.marker-list-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

/* Text label inside a marker list item */
.marker-list-label {
  flex: 1;
  text-align: left;
}

/* Completion toggle (checkmark) */
.marker-list-complete-toggle {
  margin-left: 6px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.marker-list-complete-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Completed items: dimmed label, optional strike-through */
.marker-list-item.completed .marker-list-label {
  opacity: 0.6;
  text-decoration: line-through;
}

/* Optional: dim icon for completed items */
.marker-list-item.completed .marker-list-icon {
  opacity: 0.7;
}

/* ============================================
   Scrollbar styling
   ============================================ */

/* Marker list specific scrollbar hints (Firefox) */
#marker-list {
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

/* Global scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* WebKit scrollbars */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.40);
}

/* ============================================
   Map labels / Leaflet tooltips / markers
   ============================================ */

/* Always-visible labels used for regions */
.map-label {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
}

/* Marker labels (tooltips attached to markers) */
.leaflet-tooltip.marker-label {
  background: rgba(0, 0, 0, 0);
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  margin-left: 8px;
  font-size: 14px;
  border: none;
  box-shadow: none;
  font-weight: bold;
  /* max-width / wrapping can be re-enabled here if needed */
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 1));
}

/* Remove all tooltip arrows */
.leaflet-tooltip::before,
.leaflet-tooltip-right::before,
.leaflet-tooltip-left::before,
.leaflet-tooltip-top::before,
.leaflet-tooltip-bottom::before {
  display: none !important;
  border: none !important;
}

/* Keep for compatibility if Leaflet still references it */
.marker-label.leaflet-tooltip-right::before {
  border-right-color: rgba(0, 0, 0, 0.7);
}

/* Default Leaflet marker icon drop shadow */
.leaflet-marker-icon {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.6));
}

/* ============================================
   Toast notification
   ============================================ */

#copy-toast {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 1000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   Debug bar (toggled by backtick)
   ============================================ */

.debug-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* stays above map UI */
  display: none; /* hidden by default */

  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid #333;

  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.debug-bar.visible {
  display: flex;
}

.debug-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-label {
  font-weight: 600;
}

#debug-map-select {
  min-width: 220px;
  max-width: 320px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #111;
  color: #fff;
  font-size: 13px;
}

.debug-right {
  margin-left: auto;
  font-style: italic;
  opacity: 0.7;
}

/* ============================================
   Leaflet accordion (Updates + Links)
   ============================================ */

.info-accordion {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: 4px; /* spacing below Leaflet zoom control */
  max-width: 260px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Accordion root container */
.accordion-root {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual accordion section */
.accordion-section {
  border-radius: 4px;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Section header button */
.accordion-header {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.06);
}

.accordion-title {
  font-weight: 600;
}

.accordion-chevron {
  margin-left: 6px;
  font-size: 10px;
}

/* Collapsible panel body */
.accordion-panel {
  display: none; /* closed by default */
  padding: 4px 6px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-section.open .accordion-panel {
  display: block;
}

/* Updates list */
.updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Per-update entry with divider */
.updates-list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

/* Remove divider from the last visible update */
.updates-list-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.updates-title {
  font-weight: 600;
  font-size: 12px;
}

.updates-meta {
  opacity: 0.7;
  font-size: 12px;
}

.updates-body {
  font-size: 14px;
}

/* Pagination row under updates */
.updates-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 4px;
}

.updates-pagination button {
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  background: #2b2b2b;
  color: #fff;
}

.updates-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.updates-page-info {
  flex: 1;
  text-align: center;
  font-size: 11px;
}

/* Links list */
.links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.links-list-item {
  margin-bottom: 4px;
}

.links-list-item a {
  color: #9cc9ff;
  text-decoration: none;
  font-size: 12px;
}

.links-list-item a:hover {
  text-decoration: underline;
}