/* The Wall Loot Maps — Frontend */

.twlm-wrap {
	--twlm-height: 720px;
	--twlm-bg:        #0d0d0d;
	--twlm-panel:     #161616;
	--twlm-panel-2:   #1c1c1c;
	--twlm-border:    #2a2a2a;
	--twlm-text:      #e6e6e6;
	--twlm-text-dim:  #888;
	--twlm-accent:    #cc0000;
	--twlm-accent-hi: #ff1f1f;

	display: flex;
	flex-direction: column;
	background: var( --twlm-bg );
	color: var( --twlm-text );
	border: 1px solid var( --twlm-border );
	border-radius: 6px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Toolbar ---------- */
.twlm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: var( --twlm-panel );
	border-bottom: 1px solid var( --twlm-border );
}

.twlm-toolbar-left { display: flex; flex-direction: column; gap: 2px; }
.twlm-title { font-size: 18px; color: #fff; letter-spacing: 0.5px; }
.twlm-desc  { font-size: 12px; color: var( --twlm-text-dim ); }

.twlm-map-switcher {
	display: flex;
	gap: 8px;
	margin: 5px 0;
	align-items: center;
	flex-wrap: wrap;
}

.twlm-map-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.7em 1.5em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 300ms ease;
	position: relative;
	overflow: hidden;
	text-decoration: none !important;
	border-radius: 2px;
	line-height: 1.2;
}

.twlm-map-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #ffffff;
	opacity: 0;
	transition: opacity 150ms ease;
}

.twlm-map-btn:hover::before {
	opacity: 0.05;
}

.twlm-map-btn.btn-primary {
	background: #cc0000 !important;
	color: #ffffff !important;
	border-color: #cc0000 !important;
}

.twlm-map-btn.btn-primary:hover {
	background: #e60000 !important;
	border-color: #e60000 !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(204, 0, 0, 0.3) !important;
}

.twlm-map-btn.btn-outline {
	background: transparent !important;
	color: #ffffff !important;
	border-color: #333333 !important;
}

.twlm-map-btn.btn-outline:hover {
	border-color: #cc0000 !important;
	color: #cc0000 !important;
	background: transparent !important;
}

.twlm-toolbar-right {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.twlm-search,
.twlm-server-filter {
	background: var( --twlm-panel-2 );
	border: 1px solid var( --twlm-border );
	color: var( --twlm-text );
	padding: 7px 11px;
	font-size: 13px;
	border-radius: 4px;
	min-width: 180px;
}

.twlm-search:focus,
.twlm-server-filter:focus {
	outline: none;
	border-color: var( --twlm-accent );
}

.twlm-toggle-sidebar {
	background: var( --twlm-panel-2 );
	border: 1px solid var( --twlm-border );
	color: var( --twlm-text );
	padding: 7px 12px;
	border-radius: 4px;
	cursor: pointer;
	display: none;
}
.twlm-toggle-sidebar:hover { border-color: var( --twlm-accent ); }

/* ---------- Body ---------- */
.twlm-body {
	display: flex;
	height: var( --twlm-height );
	min-height: 480px;
}

.twlm-sidebar {
	width: 240px;
	flex-shrink: 0;
	background: var( --twlm-panel );
	border-right: 1px solid var( --twlm-border );
	overflow-y: auto;
	padding: 12px 14px;
	font-size: 13px;
}

.twlm-group { margin-bottom: 14px; }
.twlm-group-head {
	border-bottom: 1px solid var( --twlm-border );
	padding-bottom: 6px;
	margin-bottom: 6px;
}
.twlm-group-head label {
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
	cursor: pointer;
	display: flex;
	gap: 8px;
	align-items: center;
}

.twlm-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.twlm-cat-list li { margin: 2px 0; }
.twlm-cat-list label {
	display: flex;
	gap: 8px;
	align-items: center;
	cursor: pointer;
	color: var( --twlm-text );
	padding: 3px 0;
}
.twlm-cat-list label:hover { color: #fff; }

.twlm-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
}
.twlm-swatch-icon {
	width: 14px;
	height: 14px;
	border-radius: 0;
	border: none;
	object-fit: contain;
}

.twlm-meta {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var( --twlm-border );
	color: var( --twlm-text-dim );
	font-size: 11px;
	line-height: 1.5;
}

.twlm-map {
	flex: 1;
	background: #0a0a0a;
	min-height: 100%;
}

/* ---------- Pins ---------- */
.leaflet-marker-icon.twlm-divicon {
	background: transparent !important;
	border: 0 !important;
}
.twlm-pin {
	display: block;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.7 ), 0 2px 4px rgba( 0, 0, 0, 0.5 );
	transition: transform 0.15s;
}
.leaflet-marker-icon:hover .twlm-pin {
	transform: scale( 1.4 );
}

