.fleet-map-page, .ais-map-shell { --ais-map-surface: var(--dpfm-white); }
html[data-theme="dark"] .fleet-map-page, html[data-theme="dark"] .ais-map-shell { --ais-map-surface: var(--dpfm-dark-surface); }
.fleet-map-page {
    max-height: calc(100dvh - var(--dpfm-topbar-height) - 4rem);
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: var(--dpfm-muted) var(--dpfm-background);
    padding-inline-end: 1rem;
}
.ais-map-heading, .ais-map-actions, .fleet-map-summary, .ais-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.ais-map-heading { justify-content: space-between; }
.fleet-map-summary { margin-block: 1rem; color: var(--dpfm-muted); }
.fleet-map-summary strong { color: var(--dpfm-text); }
.fleet-map-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: 1rem; margin-bottom: 1rem; }
.fleet-map-filters label { display: flex; flex-direction: column; gap: .4rem; }
.fleet-map-filters input, .fleet-map-filters select { width: 100%; min-width: 0; }
.fleet-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.fleet-map-main, .ais-map-shell { min-width: 0; }
.ais-map-shell { border: 1px solid var(--dpfm-border); border-radius: 10px; overflow: hidden; background: var(--ais-map-surface); }
.ais-map-actions { padding: .65rem; justify-content: space-between; }
.ais-map-canvas { height: clamp(320px, 55vh, 680px); width: 100%; z-index: 0; background: #bfdde4; }
.ais-map-note { padding: .6rem .8rem; margin: 0; color: var(--dpfm-muted); font-size: .8rem; }
.ais-map-shell > .dpfm-muted-message { padding-inline: .8rem; }
.ais-map-legend { gap: .4rem; font-size: .8rem; }
.ais-map-key { width: .65rem; height: .65rem; display: inline-block; border-radius: 50%; }
.ais-map-key.fresh, .ais-map-marker.fresh { background: #087e84; }
.ais-map-key.delayed, .ais-map-marker.delayed { background: #936000; }
.ais-map-key.old, .ais-map-marker.old { background: #b43e4d; }
.ais-map-marker { border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 5px #0008; text-align: center; color: white; }
.ais-map-ship { font-size: 12px; line-height: 20px; }
.ais-map-cluster { display: grid; place-items: center; background: #164e78; border: 4px solid #8bbdd6; border-radius: 50%; color: white; font: bold 14px system-ui; box-shadow: 0 1px 5px #0005; }
.ais-map-popup { max-width: 280px; overflow-wrap: anywhere; line-height: 1.55; }
.ais-map-popup strong { display: block; margin-bottom: .35rem; }
.ais-map-popup button { margin-top: .6rem; }
.ais-map-canvas .leaflet-popup-content-wrapper, .ais-map-canvas .leaflet-popup-tip, .ais-map-canvas .leaflet-tooltip {
    background: var(--ais-map-surface); color: var(--dpfm-text); border-color: var(--dpfm-border);
}
.ais-map-canvas .leaflet-control-zoom a { background: var(--ais-map-surface); color: var(--dpfm-text); }
.ais-map-canvas .leaflet-control-attribution { background: #fffffff0; color: #243746; font-size: 11px; }
.ais-map-canvas .leaflet-control-attribution a { color: #064d7b; }
.ais-map-label { font-weight: 600; }
.ais-map-tile-warning { background: #fff4cf; color: #402e00; padding: .5rem; border-radius: 5px; max-width: 240px; }
.fleet-map-sidebar { border: 1px solid var(--dpfm-border); border-radius: 10px; padding: .8rem; background: var(--ais-map-surface); }
.fleet-map-sidebar h2 { margin: 0 0 .7rem; font-size: 1rem; }
.fleet-map-results { max-height: 65vh; overflow-y: auto; scrollbar-color: var(--dpfm-muted) var(--dpfm-background); }
.fleet-map-result { display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: .75rem; border: 1px solid var(--dpfm-border); border-radius: 6px; margin-bottom: .5rem; text-align: left; background: var(--dpfm-background); color: var(--dpfm-text); cursor: pointer; font: inherit; }
.fleet-map-result span { font-size: .75rem; overflow-wrap: anywhere; }
.fleet-map-result:hover, .fleet-map-result.is-selected { border-color: var(--dpfm-blue); outline: 2px solid var(--dpfm-blue); outline-offset: -2px; }
.fleet-map-result:focus-visible, .ais-map-canvas:focus-visible { outline: 3px solid var(--dpfm-button-focus-ring); }
.fleet-map-detail { padding: 1rem; margin-top: 1rem; border: 1px solid var(--dpfm-border); border-radius: 10px; }
.fleet-map-detail h2 { font-size: 1.1rem; }
.fleet-map-attributions { display: grid; gap: .5rem; margin-top: 1rem; color: var(--dpfm-muted); font-size: .75rem; overflow-wrap: anywhere; }
.vessel-location > .ais-position { margin-top: 1rem; }
@media (max-width: 1000px) {
    .fleet-map-layout { grid-template-columns: minmax(0, 1fr); }
    .fleet-map-results { max-height: 20rem; }
}
@media (max-width: 600px) {
    .fleet-map-filters { grid-template-columns: minmax(0, 1fr); }
    .fleet-map-page { padding-inline-end: .4rem; }
    .ais-map-canvas { height: 360px; }
}