/* A vektoros (MapLibre) térképek megjelenése.

   A MapLibre saját CSS-e (maplibre-gl.css) adja a működést; ez a fájl a Nautech-arculatot teszi rá,
   ugyanazokból a design-tokenekből, amikből a kártyák és a listák élnek. A cél az, hogy a térkép
   popupja és kontrolljai NE váljanak el a felület többi részétől.

   A `leaflet-chrome.css` érintetlen marad: az a raszteres fallback térképé, ami WebGL2 hiányában
   továbbra is használatban van. */

/* ===== Popup ===== */

.maplibregl-popup-content {
    padding: 0;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--elev-hover);
    font-family: var(--font-family);
    color: var(--text-clr);
    overflow: hidden;
}

/* A nyilat is a kártya háttere és kerete adja, különben fehér csőrrel lógna a sötét popup alatt. */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--list-bg);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--list-bg);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--list-bg);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--list-bg);
}

.maplibregl-popup-close-button {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--muted-clr);
    background: transparent;
    border-radius: 8px;
}

.maplibregl-popup-close-button:hover,
.maplibregl-popup-close-button:focus-visible {
    color: var(--text-clr);
    background: color-mix(in srgb, var(--primary-clr) 12%, transparent);
}

.nautech-map-popup {
    display: grid;
    gap: 0.15rem;
    /* A jobb oldali térköz a bezáró gombot kerüli ki: az abszolút pozicionált ×
       egyébként ráült az első sor végére (mérve: a "(UTC)" alá csúszott). */
    padding: 0.7rem 2rem 0.7rem 0.9rem;
    font-size: 0.82rem;

    /* Hosszú lista (sok mező) ne nőjön ki a képernyőből. */
    max-height: 60dvh;
    overflow-y: auto;
}

/* A flotta-popup címsora: a hajó neve. A mezők FÖLÉ kerül, mert a flottában ez az elsődleges
   azonosító, nem egy a mérések közül. */
.nautech-map-popup-title {
    margin-bottom: 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: var(--border-thin);
    font-weight: 600;
}

.nautech-map-popup-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.1rem 0.6rem;
    align-items: baseline;
}

.nautech-map-popup-key {
    color: var(--muted-clr);
    white-space: nowrap;
}

.nautech-map-popup-key::after {
    content: ':';
}

