/* ===== Modern Dynmap UI (Dark + Sidebar) ===== */
:root{
  --bg: #0b1020;
  --panel: rgba(15, 23, 42, 0.82);
  --panel2: rgba(2, 6, 23, 0.65);
  --border: rgba(148, 163, 184, 0.16);
  --text: rgba(226, 232, 240, 0.92);
  --muted: rgba(148, 163, 184, 0.9);
  --accent: #22c55e;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 16px;
  --gap: 14px;
  --sidebarW: 320px;
  --topbarH: 56px;
  --blur: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --sidebarTopOffset: 20px;
}

html, body {
  height: 100%;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(74, 98, 216, 0.53), transparent 55%),
              radial-gradient(900px 700px at 90% 30%, rgba(74, 98, 216, 0.53), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: var(--font);
}

#map, #dynmap, #mcmap, #mapdiv {
  height: 100% !important;
}

/* ===== Injected modern UI ===== */
.dynui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.dynui__topbar{
  height: var(--topbarH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 12px;
  pointer-events: auto;
}

.dynui__brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}

.dynui__dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(26, 178, 138, 0.2);
}

.dynui__brand h1{
  font-size: 14px;
  line-height: 1;
  margin: 0;
  letter-spacing: .2px;
}
.dynui__brand p{
  font-size: 12px;
  line-height: 1;
  margin: 2px 0 0;
  color: var(--muted);
}

.dynui__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.dynbtn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height: 40px;
  padding: 0 12px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  backdrop-filter: blur(var(--blur));
  cursor:pointer;
  box-shadow: var(--shadow);
  user-select:none;
  font-size: 13px;
}
.dynbtn:hover{ border-color: rgba(148,163,184,.28); }
.dynbtn:active{ transform: translateY(1px); }

.dynbtn--accent{
  background: linear-gradient(180deg, rgba(74, 98, 216, 0.53), rgba(74, 98, 216, 0.53));
  border-color: rgba(74, 98, 216, 0.53);
}

.dynui__main{
  position: absolute;
  top: calc(var(--topbarH) + var(--gap) + var(--sidebarTopOffset)) !important;
  left: 0; right: 0; bottom: 0;
  display:flex;
  gap: var(--gap);
  padding: 12px !important; /* <- Force */
  pointer-events:none;
}

.dynui__sidebar {
  margin-top: 0 !important;
  width: var(--sidebarW);
  max-width: calc(100vw - 24px);
  pointer-events:auto;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  transition: transform .18s ease;
}

.dynui.is-collapsed .dynui__sidebar{
  transform: translateX(calc(-1 * (var(--sidebarW) + var(--gap))));
}

.dynui__sidebarHeader{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}

.dynui__search{
  width:100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}
.dynui__search::placeholder{ color: rgba(148,163,184,.65); }

.dynui__tabs{
  display:flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.dyntab{
  flex:1;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  color: var(--muted);
  cursor:pointer;
  font-size: 12px;
}
.dyntab.is-active{
  background: rgba(74, 98, 216, 0.53);
  border-color: rgba(74, 98, 216, 0.53);
  color: var(--text);
}

.dynui__content{
  padding: 12px 14px;
  overflow:auto;
  flex:1;
}

.dyncard{
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.35);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}
.dyncard h3{
  margin: 0 0 8px;
  font-size: 13px;
}
.dynline{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,.14);
  font-size: 12px;
}
.dynline:last-child{ border-bottom: 0; }
.dynmuted{ color: var(--muted); }

.dynlist{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.dynitem{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.35);
  cursor:pointer;
}
.dynitem:hover{ border-color: rgba(148,163,184,.24); }
.badge{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  color: var(--muted);
}

/* Toggle switch */
.dynswitch{
  position: relative;
  width: 42px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
}
.dynswitch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.dynswitch__track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(148,163,184,.20);
  border: 1px solid rgba(148,163,184,.22);
  transition: .15s ease;
}
.dynswitch__track::after{
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(226,232,240,.92);
  transition: .15s ease;
}
.dynswitch input:checked + .dynswitch__track{
  background: rgba(74, 98, 216, 0.53);
  border-color: rgba(74, 98, 216, 0.53);
}
.dynswitch input:checked + .dynswitch__track::after{
  transform: translateX(18px);
}

/* Mobile */
@media (max-width: 860px){
  :root{ --sidebarW: 92vw; }
  .dynui__main{ padding: 0 10px 10px; }
}

/* ===== Aggressively hide default Dynmap UI (fix hover sidebar + 1px chat strip) ===== */
.sidebar, .sidebar.pinned, .sidebar button, .sidebar * { display: none !important; }

.chat {
    display: none !important;
}

.messagelist {
    display:none !important;
}

#sidebar, #chat, #playerlist, #layers, #chatbox, #chatcontainer {
  display: none !important;
  height: 0 !important;
}

.sidebar, .chat, #chat, #sidebar, #chatbox, #chatcontainer {
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Leaflet controls: zoom/layers */
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-control-container .leaflet-control-zoom,
.leaflet-control-container .leaflet-control-layers {
  display: none !important;
  pointer-events: none !important;
}

/* If any overlay still catches hover on the right edge, disable pointer events for hidden controls */
.leaflet-control-container { pointer-events: none !important; }

/* Leaflet popup styling to match sidebar */
.leaflet-popup-content-wrapper{
  background: rgba(2, 6, 23, 0.70) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(14px) !important;
}

.leaflet-popup-tip{
  background: rgba(2, 6, 23, 0.70) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.leaflet-popup-content{
  margin: 12px 14px !important;
  color: rgba(226, 232, 240, 0.92) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: 13px !important;
}

.leaflet-popup-content a{
  color: rgba(74, 98, 216, 0.53) !important;
  text-decoration: none !important;
}
.leaflet-popup-content a:hover{
  text-decoration: underline !important;
}

/* Close button */
.leaflet-popup-close-button{
  color: rgba(226, 232, 240, 0.85) !important;
  opacity: 0.9 !important;
}
.leaflet-popup-close-button:hover{
  opacity: 1 !important;
}
/* Smooth animation for all Leaflet marker icons (Dynmap markers) */
/* Sidebar-style marker icon (32x32) */
.markerIcon32x32 {
  padding: 6px;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
  transform-origin: center;
}

.markerIcon32x32:hover {
  transform: scale(2.15);
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.51));
}