:root{--bg:#071422;--panel:#0b1220;--accent:#60a5fa;--muted:#9ca3af;--border:#172029;--hover:#0f1724;--shadow:0 8px 30px rgba(2,6,23,0.6)}
html,body{height:100vh;margin:0;padding:0;background:var(--bg);color:#e6eef8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5}
.ui-overlay{position:fixed;pointer-events:auto;z-index:99990}
.wrap{display:grid;grid-template-columns:360px 1fr;height:100vh}
.panel{padding:20px;border-right:1px solid rgba(255,255,255,0.03);background:var(--panel);overflow:auto;box-shadow:var(--shadow)}
h1{margin:0 0 16px;color:var(--accent);font-size:20px;font-weight:600}
.muted{color:var(--muted);font-size:14px}
#map{position:fixed;left:0;right:0;top:56px;bottom:0;width:100%;height:calc(100vh - 56px);z-index:0}

/* Mobile responsive navbar */
/* Default: limit search width on large screens */
#searchContainer { max-width: 600px; }

/* When space is tight but buttons still fit - let search grow a bit more */
@media (max-width: 1100px) {
  #searchContainer { max-width: 450px; }
}

/* When buttons wrap to second row - expand search and center buttons */
@media (max-width: 900px) {
  #topBar h1 { font-size: 16px !important; }
  #searchContainer { max-width: none !important; flex: 1 1 100% !important; }
  #navButtons { flex-basis: 100% !important; justify-content: center !important; margin-left: 0 !important; }
}

/* Small tablets (portrait) and large phones - stack everything */
@media (max-width: 768px) {
  #topBar { flex-direction: column !important; align-items: stretch !important; padding: 8px 12px !important; }
  #topBar h1 { font-size: 15px !important; width: 100% !important; text-align: center !important; order: 1; }
  #searchContainer { width: 100% !important; max-width: 100% !important; flex: none !important; order: 2; }
  #navButtons { width: 100% !important; justify-content: center !important; flex: none !important; order: 3; }
  #topBar button { font-size: 13px !important; }
  #topBar input { font-size: 13px !important; }
}

/* Phones */
@media (max-width: 480px) {
  #topBar h1 { font-size: 14px !important; }
  #topBar button { font-size: 12px !important; min-height: 40px !important; padding: 0 10px !important; }
  #topBar input { min-height: 40px !important; font-size: 12px !important; }
  #topBar { gap: 6px !important; padding: 8px 10px !important; }
}
.search-row{display:flex;gap:8px;margin:8px 0}
input[type=text]{flex:1;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--muted);font-size:14px;transition:border-color 0.15s}
input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(96,165,250,0.08)}
button{padding:12px 16px;border-radius:8px;border:none;background:var(--accent);color:#071422;font-weight:600;cursor:pointer;transition:all 0.12s}
button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(2,6,23,0.6)}
button.primary{background:var(--accent);color:#071226;font-weight:700}
.pin-list{margin-top:12px}
.pin-item{padding:16px;border-radius:12px;border:1px solid var(--border);margin-bottom:12px;background:var(--panel);transition:all 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.pin-item:hover{background:var(--hover);border-color:#d1d5db;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.pin-title{font-weight:600;font-size:16px;margin-bottom:4px}
.pin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.small{padding:8px 12px;font-size:14px;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04);border-radius:6px;transition:all 0.12s}
.small:hover{background:rgba(255,255,255,0.02);color:#e6eef8}
.toast{position:fixed;right:18px;bottom:18px;background:rgba(255,255,255,0.06);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:none;z-index:1500;color:#e6eef8}
.footer{position:fixed;left:14px;bottom:14px;color:var(--muted);font-size:12px}
.help{font-size:13px;margin-top:8px;color:var(--muted)}

/* search suggestions dropdown */
.search-results{color:#e6eef8;max-height:320px;overflow:auto;padding:6px;}
.search-results .help{margin:0;padding:8px;border-radius:6px;background:transparent;color:var(--muted);}
.search-results .help:hover{background:rgba(255,255,255,0.02);color:#e6eef8}
textarea{width:100%;height:80px;background:rgba(255,255,255,0.02);color:#e6eef8;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;font-family:inherit}

/* Custom Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
}

.leaflet-popup-tip {
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: #9ca3af !important;
  font-size: 20px !important;
  padding: 4px 8px !important;
  width: auto !important;
  height: auto !important;
}

.leaflet-popup-close-button:hover {
  color: #e6eef8 !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 4px !important;
}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(96,165,250,0.06)}
.pin-btn{background:#f1f5f9;border:1px solid var(--border);color:#475569;padding:6px;border-radius:6px}

/* Settings & presets */
.settings-grid{display:flex;flex-direction:column;gap:8px}
.label{font-size:13px;color:var(--muted);margin-bottom:4px}
.select{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:#1e293b;font-size:14px}
.select:focus{outline:none;border-color:var(--accent)}
.preset-grid{display:flex;gap:8px;flex-wrap:wrap}
.preset-item{width:56px;height:56px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--panel);cursor:pointer;transition:border-color 0.2s}
.preset-item:hover{border-color:var(--accent)}
.preset-item.selected{border-color:var(--accent);background:#eff6ff}
.preset-item img{max-width:44px;max-height:44px}

/* Diagnostics overlay */
#diag{opacity:0.95;pointer-events:auto}

/* Ensure UI overlays are above the map and accept clicks */
.hub, .drawer, #openMenu, #diag, .tab-panel, .panel { z-index:1400; pointer-events:auto }
.drawer{z-index:1400}

/* Tailwind class overrides -> enforce dark mode colors for common utility classes used in templates */
.bg-white, .bg-gray-50, .bg-gray-100 { background-color: rgba(255,255,255,0.02) !important; }
.text-gray-900, .text-gray-800 { color: #e6eef8 !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: #9fb3c8 !important; }
.border-gray-200, .border-gray-300, .border-gray-100 { border-color: rgba(255,255,255,0.04) !important; }
.bg-blue-600, .bg-green-600, .bg-red-600 { color: #fff !important; }
.rounded-lg{border-radius:10px !important}
.p-4{padding:12px !important}

/* Buttons that used light bg should be dark-adapted */
.bg-gray-100 { background: rgba(255,255,255,0.02) !important; color: #e6eef8 !important; border:1px solid rgba(255,255,255,0.03) !important }
.bg-white { background: rgba(255,255,255,0.02) !important; }

/* Panels and modal internals */
.panel, .tab-panel, .drawer, .hub-card { background: var(--panel) !important; color: #e6eef8 !important }

/* Links/buttons contrast */
a, a:link, a:visited { color: var(--accent) }
.small, .btn-ghost { color: #e6eef8 !important; border-color: rgba(255,255,255,0.04) !important }

/* Ensure controls in locations modal inherit readable colors */
#locationsModal .edit-btn, #locationsModal .share-btn, #locationsModal .delete-btn { color: #071422 !important }

/* Make sure form labels are visible */
label, .label { color: #cfe6ff !important }

/* Force menus, dropdowns, popovers and modal panels to match navbar dark style */
.modal-content, .modal .modal-content, .drawer, .panel, .tab-panel, .hub-card, .dropdown-menu, .popover, .menu, .popover-wrapper {
	background: var(--panel) !important;
	color: #e6eef8 !important;
	border: 1px solid rgba(255,255,255,0.04) !important;
	box-shadow: 0 12px 30px rgba(2,6,23,0.6) !important;
}

/* Inputs, selects and textareas inside menus */
.modal-content input, .modal-content textarea, .modal-content select, .drawer input, .drawer textarea, .drawer select, .panel input, .panel textarea, .panel select {
	background: rgba(255,255,255,0.02) !important;
	color: #e6eef8 !important;
	border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Buttons in menus/modal should contrast and use accent or muted styles */
.modal-content button, .modal-content .small, .drawer button, .panel button, .hub-card button { background: transparent !important; color: #e6eef8 !important; border:1px solid rgba(255,255,255,0.04) !important }
.modal-content .btn-primary, .drawer .btn-primary, .panel .btn-primary { background: var(--accent) !important; color: #071422 !important; border:none }

/* Dropdown items / menu items readability */
.dropdown-menu a, .menu a, .popover a { color: #e6eef8 !important; background: transparent !important }
.dropdown-menu a:hover, .menu a:hover, .popover a:hover { background: rgba(255,255,255,0.03) !important }

/* Ensure any white badges/pills become subtle on dark background */
.badge, .chip { background: rgba(255,255,255,0.03) !important; color: #e6eef8 !important; border: 1px solid rgba(255,255,255,0.04) !important }

/* Draft panel */
#draftPanel{padding:10px;border-radius:8px;border:1px dashed var(--border);background:#f8fafc;font-size:13px;color:#64748b}
#draftControls{display:flex;flex-direction:column;gap:8px;margin-top:8px}
#draftControls input{padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:#1e293b}
#draftControls .actions{display:flex;gap:8px}

/* Improve legibility */
h1{font-size:20px}
.panel{padding:16px}
input[type=text], input[type=number], .select{font-size:14px;padding:9px}
button{font-size:14px}

/* Active pin highlight */
.pin-item.active{outline:2px solid rgba(245,158,11,0.6);background:rgba(245,158,11,0.06)}

/* Saved markers */
#savedList .pin-item{border-style:dashed}

/* Locations modal / pin list - dark mode overrides for readability */
/* Stronger high-contrast overrides for locations modal */
#locationsModal, #locationsModal * { color: #e6eef8 !important; }
#locationsList, #locationsModal .pin-item { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.04) !important; }
#locationsModal .pin-item { padding:12px !important; border-radius:10px !important; }
#locationsModal .pin-title, #locationsModal .font-semibold { color: #ffffff !important; font-weight:700 !important; }
#locationsModal .text-sm, #locationsModal .text-xs, #locationsModal .muted { color: #9fb3c8 !important; }

/* Action buttons in locations list */
.edit-btn, .share-btn, .delete-btn, .pin-actions .small {
	padding:8px 10px;border-radius:8px;border:none;font-weight:700;font-size:13px;cursor:pointer
}
.edit-btn{background:var(--accent);color:#071422}
.edit-btn:hover{filter:brightness(1.06)}
.share-btn{background:#10b981;color:#071422}
.share-btn:hover{filter:brightness(1.06)}
.delete-btn{background:#ef4444;color:#fff}
.delete-btn:hover{filter:brightness(0.98)}

/* Make checkboxes more visible on dark background */
.location-checkbox{width:18px;height:18px;background:transparent;border:2px solid rgba(255,255,255,0.08);border-radius:4px;margin-right:8px}
.location-checkbox:checked{background:var(--accent);border-color:var(--accent)}

/* Ensure small helper texts are readable */
.help, .muted, .pin-actions .muted{color:#9fb3c8}

/* Top bar input high-contrast */
#topBar input#qTop { color: #e6eef8 !important; background: rgba(255,255,255,0.02) !important; border:1px solid rgba(255,255,255,0.04) !important }

/* Center hub (entry) */
.hub{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;pointer-events:auto;z-index:1200}
.hub-card{background:linear-gradient(180deg,rgba(3,7,18,0.8),rgba(6,10,20,0.8));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:min(860px,92%);text-align:center}
.hub-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}
.hub-saved{margin-top:12px}

/* Bottom drawer */
.drawer{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--panel);border-top:1px solid rgba(255,255,255,0.03);transition:height 0.3s ease,transform 0.3s ease;padding:12px 16px;box-shadow:0 -8px 24px rgba(2,6,23,0.6);border-radius:16px 16px 0 0}
.drawer.open{height:75vh;max-height:650px}
.drawer.closed{height:72px}
.drawer-handle{display:flex;justify-content:center;align-items:center;color:var(--muted);cursor:pointer;font-weight:600;font-size:16px}
.drawer-tabs{display:flex;gap:12px;margin-top:8px}
.drawer .tab{padding:10px 16px;border-radius:8px;background:var(--hover);border:1px solid var(--border);color:#374151;font-weight:500;transition:all 0.2s}
.drawer .tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.drawer-content{max-height:calc(75vh - 100px);overflow:auto;padding-top:12px}
.tab-panel{padding:6px 0}

@media(max-width:800px){ .hub-card{width:92%} .drawer.open{height:80vh} }
 
/* Embed modal */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;z-index:1700}
.modal.show{display:flex}
.modal-backdrop{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(2,6,23,0.6)}
.modal-content{position:relative;background:var(--panel);padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,0.03);width:min(550px,90%);max-width:550px;box-shadow:0 20px 40px rgba(2,6,23,0.6)}

/* Allow welcome modal to be wider and let its inner card control padding */
#welcomeModal .modal-content{width:min(960px,96%);max-width:960px;padding:0;background:transparent;border:none;box-shadow:none}
#welcomeModal .welcome-card{margin:12px}
.modal-header{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.modal-header strong{font-size:20px;color:#1f2937;font-weight:600}
.modal-body input[type=text], .modal-body input[type=number]{width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:#1f2937;margin-bottom:12px;font-size:14px}
.modal-body input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.modal-body textarea{background:var(--panel);color:#1e293b;border:1px solid var(--border);padding:10px;border-radius:8px;margin-top:8px}
.modal .small{background:#f1f5f9;border:1px solid var(--border);color:#475569;padding:8px 12px;border-radius:6px}
.modal .small:hover{background:#e2e8f0}