/* Frontend */
.map-anchor-wrap{
  width:100%;
  max-width:100%;
  position:relative;
  border:1px solid #ddd;
  background:#fff;
  overflow:hidden;
}
.map-anchor-canvas{ width:100%; height:100%; display:block; cursor:pointer; }
.map-anchor-tooltip{
  position:absolute; z-index:10;
  min-width:180px; max-width:260px;
  padding:10px 12px; border:1px solid #ccc; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  border-radius:10px; font-size:14px; line-height:1.35;
  pointer-events:none;
}
.map-anchor-error{ padding:10px 12px; border:1px solid #e2b; background:#fff5fb; }

/* Admin */
.mapa-admin-grid{ display:grid; grid-template-columns: 1fr; gap:16px; margin-top:12px; }
.mapa-card{ background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:14px; }
.mapa-span-2{ grid-column: auto; }
.mapa-row{ display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.mapa-row-split{ justify-content:space-between; }
.mapa-small{ color:#666; font-size:12px; }
.mapa-canvas-wrap{
  width:100%;
  height:520px;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
  background:#fafafa;
}
#mapaAdminCanvas{ width:100%; height:100%; display:block; }
.mapa-status{ color:#666; font-size:12px; }
.mapa-details{ margin-top:10px; }
/* Admin grid inputs look better */
#mapaTableGrid .mapa-cell { width: 100%; box-sizing: border-box; }
#mapaTableGrid textarea.mapa-cell { min-height: 52px; resize: vertical; }

/* Logo cell */
.mapa-logo-td { vertical-align: top; }
.mapa-logo-preview{
  width:50px;
  height:50px;
  object-fit:cover;
  border:1px solid #ddd;
  border-radius:6px;
  display:block;
  margin:0 0 6px 0;
}
.mapa-logo-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
/* FORCE admin preview size */
#mapaTableGrid img.mapa-logo-preview {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: cover !important;
}
/* ---------- Admin: FIX overlap + align logo buttons to the side ---------- */

#mapaTableGrid{
  table-layout: fixed !important;
  width:100% !important;
}

#mapaTableGrid th,
#mapaTableGrid td{
  vertical-align: top;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

/* lock column widths using colgroup-like behavior */
#mapaTableGrid th:nth-child(1), #mapaTableGrid td:nth-child(1){ width:80px; }
#mapaTableGrid th:nth-child(2), #mapaTableGrid td:nth-child(2){ width:160px; }
#mapaTableGrid th:nth-child(3), #mapaTableGrid td:nth-child(3){ width:320px; }  /* Info */
#mapaTableGrid th:nth-child(4), #mapaTableGrid td:nth-child(4){ width:180px; }  /* Logo */
#mapaTableGrid th:nth-child(5), #mapaTableGrid td:nth-child(5){ width:70px; }
#mapaTableGrid th:nth-child(6), #mapaTableGrid td:nth-child(6){ width:70px; }
#mapaTableGrid th:nth-child(7), #mapaTableGrid td:nth-child(7){ width:70px; }
#mapaTableGrid th:nth-child(8), #mapaTableGrid td:nth-child(8){ width:70px; }
#mapaTableGrid th:nth-child(9), #mapaTableGrid td:nth-child(9){ width:140px; }

/* inputs never exceed their cell */
#mapaTableGrid .mapa-cell,
#mapaTableGrid input.mapa-cell,
#mapaTableGrid textarea.mapa-cell{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:block !important;
}

/* Info textarea: stop it from pushing row height weirdly */
#mapaTableGrid textarea.mapa-cell{
  min-height:56px;
  resize: vertical;
}

/* Logo layout: image + buttons side-by-side */
.mapa-logo-wrap{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

#mapaTableGrid img.mapa-logo-preview{
  width:50px !important;
  height:50px !important;
  max-width:50px !important;
  max-height:50px !important;
  object-fit:cover !important;
  border:1px solid #ddd;
  border-radius:6px;
  flex:0 0 auto;
}

.mapa-logo-actions{
  display:flex;
  flex-direction:column; /* buttons stacked */
  gap:6px;
}

.mapa-logo-actions .button{
  white-space:nowrap;
}