/* Database -> Maps : интерактивная карта спавнов (Leaflet) — в общей теме db.css */
.db-maps { padding: 0; }
.maps-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:var(--s-5); }

/* ---- кастомный селектор карты ---- */
.ms { position:relative; min-width:230px; }
.ms-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border:none; border-radius:var(--r-sm); cursor:pointer;
  background:var(--field); color:var(--txt); font-size:var(--t-body); font-weight:var(--w-med);
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--t-fast), background var(--t-fast); }
.ms-btn:hover { background:var(--field-hi); box-shadow:inset 0 0 0 1px var(--line-strong); }
.ms-btn i { color:var(--soft); font-size:12px; transition:transform var(--t-fast) var(--ease); }
.ms.open .ms-btn { box-shadow:inset 0 0 0 1px var(--maps-1), 0 0 0 3px rgba(34,211,138,.18); }
.ms.open .ms-btn i { transform:rotate(180deg); color:var(--maps-1); }
.ms-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1200;
  background:var(--surf-3); border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:var(--e-3); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast); }
.ms.open .ms-panel { opacity:1; visibility:visible; transform:none; }
.ms-list { list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto; }
.ms-list li { padding:9px 12px; border-radius:var(--r-xs); cursor:pointer; color:var(--txt-2);
  font-size:var(--t-sm); transition:background var(--t-fast), color var(--t-fast); }
.ms-list li:hover { background:rgba(255,255,255,.07); color:#fff; }
.ms-list li.sel { background:linear-gradient(135deg,var(--maps-1),var(--maps-2)); color:var(--ink); font-weight:var(--w-bold); }

.maps-search { flex:1; min-width:160px; padding:11px 14px; border:none; border-radius:var(--r-sm);
  background:var(--field); color:var(--txt); font-size:var(--t-body);
  box-shadow:inset 0 0 0 1px var(--line); outline:none; transition:box-shadow var(--t-fast), background var(--t-fast); }
.maps-search:hover { background:var(--field-hi); box-shadow:inset 0 0 0 1px var(--line-strong); }
.maps-search:focus { background:var(--field-hi); box-shadow:inset 0 0 0 1px var(--maps-1), 0 0 0 3px rgba(34,211,138,.2); }
.maps-hint { color:var(--soft); font-size:var(--t-sm); }

/* ---- карта ---- */
.maps-layout { display:flex; gap:var(--s-5); align-items:flex-start; }
.maps-viewport { flex:1; height:660px; background:#0a1018; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--e-2); position:relative; }
.leaflet-container { background:#0a1018; border-radius:var(--r-lg); font:inherit; }
.database-main .leaflet-bar a, .database-main .leaflet-control-zoom a { background:var(--surf-3) !important; color:var(--txt) !important; border-color:var(--line) !important; }
.database-main .leaflet-bar a:hover { background:var(--surf-2) !important; color:#fff !important; }

/* координаты курсора */
.maps-coord { position:absolute; top:12px; right:12px; z-index:1000; pointer-events:none;
  background:rgba(13,20,34,.88); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:7px 12px; box-shadow:var(--e-2); backdrop-filter:blur(6px); text-align:right; line-height:1.25; }
.maps-coord span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--soft); }
.maps-coord b { display:block; font-size:14px; font-weight:var(--w-bold); color:#fff; font-variant-numeric:tabular-nums; }

/* попап */
.leaflet-popup-content-wrapper { background:var(--surf-3); color:var(--txt); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--e-3); backdrop-filter:blur(14px); }
.leaflet-popup-tip { background:var(--surf-3); }
.mk-pop { display:flex; gap:10px; align-items:center; }
.mk-pop img { width:44px; height:44px; object-fit:contain; flex:none; border-radius:8px; padding:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px var(--line); }
.mk-pop b { color:#fff; } .mk-pop span { color:var(--soft); font-size:12px; }

/* ---- сайдбар: вкладки + списки ---- */
.maps-side { width:300px; flex:none; background:var(--surf-1); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--r-lg); max-height:660px; display:flex; flex-direction:column;
  box-shadow:var(--e-2),var(--inset-top); overflow:hidden; }
.maps-tabs { display:flex; gap:4px; padding:8px; background:var(--surf-head); border-bottom:1px solid var(--line); }
.maps-tab { flex:1; padding:9px; border:none; border-radius:var(--r-sm); background:transparent; cursor:pointer;
  color:var(--muted); font-weight:var(--w-bold); font-size:var(--t-sm); transition:background var(--t-fast), color var(--t-fast); }
.maps-tab span { color:var(--maps-1); }
.maps-tab:hover { color:#fff; }
.maps-tab.is-active { background:rgba(34,211,138,.16); color:#fff; }
.maps-moblist { list-style:none; margin:0; padding:8px; overflow-y:auto; }
.maps-moblist li { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-xs);
  color:var(--txt-2); font-size:var(--t-sm); cursor:pointer; transition:background var(--t-fast), color var(--t-fast); }
.maps-moblist li:hover { background:rgba(34,211,138,.12); color:#fff; }
.maps-moblist li.active { background:rgba(34,211,138,.2); color:#fff; box-shadow:inset 3px 0 0 var(--maps-1); }
.maps-moblist li img { width:26px; height:26px; flex:none; object-fit:contain; border-radius:6px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line); padding:2px; }
.maps-moblist li .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--w-med); }
.maps-moblist li .lv { color:#ffd33d; font-size:11px; font-weight:var(--w-bold); white-space:nowrap; }
.maps-moblist li .ct { color:var(--soft); font-size:12px; font-variant-numeric:tabular-nums; min-width:30px; text-align:right; }
.maps-moblist li .npcdot { width:11px; height:11px; flex:none; border-radius:50%; background:#4aa3ff; box-shadow:0 0 0 2px rgba(74,163,255,.25); }

@media (max-width: 992px){
  .maps-layout { flex-direction:column; }
  .maps-side { width:100%; max-height:300px; }
  .maps-viewport { width:100%; height:440px; }
}