/* Legend */
.platmap-legend {
  position:absolute;
  left:10px;
  bottom:10px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:6px 8px;
  display:flex;
  gap:10px;
  z-index:400;
}
.platmap-legend .sw {
  width:12px;
  height:12px;
  border:1px solid rgba(0,0,0,.2);
  display:inline-block;
  margin-right:4px;
}

/* Popup card wrapper */
.leaflet-popup-content-wrapper {
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  overflow:hidden;
  padding:0 !important;
  background: transparent !important;
}
.leaflet-popup-tip {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

/* Remove default close button look (we use custom one) */
.leaflet-container a.leaflet-popup-close-button { display:none; }

/* Also remove default Leaflet content spacing */
.leaflet-popup-content { margin:0 !important; padding:0 !important; }
.leaflet-popup-content > .platmap-popup { margin:0 !important; }

/* Popup content */
.platmap-popup {
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#111827;
  border-radius:12px;
  overflow:hidden;
}

/* Header with status background + close */
.platmap-popup .pm-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  font-weight:600;
  font-size:15px;
  color:#fff;
}
.pm-header.available { background:#15803d; }
.pm-header.pending   { background:#b45309; }
.pm-header.sold      { background:#b91c1c; }

.platmap-popup .pm-close {
  cursor:pointer;
  font-weight:400;
  font-size:18px;
  line-height:1;
  margin-left:10px;
  color:#fff;
  opacity:.9;
}
.platmap-popup .pm-close:hover { opacity:1; }

/* Body section */
.platmap-popup .pm-body {
  background:#f9fafb;
  padding:0;
  border-top:1px solid rgba(0,0,0,.05);
}

/* Grid layout for fields */
.platmap-popup .pm-grid {
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:4px 8px;
  align-items:center;
  padding:8px 12px;
}

.platmap-popup .pm-label { color:#6b7280; }
.platmap-popup .pm-value { color:#111827; }
.platmap-popup .pm-desc  { margin-top:8px; color:#374151; font-size:13px; padding:0 12px 10px 12px; }

.platmap-map { touch-action: none; }

/* swipe horizontally on small screens */
.platmap-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* keep cells on one line so table can grow wider than viewport */
.platmap-table th,
.platmap-table td{
  white-space: nowrap;
}

/* make sure DataTables' scroll body actually scrolls horizontally */
.dataTables_wrapper .dataTables_scrollBody{
  overflow-x: auto !important;
}



/* allow horizontal swipe/scroll on the plat table */
.platmap-table-wrap{
  overflow-x: auto;                /* wrapper can scroll */
  -webkit-overflow-scrolling: touch;
}

/* keep cells on one line so the table gets wider than the viewport */
.platmap-table th,
.platmap-table td{
  white-space: nowrap;
}

/* make sure the DataTables scroll body actually scrolls horizontally */
.dataTables_wrapper .dataTables_scrollBody{
  overflow-x: auto !important;
  overflow-y: hidden;              /* optional: no vertical scroll inside table body */
  -webkit-overflow-scrolling: touch;
}

/* let the table be as wide as it needs (by content), not capped at 100% */
.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollBody table{
  width: max-content !important;   /* key: expand to natural width so scrollX kicks in */
  min-width: 600px;                /* tweak as you like */
}

/* keep the wrapper itself full width */
.dataTables_wrapper .dataTables_scroll{
  width: 100% !important;
}