/**
 * ChurchCRM Map Display Styles
 *
 * Custom styles for Google Maps integration and map legend.
 * Component-specific - no Bootstrap duplicates.
 */

/* Map legend — prefer Tabler card look while keeping compatibility with
   legacy #maplegend id. Use .map-legend for new markup. */
.map-legend,
#maplegend {
  background-color: var(--tblr-bg, #fff);
  color: var(--tblr-body-color, #212529);
  padding: 0.5rem; /* use small padding similar to .p-2 */
  margin: 0.25rem;
  border: 1px solid var(--tblr-border-color, #dee2e6);
  border-radius: var(--tblr-border-radius, 0.375rem);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  opacity: 0.95;

  h4 { margin-top: 0; }

  img { vertical-align: middle; }
}

.map-div {
  height: 750px;
  margin: 2px;
}

.map-legend {
  .legenditem {
    padding: 0.25rem 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.25rem;
    /* prefer subtle border instead of heavy box-shadow */
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .legendbox {
    margin: 0.5rem 0.25rem 0 0.25rem;
  }

  .legenditemtext {
    display: block;
    overflow: hidden;
  }

  img.legendicon {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
  }
}

/* Use responsive utilities in markup where possible; keep sensible fallbacks */
@media (max-width: 600px) {
  .map-div { height: 500px; }
}
