/* Define default colors */
:root {
	--bg: 34, 34, 34;
	--bg-color: 255, 255, 255;
	--bg-accent: 60, 60, 60;
	--bg-color-t: #ffffffb3;
	--text-color: 0, 0, 0;
	--accent-color: 240, 240, 240;
	--green: #228b22;
	--border: #444444;
	--DM-button: #fff;
}
body.dark-theme {
	--bg: 18, 18, 18;
	--bg-color: 30, 30, 30;
	--bg-accent: 45, 45, 45;
	--bg-color-t: rgba(30, 30, 30, 1);
	--text-color: 224, 224, 224;
	--accent-color: 239, 105, 80;
	--green: rgb(0, 158, 96);
	--border: #44444400;
	--DM-button: #4444ff;
}

.hidden {
	display: none !important;
}
#map { 
	height: 100vh; 
	width: 100%; 
	background: rgb(var(--bg)); /* Dark background so you can see the image edges */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	touch-action: none;
	outline: none;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}
#map.loaded {
	opacity: 1;
}
body { 
	margin: 0;
	background-color: rgb(var(--bg));
}
.leaflet-container {
	background: rgb(var(--bg)) !important;
}
.leaflet-control-layers-selector {
	background: rgb(var(--bg-color));
}
.leaflet-control-layers-toggle{
	background-color: rgba(var(--bg-color), 1);
}
.leaflet-control-layers-expanded {
	background: rgb(var(--bg-color));
	color: rgb(var(--text-color))
}

/* This removes the default Leaflet white square background */
.map-emoji-icon {
	background: none !important;
	border: none !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

.emoji-wrapper {
	font-size: 24px;
	filter: drop-shadow(0 0 2px black); /* Makes emoji readable on any map color */
	cursor: pointer;
}
/* 1. The Base Style (Always loaded, but hidden by default)
.static-label {
	background: var(--bg-color) !important;
	border: 1px solid #fff !important;
	color: black !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	white-space: nowrap;
}
*/
/* 1. Set the base state for the labels */
.leaflet-tooltip {
    opacity: 0 !important; /* Start fully transparent */
    transition: opacity 0.5s ease-in-out !important; /* Smooth transition */
    pointer-events: none; /* Prevents hidden labels from blocking map clicks */
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    
    /* Keep existing styles like background/border below */
}

/* 2. When zoomed in (class added via JS), fade them in */
.show-labels .leaflet-tooltip {
    opacity: 1 !important; /* Or 0.7 if you want them slightly see-through */
    pointer-events: auto; /* Allows interaction if needed */
}

.map-controls {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2000;
	display: flex;
	gap: 10px;
}
#map-guide {
	position: fixed;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3000;
	background: rgba(var(--bg-color), 0.7);
	color: rgb(var(--text-color));
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 14px;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.bottom-ui-container {
	position: fixed;
	bottom: 10px;
	left: 10px;
	right: 10px; /* Spans the width of the screen */
	z-index: 4000;
	display: flex;
	justify-content: space-between; /* Pushes display left, buttons right */
	align-items: flex-end;
	pointer-events: none; /* Allows clicking the map behind the gap */
}
#coordinate-display {
	background: var(--bg-color-t);
	color: rgb(var(--text-color));
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 16px;
	border: 1px solid var(--border);
	pointer-events: none;
	min-width: 100px;
}

.button-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.button-group, #coordinate-display {
	pointer-events: auto; /* Re-enables clicking on the actual buttons */
}

/* MOBILE FIX: When the screen is narrower than 600px */
@media (max-width: 600px) {
	.bottom-ui-container {
		flex-direction: column; /* Stack them vertically */
		align-items: flex-start; /* Align everything to the left */
		gap: 10px;
	}

	.button-group {
		justify-content: flex-start;
	}
}
.login-group {
	display: flex;
	gap: 5px;
	background: var(--bg-color-t);
	padding: 5px;
	border-radius: 4px;
	border: 1px solid var(--border);
}

.login-group input {
	background: rgb(var(--bg-color));
	border: 1px solid #555;
	color: rgb(var(--text-color));
	padding: 4px 8px;
	font-size: 12px;
	width: 100px;
}

.login-group button {
	background: rgb(var(--bg-color));
	color: rgb(var(--text-color));
	border: none;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 12px;
}

.login-group button:hover {
	background: #666;
}
.logged-in #login-form {
	display: none;
}

#status-indicator {
	display: none;
	font-size: 12px;
	color: var(--green);
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.logged-in #status-indicator {
	display: inline;
	font-weight: 400;
}
/* Night mode toggle */
#theme-toggle {
background-color: transparent;
background: transparent;
display: inline;
padding: 0px;
}
.login-group, 
.button-group, 
#coordinate-display,
#login-form {
	pointer-events: auto !important;
}
/* This makes the pin look Red/Orange */
.DM-marker-style {
	filter: hue-rotate(140deg) brightness(0.8) saturate(2);
}
/* Styling for the text inside the popup */
.DM-label {
	color: #d4af37; /* Gold color */
	/*font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;*/
}

.public-label {
	color: rgb(var(--text-color));
	font-weight: normal;
}

.leaflet-popup-content-wrapper {
	background: rgb(var(--bg-color));
	color: rgb(var(--text-color))
}
.leaflet-popup-content-wrapper button {
    /* This targets any button inside the Leaflet popup wrapper */
    border-radius: 0px;
	background-color: transparent;
	background: transparent;
	border: none;
	outline: none;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
.leaflet-popup-tip {
	background: rgb(var(--bg-color));
}
/* Optional: Style the entire popup box for DM pins */
.DM-popup .leaflet-popup-content-wrapper {
	background: #2c3e50;
	color: white;
	border: 2px solid #d4af37;
}
.DM-tooltip {
	background-color: #2c3e50;
	color: #d4af37;
	border: 1px solid #d4af37;
	font-weight: bold;
}
#toggle-btn {
	display: block;
    width: 120px;
	background-color: var(--DM-button);
}
#marker-form {
	position: fixed; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	z-index: 2000; 
	background: rgb(var(--bg-color));
	color: rgb(var(--text-color));
	padding: 25px; 
	border-radius: 12px; 
	box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#marker-category {
  display: flex;
  align-items: center; /* Vertically centers emoji and text */
  gap: 12px;           /* Precise spacing between emoji and text */
  padding: 10px;
}

.emoji {
  display: inline-block;
  width: 24px;         /* Fixed width ensures text starts at the same spot */
  text-align: center;
}
/* The main search box container */
.search-container {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: rgb(var(--bg-color));
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 250px;
    
    /* THE FIX: Vertical centering logic */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers items vertically if there is extra height */
}

/* The input field itself */
#mapSearch {
    width: 100%;
    padding: 10px;
    margin: 0; /* Remove default browser margins that cause shifting */
    box-sizing: border-box;
    border: 1px solid rgb(var(--bg-accent));
    border-radius: 4px;
    outline: none;
    font-size: 14px;
	background: rgb(var(--bg-color));
	color: rgb(var(--text-color))
}
#mapSearch:focus {
    border-color: #3388ff; /* Slight blue highlight when typing */
}
/* The results dropdown */
#results {
	color: rgb(var(--text-color));
	background: rgb(var(--bg-color));
    max-height: 200px;
    overflow-y: auto;
    /* Only add margin if there are actually results inside */
    margin-top: 0; 
}

/* Style for individual search result items (added via JS later) */
.search-result-item {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.search-result-text {
    background: rgb(var(--bg-color));

}

.search-result-item:hover {
    background-color: #f0f0f0;
}