/* Styles for Leaflet's own map marker popup chrome (the white bubble and
   its pointer/tail). The actual CONTENT inside a popup -- the
   ".popup-table" built by popupHtml() in app.js -- is styled separately in
   styles.css's "── Popup ──" section, not here. This file only touches
   Leaflet's wrapper elements and the one custom link button inside them. */

/* Use the same bright surface colors as the rest of DataHub. */
.leaflet-popup-content-wrapper {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    /* Leaflet's default wrapper has its own padding/rounding -- overridden
       below so the ".popup-table" content (styled in styles.css) controls
       its own spacing instead of fighting with Leaflet's defaults. */
    padding: 0;
    overflow: hidden;         /* clips the table's corners to this wrapper's border-radius */
    border-radius: 6px;
}

/* Leaflet renders the pointer separately from the popup wrapper. */
.leaflet-popup-tip {
    background: #ffffff;
}

.leaflet-popup-content {
    /* !important is needed here because Leaflet's own built-in stylesheet
       sets margin/padding on this exact class with fairly high specificity
       -- a normal override wouldn't reliably win against it. */
    margin: 0 !important;
    padding: 0 !important;
}

/* Allow long values (URLs, emails) to break rather than clip. */
.leaflet-popup-content td {
    word-break: break-word;
}

/* The "View Data Summary →" link/button shown at the bottom of every
   marker popup (see popupHtml() in app.js). */
.popup-summary-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;              /* DataHub blue text */
    text-decoration: none;        /* it's a link, but styled as a button, so no underline by default */
    padding: 4px 10px;
    border: 1px solid #2563eb;
    border-radius: 4px;
    background: #fff;
}
.popup-summary-link:hover {
    /* Inverts to a solid blue button on hover -- background/text swap places with the default state above. */
    background: #2563eb;
    color: #fff;
}