/* Styling for the SharkMap component. Leaflet builds its DOM at runtime, outside Blazor's scoped-CSS
   attributes, so these rules live in a plain stylesheet rather than a .razor.css file. */

.shark-map {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    z-index: 0; /* Keep tiles under MudBlazor overlays, drawers, and dialogs. */
}

.shark-map-picking {
    cursor: crosshair;
}

/* Simple coloured dot pin, generated as a divIcon so a new layer costs a colour rather than an asset. */
.shark-map-pin-wrapper {
    background: none;
    border: none;
}

.shark-map-pin {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.shark-map-popup {
    max-width: 240px;
}

.shark-map-popup-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
}

.shark-map-popup-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.shark-map-popup-body {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 6px;
}

.shark-map-popup-link {
    font-size: 0.85rem;
    font-weight: 500;
}

/* OpenStreetMap only publishes a light basemap. Rather than pay for a dark tile set, invert and
   re-rotate the hue so the tiles read as dark while roads/water keep roughly their real colours.
   Markers and controls sit in other panes and are left untouched. */
[data-theme="dark"] .shark-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

[data-theme="dark"] .shark-map .leaflet-popup-content-wrapper,
[data-theme="dark"] .shark-map .leaflet-popup-tip,
[data-theme="dark"] .shark-map .leaflet-control-layers,
[data-theme="dark"] .shark-map .leaflet-bar a {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

[data-theme="dark"] .shark-map .leaflet-control-attribution {
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--mud-palette-text-secondary);
}

[data-theme="dark"] .shark-map .leaflet-control-attribution a {
    color: var(--mud-palette-primary);
}