.nautech-map-popup-value {
    /* A koordináta és az időbélyeg számjegyei így nem ugrálnak soronként. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ===== Kontrollok ===== */

.maplibregl-ctrl-group {
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: 10px;
    box-shadow: var(--elev-rest);
    overflow: hidden;
}

.maplibregl-ctrl-group button + button {
    border-top: var(--border-thin);
}

.maplibregl-ctrl-group button:hover {
    background: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

/* A MapLibre a gomb-ikonokat sötét SVG-vel rajzolja; sötét témán ki kell fordítani, különben
   fekete ikon ül fekete gombon. Ugyanaz a megfontolás, mint a Leaflet-es kontrolloknál. */
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
:root[data-theme="night"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    filter: invert(1) brightness(1.6);
}

/* Scale bar drawn as a ruler, not a box: the label sits above a segment closed at both ends, and
   the segment spans exactly the width MapLibre measures. No plate behind it, so the contrast comes
   from a shadow instead -- the bar has to stay readable over sea, land and hillshade alike. */
.maplibregl-ctrl-scale {
    background: none;
    border: none;
    color: var(--text-clr);
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    /* No horizontal padding: MapLibre sets the width inline, and the ruler must match it. */
    padding: 0 0 7px;
    position: relative;
    text-align: center;
    text-shadow: 0 0 3px var(--list-bg), 0 1px 2px var(--list-bg);
}

.maplibregl-ctrl-scale::after {
    border: 2px solid var(--text-clr);
    border-top: none;
    bottom: 0;
    content: "";
    filter: drop-shadow(0 0 2px var(--list-bg));
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
}

/* A tömör állapotra a könyvtár FEHÉR pirulát rajzol (`background-color:#fff; color:#000`), és a
   szabálya két osztályt köt — az egy osztályos sajátunk gyengébb volt nála, ezért maradt világító
   folt a sötét térkép sarkában. A forrásmegjelölést jogilag KELL látni, tehát a szöveg színe sem
   esztétikai kérdés. */
.maplibregl-ctrl.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact {
    background: color-mix(in srgb, var(--list-bg) 82%, transparent);
    color: var(--muted-clr);
    font-size: 0.68rem;
}

.maplibregl-ctrl-attrib.maplibregl-compact {
    border: var(--border-thin);
    border-radius: 13px;
    padding: 2px 26px 2px 2px;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
    padding: 2px 28px 2px 9px;
}

.maplibregl-ctrl-attrib a {
    color: var(--muted-clr);
}

/* Az „i” gomb beégetett, TÖMÖR fehér korongot hoz magával, sötét témán pedig ugyanaz az ikon
   fekete korongként tűnne el. Ezért nem képként, hanem MASZKKÉNT rajzoljuk: a festék a
   `--muted-clr`, tehát a gomb ugyanúgy követi a témát, mint a többi kontroll, és nem kell két
   külön ikon a világos és a sötét változathoz. */
.maplibregl-ctrl-attrib-button {
    background-image: none;
    background-color: var(--muted-clr);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 1.4a5.6 5.6 0 1 1 0 11.2 5.6 5.6 0 0 1 0-11.2'/%3E%3Ccircle cx='10' cy='6.9' r='1.05'/%3E%3Crect x='9.1' y='8.9' width='1.8' height='5.2' rx='.9'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 1.4a5.6 5.6 0 1 1 0 11.2 5.6 5.6 0 0 1 0-11.2'/%3E%3Ccircle cx='10' cy='6.9' r='1.05'/%3E%3Crect x='9.1' y='8.9' width='1.8' height='5.2' rx='.9'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    opacity: 0.85;
}

.maplibregl-ctrl-attrib-button:hover {
    background-color: var(--text-clr);
    opacity: 1;
}

/* A vízjel a csempéken ül, ezért nem kap hátteret; a `pointer-events: none` azért kell, hogy a
   logó ne fogja el a panolást a jobb alsó sarokban. */
.nautech-map-watermark {
    margin: 0 8px 6px 0;
    opacity: 0.82;
    pointer-events: none;
}

/* Nyitott réteg-panel mellett a vízjel eltűnik — DE CSAK HA A PANEL TÉNYLEG RÁLÓG. Az osztályt
   a LayerControl méréssel teszi fel (lásd #syncWatermark): kártya-méretű térképen a panel a jobb
   alsó sarokig ér (mérve egy 290x385-ösön), egy flotta-térképen viszont meg sem közelíti. */
.nautech-map--layers-open .nautech-map-watermark {
    display: none;
}

/* ===== Réteg-kapcsoló ===== */

.nautech-map-layers {
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: 10px;
    box-shadow: var(--elev-rest);
    font-family: var(--font-family);
    font-size: 0.78rem;
    color: var(--text-clr);
    overflow: hidden;
}

.nautech-map-layers > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.nautech-map-layers > button:hover {
    background: color-mix(in srgb, var(--primary-clr) 10%, var(--list-bg));
}

.nautech-map-layers-panel {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    min-width: 12rem;

    /* A felső korlátot a kontroll méri be a térkép aljához; ez csak a görgetést engedélyezi
       hozzá, hogy a panel a kis kártyán se lógjon rá a vízjelre és a forrásmegjelölésre.
       A `border-box` nem részletkérdés: nélküle a belső térköz a mért korláton FELÜL jön, és a
       panel megint kilóg (mérve: 300 px-es kártyán 306 px-ig ért). */
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nautech-map-layers-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.nautech-map-layers-panel input[type="checkbox"] {
    accent-color: var(--primary-clr);
    margin: 0;
}

/* A `[hidden]` a böngésző alap-stíluslapjában `display: none`, de az OSZTÁLY-szelektorunk
   erősebb nála, tehát a becsukott panel nyitva maradt. Mérve: `panel.hidden === true`, a computed
   display mégis `grid`. */
.nautech-map-layers-panel[hidden] {
    display: none;
}

.nautech-map-layers-panel hr {
    margin: 0.15rem 0;
    border: 0;
    border-top: var(--border-thin);
}

/* A térkép-vászon a konténer háttérszínét mutatja ott, ahol a döntött nézetben a terep-háló széle
   nem ér el a horizontig. Enélkül sötét témán fekete csík jelenik meg a horizont alatt. */
.maplibregl-map {
    font-family: var(--font-family);
    background-color: var(--list-bg);
}