/* Basic UI */
:root { color-scheme: light; }
.dark :root { color-scheme: dark; }

.card{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  position: relative;
  z-index: 10;
}
.dark .card{
  background: rgba(2,6,23,.55);
  border-color: rgba(30,41,59,.8);
}

.btn-ghost{
  height: 40px;
  width: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.7);
}
.dark .btn-ghost{
  border-color: rgba(30,41,59,.8);
  background: rgba(2,6,23,.35);
}
.btn-primary{
  height: 44px;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg,#3b82f6,#2563eb);
  border: 1px solid rgba(59,130,246,.35);
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.btn-soft{
  height: 44px;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 800;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.8);
}
.dark .btn-soft{
  border-color: rgba(30,41,59,.8);
  background: rgba(2,6,23,.35);
  color: #e2e8f0;
}

.input-wrap{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 12px;
}
.dark .input-wrap{
  border-color: rgba(30,41,59,.8);
  background: rgba(2,6,23,.35);
}
.input-wrap i{ font-size: 14px; opacity:.7; }
.input-wrap input, .input-wrap select{
  width: 100%;
  height: 42px;
  outline: none;
  background: transparent;
  font-weight: 600;
  color: inherit;
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(100,116,139,1);
  user-select:none;
}
.dark .toggle{ color: rgba(148,163,184,1); }
.toggle input{ width: 16px; height: 16px; }

/* Map layering: ensure details panel NEVER goes behind map */
#map { position: relative; z-index: 10; }
.leaflet-container { background: #0b1220; }

/* Loading overlay */
.map-loading{
  position:absolute;
  inset: 0;
  z-index: 30;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  background: rgba(2,6,23,.55);
  color: white;
  backdrop-filter: blur(6px);
}
.spinner{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.95);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Right panel content */
.empty-state{
  height: 100%;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:4px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(248,250,252,.9);
}
.dark .badge{
  border-color: rgba(30,41,59,.8);
  background: rgba(2,6,23,.35);
}
.badge i{ opacity:.75; }

/* Toast */
.toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  min-width: 220px;
  max-width: 360px;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 20px 40px rgba(2,6,23,.25);
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.92);
}
.dark .toast{
  border-color: rgba(30,41,59,.8);
  background: rgba(2,6,23,.75);
}

/* Mobile: panel should stay above map */
@media (max-width: 1024px){
  /* nothing special needed, already separate grid rows */
}

#rz-confirm.flex .rz-pop{
  opacity: 1;
  transform: scale(1);
}