/* ---------- Coordinate readout ---------- */
.twlm-coords-readout {
	background: rgba( 0, 0, 0, 0.75 );
	border: 1px solid var( --twlm-border );
	color: #fff;
	font-family: "Courier New", monospace;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 3px;
	pointer-events: none;
}

/* ---------- Popups ---------- */
.leaflet-popup-content-wrapper {
	background: var( --twlm-panel );
	color: var( --twlm-text );
	border: 1px solid var( --twlm-border );
	border-radius: 4px;
	padding: 0;
}
.leaflet-popup-content {
	margin: 0 !important;
	min-width: 220px;
}
.leaflet-popup-tip {
	background: var( --twlm-panel );
	border: 1px solid var( --twlm-border );
}
.leaflet-popup-close-button {
	color: #fff !important;
}

.twlm-popup {
	font-size: 13px;
	line-height: 1.5;
}
.twlm-popup-head {
	padding: 10px 12px;
	border-left: 3px solid #888;
	background: var( --twlm-panel-2 );
}
.twlm-popup-cat {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var( --twlm-text-dim );
	margin-bottom: 2px;
}
.twlm-popup-head strong {
	color: #fff;
	font-size: 14px;
}
.twlm-popup-server {
	padding: 6px 12px;
	background: rgba( 204, 0, 0, 0.1 );
	border-bottom: 1px solid var( --twlm-border );
	font-size: 11px;
}
.twlm-popup-desc {
	padding: 8px 12px;
	color: var( --twlm-text );
}
.twlm-popup-loot {
	padding: 8px 12px;
	border-top: 1px solid var( --twlm-border );
	font-size: 12px;
}
.twlm-popup-loot ul {
	margin: 4px 0 0 0;
	padding: 0 0 0 16px;
	color: var( --twlm-text-dim );
}
.twlm-popup-coords {
	padding: 6px 12px;
	border-top: 1px solid var( --twlm-border );
	background: var( --twlm-panel-2 );
	font-family: "Courier New", monospace;
	font-size: 11px;
	color: var( --twlm-text-dim );
}

/* ---------- Leaflet UI overrides ---------- */
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: var( --twlm-panel ) !important;
	color: #fff !important;
	border-bottom-color: var( --twlm-border ) !important;
}
.leaflet-bar a:hover { background-color: var( --twlm-panel-2 ) !important; }
.leaflet-control-attribution {
	background: rgba( 0, 0, 0, 0.6 ) !important;
	color: var( --twlm-text-dim ) !important;
}
.leaflet-control-attribution a { color: var( --twlm-accent ) !important; }

/* ---------- Errors ---------- */
.twlm-error {
	padding: 16px;
	background: var( --twlm-panel );
	border: 1px solid var( --twlm-accent );
	color: var( --twlm-accent-hi );
	border-radius: 4px;
}

/* ---------- Mobile ---------- */
@media ( max-width: 800px ) {
	.twlm-toggle-sidebar { display: inline-block; }
	.twlm-sidebar {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		z-index: 1100;
		transform: translateX( -100% );
		transition: transform 0.25s;
		box-shadow: 4px 0 12px rgba( 0, 0, 0, 0.6 );
	}
	.twlm-wrap.sidebar-open .twlm-sidebar {
		transform: translateX( 0 );
	}
	.twlm-body {
		position: relative;
	}
	.twlm-toolbar-right .twlm-search,
	.twlm-toolbar-right .twlm-server-filter {
		min-width: 0;
		flex: 1;
	}
}

/* ---------- Imported Meta Info ---------- */
.twlm-popup-import-meta {
	padding: 8px 12px;
	background: var( --twlm-panel-2 );
	border-bottom: 1px solid var( --twlm-border );
	font-size: 11px;
	color: var( --twlm-text-dim );
}
.twlm-popup-import-meta code {
	background: #000;
	padding: 2px 4px;
	border-radius: 2px;
	color: #fff;
}

/* ---------- Search Dropdown Suggestions ---------- */
.twlm-toolbar-right {
	position: relative;
}

.twlm-search-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 2000;
	background: var( --twlm-panel );
	border: 1px solid var( --twlm-border );
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
	max-height: 250px;
	overflow-y: auto;
	border-radius: 4px;
	margin-top: 5px;
	display: none;
}

.twlm-dropdown-item {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid var( --twlm-border );
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.15s;
}

.twlm-dropdown-item:hover {
	background: var( --twlm-panel-2 );
}

.twlm-dropdown-loading {
	padding: 10px;
	font-style: italic;
	font-size: 12px;
	color: var( --twlm-text-dim );
	text-align: center;
}

.twlm-search-badge {
	background: rgba(255,255,255,0.08);
	color: var( --twlm-text-dim );
	font-size: 10px;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 10px;
	border: 1px solid var( --twlm-border );
}

/* ---------- Premium Glassmorphism Modal ---------- */
.twlm-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 99999;
	display: none;
	justify-content: center;
	align-items: center;
	animation: twlmFadeIn 0.2s ease-out;
}

.twlm-modal-content {
	background: #111;
	border: 1px solid var( --twlm-border );
	border-radius: 8px;
	padding: 20px;
	width: 90%;
	max-width: 450px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.8);
	color: var( --twlm-text );
	position: relative;
	animation: twlmSlideUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.twlm-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
	color: var( --twlm-text-dim );
	transition: color 0.15s;
}

.twlm-modal-close:hover {
	color: #fff;
}

.twlm-modal-title {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid var( --twlm-border );
	padding-bottom: 10px;
}

.twlm-item-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.twlm-item-table td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

.twlm-item-table tr:nth-child(even) {
	background: rgba(255,255,255,0.02);
}

.twlm-item-table td strong {
	color: var( --twlm-text-dim );
}

@keyframes twlmFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes twlmSlideUp {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ---------- Map Tools Control & Toolbar ---------- */
.twlm-map-tools-control {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.twlm-map-tools-control a {
	font-size: 15px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	transition: background-color 0.15s, color 0.15s;
}
.twlm-map-tools-control a.twlm-tool-active {
	background-color: var( --twlm-accent ) !important;
	color: #fff !important;
}
.twlm-ruler-active .twlm-map {
	cursor: crosshair !important;
}
.twlm-pin-active .twlm-map {
	cursor: cell !important;
}

/* ---------- Ruler Tooltip ---------- */
.twlm-ruler-tooltip {
	background: rgba(0, 0, 0, 0.9) !important;
	border: 1px solid var( --twlm-border ) !important;
	color: #fff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	padding: 3px 6px !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
.twlm-ruler-tooltip::before {
	border-top-color: rgba(0, 0, 0, 0.9) !important;
}

/* ---------- Custom Pins Popup Styling ---------- */
.twlm-custom-pin-popup .twlm-popup-head {
	padding: 12px 14px 10px 14px;
}
.twlm-custom-pin-rename {
	background: var( --twlm-panel-2 ) !important;
	border: 1px solid var( --twlm-border ) !important;
	color: #fff !important;
	padding: 6px 10px !important;
	font-size: 13px !important;
	border-radius: 4px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: 6px !important;
	font-family: inherit !important;
}
.twlm-custom-pin-rename:focus {
	outline: none !important;
	border-color: var( --twlm-accent ) !important;
}
.twlm-custom-pin-delete {
	color: var( --twlm-accent-hi ) !important;
	text-decoration: none !important;
	font-weight: bold !important;
	font-size: 12px !important;
	transition: opacity 0.15s;
}
.twlm-custom-pin-delete:hover {
	opacity: 0.8 !important;
	text-decoration: underline !important;
}

/* ---------- Permanent Marker Tooltips ---------- */
.twlm-marker-tooltip {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-weight: bold !important;
	font-size: 13px !important;
	font-family: inherit !important;
	text-shadow: 
		-1px -1px 0 #000,  
		 1px -1px 0 #000,
		-1px  1px 0 #000,
		 1px  1px 0 #000,
		-2px  0px 2px #000,
		 2px  0px 2px #000,
		 0px -2px 2px #000,
		 0px  2px 2px #000;
	pointer-events: none !important;
}
.twlm-marker-tooltip::before {
	display: none !important;
}
.twlm-tooltip-trader {
	color: #ffd700 !important; /* Gold */
}
.twlm-tooltip-safezone {
	color: #00bcd4 !important; /* Cyan */
}
.twlm-tooltip-kos {
	color: #ff3333 !important; /* Red */
}
.twlm-tooltip-event_loc {
	color: #e91e63 !important; /* Pink */
}
.twlm-tooltip-spawn {
	color: #4caf50 !important; /* Green */
}
.twlm-tooltip-custom {
	color: #e040fb !important; /* Purple */
}
.twlm-tooltip-koth {
	color: #ff8f00 !important; /* Orange */
}
.twlm-tooltip-dna {
	color: #00e676 !important; /* Lime Green */
}
.twlm-tooltip-ai_patrol {
	color: #ff5252 !important; /* Light Red */
}
.twlm-tooltip-ai_roaming {
	color: #ff8a80 !important; /* Soft Red/Pink */
}
.twlm-tooltip-airdrop {
	color: #ffb300 !important; /* Amber */
}
.twlm-tooltip-cement_mixer {
	color: #78909c !important; /* Cement/Slate Grey */
}
.twlm-tooltip-nobuild {
	color: #e64a19 !important; /* Rust/Deep Orange */
}
.twlm-tooltip-blackmarket {
	color: #ff3d00 !important; /* Vibrant Red-Orange */
}
.twlm-tooltip-planks {
	color: #a1887f !important; /* Wood Brown */
}
.twlm-tooltip-gas {
	color: #afb42b !important; /* Toxic Olive/Green-Yellow */
}