/* Mapa portów (public/mapa-portow.html) - status dostępności miejsc we wszystkich marinach na żywej mapie
   (Leaflet + kafelki CARTO, patrz portsMap.js) z prawdziwymi współrzędnymi geograficznymi każdego portu. */

/* --danger/--success/--warning dziedziczą teraz z style.css (ładowany wcześniej, patrz <link> w mapa-portow.html)
   - kiedyś nadpisywane tu na sztywno starą, sprzed-morskiej-palety wersją, co rozjeżdżało kolory pinezek z resztą
   strony. --disabled zostaje lokalnie (style.css go nie definiuje) - jeden, niezależny od motywu odcień szarości
   z lekkim błękitnym odcieniem (pasuje do linii głębokości na mapie), czytelny zarówno na jasnym papierze, jak
   i na niemal czarnym tle "mostka nocą" (ten sam wzorzec co --danger/--success/--warning w style.css). */
:root {
    --disabled: #7d92a0;
}

.hidden { display: none !important; }

/* Ukrywa element wizualnie, ale zostawia go dla czytników ekranu/SEO (np. h1#page-title niżej) - inaczej
   niż display:none, które usunęłoby go też z drzewa dostępności. Standardowy wzorzec "sr-only". */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ta strona celowo NIE ma pełnego paska nagłówka (.admin-hero, jak reszta panelu bosmana/admina) - tylko
   link powrotu i przełączniki PL/EN/motywu jako małe, pływające przyciski (.ports-map-topbar niżej). Pełny
   nagłówek z dekoracyjną linijką/falą (myślany pod jednolite tło) obok żywej, kolorowej mapy pod spodem na
   desktopie robił zbyt dużo konkurujących ze sobą tekstur. Na desktopie mapa (patrz #ports-live-map niżej)
   jest teraz "position: fixed" i sama wypełnia CAŁY ekran bez marginesów, jak tło strony - ta karta już nie
   hostuje mapy w normalnym przepływie, tylko "pływa" NAD nią (position: relative + z-index), z przyciskami/
   legendą jako osobnymi, nieprzezroczystymi panelami (inaczej byłyby nieczytelne na dowolnych kafelkach mapy
   pod spodem). Wymaga <body class="body-full-bleed"> (patrz style.css) - bez tego body nadal wyśrodkowuje i
   dopełnia kartę, więc nie dałoby się dobić mapą do prawdziwych krawędzi ekranu. */
.ports-map-container {
    max-width: 100%;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 24px;
    overflow: visible;
    position: relative;
    z-index: 1;
    /* Karta sama jest teraz "dziurawa" (poza pływającymi przyciskami/legendą to tylko pusta przestrzeń
       nad mapą) - pointer-events: none przepuszcza kliknięcia/przeciąganie do mapy pod spodem wszędzie
       poza realnymi dziećmi, które same odzyskują klikalność niżej. */
    pointer-events: none;
}
.ports-map-container > * {
    pointer-events: auto;
}
.ports-map-container::before {
    display: none;
}

/* Logo mMarina - ukryte na desktopie (patrz komentarz przy .ports-map-container wyżej o świadomym braku
   pełnego nagłówka tam), pokazuje się wyśrodkowane nad mapą TYLKO na telefonie (patrz media query niżej),
   tak samo jak logo na marina.html. */
.ports-map-container > .brandmark { display: none; }

.ports-map-topbar {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    /* Bez tego pusty odstęp MIĘDZY dziećmi (np. przed .ports-map-controls, dosuniętym w prawo przez
       margin-left: auto niżej) i tak przechwytywałby kliknięcia jako część tego elementu (jest bezpośrednim
       dzieckiem .ports-map-container, patrz "> *" niżej włączające pointer-events z powrotem) - blokowałoby
       to np. popup Leaflet, który akurat wyrenderuje się w tej pustej przestrzeni nad mapą. Sam pasek jest
       więc "przezroczysty" dla kliknięć, a jego DZIECI (rzeczywiste przyciski/legenda) same odzyskują
       klikalność niżej. */
    pointer-events: none;
}
.ports-map-topbar > * { pointer-events: auto; }
/* Link powrotu i przełączniki język/motyw to jedna, spójna grupa "sterowania stroną" (jak na desktopie,
   gdzie zostają razem po lewej/prawej krawędzi) - legenda to osobna, czysto informacyjna rzecz, więc na
   desktopie i tak naturalnie ląduje między nimi w kolejności DOM (bez dodatkowego zagnieżdżania w osobny
   div). margin-left: auto zamiast justify-content: space-between na całym pasku - dosuwa TYLKO ostatni
   element (.ports-map-controls) do prawej krawędzi, zamiast rozpychać wszystkie trzy dzieci równomiernie. */
.ports-map-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; pointer-events: none; }
.ports-map-controls > * { pointer-events: auto; }
@media (max-width: 600px) {
    /* Na telefonie link powrotu i przełączniki mają być razem w jednym, górnym rzędzie (lewo/prawo), a
       legenda - jako sama informacja, nie sterowanie - osobno pod nimi, na całą szerokość (flex-basis: 100%
       wymusza złamanie wiersza niezależnie od tego, ile miejsca akurat zostało). order zmienia tylko
       KOLEJNOŚĆ WIZUALNĄ (DOM/kolejność w czytnikach ekranu zostaje bez zmian - link, potem legenda, potem
       przełączniki - co i tak ma sens: najpierw nawigacja, potem informacja o mapie, na końcu ustawienia
       języka/motywu). */
    .ports-map-back-link { order: 0; }
    .ports-map-controls { order: 1; }
    .ports-map-legend { order: 2; flex-basis: 100%; }

    .ports-map-container > .brandmark {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 14px;
    }
}
/* Jasny/ciemny w zależności od motywu (var(--surface)/var(--border), nie stałe ciemne "szkło") - tłem bywa
   dowolny, czasem jasny fragment mapy w obu motywach, więc kolor musi nadążać za motywem, nie za tłem. */
.ports-map-back-link {
    display: inline-flex;
    align-items: center;
    /* width/margin-top - .ports-map-pill jest na <button>, więc bez tego globalne button{} (style.css:
       width: 100%; margin-top: 10px, myślane pod pełnoszerokie przyciski formularzy) rozciągało pigułkę
       PL/EN na całą szerokość rzędu i zsuwało ją w dół zamiast wyśrodkować w linii z resztą przycisków. */
    width: auto;
    margin: 0;
    gap: 6px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .ports-map-back-link:hover { border-color: var(--brass); color: var(--brass-deep); }
}
@media (max-width: 600px) {
    .ports-map-container { padding: 14px; }
    .ports-map-topbar { margin-bottom: 10px; }
    .ports-map-back-link { padding: 7px 14px; font-size: 12.5px; }
}

.ports-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    font-size: 13.5px;
    color: var(--text-muted);
    /* Tak samo jak .admin-hero wyżej - samodzielny, nieprzezroczysty panel (na desktopie legenda "pływa"
       bezpośrednio nad mapą, więc bez własnego tła byłaby nieczytelna na dowolnych kafelkach pod spodem).
       Bez własnego marginesu - to element w .ports-map-topbar, odstęp daje gap na rodzicu. */
    width: fit-content;
    background: var(--surface);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
@media (max-width: 600px) {
    /* Ciaśniej upakowana, mniejsza legenda na telefonie - dokłada się do tej samej oszczędności miejsca
       nad mapą co skompresowany nagłówek wyżej. Na telefonie mapa jest z powrotem w normalnym przepływie
       (nie pod spodem), więc legenda nie musi być własną "pływającą" kartą - płasko, jak reszta strony. */
    .ports-map-legend { gap: 8px 14px; font-size: 12px; width: auto; background: transparent; padding: 0; border-radius: 0; box-shadow: none; border: none; }
    .ports-map-legend .legend-dot { width: 11px; height: 11px; }
}
.ports-map-legend .legend-item { display: flex; align-items: center; gap: 7px; }
.ports-map-legend .legend-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ports-map-legend .legend-dot.available { background: var(--success); }
.ports-map-legend .legend-dot.leaving-soon { background: var(--warning); }
.ports-map-legend .legend-dot.occupied { background: var(--danger); }
.ports-map-legend .legend-dot.disabled { background: var(--disabled); }

/* Żywa mapa (Leaflet + kafelki CARTO) zamiast statycznego obrazka. Na desktopie "position: fixed; inset: 0"
   - wypełnia CAŁY ekran bez marginesów, pod nagłówkiem/legendą (z-index: 0, poniżej ich z-index: 1 wyżej),
   tak jakby była tłem strony, a nie osobnym, ograniczonym "okienkiem" gdzieś w środku. Na telefonie map
   wraca do zwykłego przepływu (patrz media query niżej) - "position: fixed" na wąskim ekranie razem z
   przeciąganiem w obrębie mapy utrudniałoby przewijanie reszty strony (dokładnie problem, którego dotyczyła
   wcześniejsza poprawka kompaktowego nagłówka na telefonie). */
#ports-live-map {
    position: fixed;
    inset: 0;
    /* -1, NIE 0 - "z-index: 0" i "z-index: auto" (nagłówek/legenda nie mają WŁASNEGO z-index) trafiają do
       TEJ SAMEJ warstwy malowania w CSS, więc o kolejności decydowałaby wtedy pozycja w HTML - mapa, jako
       późniejsza w DOM, malowałaby się NAD nagłówkiem mimo takiego samego z-index. Ujemny z-index to
       osobna, wcześniejsza warstwa (zawsze pod pozycjonowanymi elementami bez własnego z-index). */
    z-index: -1;
}
@media (max-width: 600px) {
    /* position: static musi tu zostać jawnie nadpisane - inaczej "position: fixed" z reguły bazowej (wyżej,
       poza media query) nadal by obowiązywał na telefonie. Leaflet i tak sam wymusi inline "position:
       relative" na tym elemencie (wymaga JAKIEJŚ pozycjonowanej podstawy dla swoich wewnętrznych warstw),
       ale to zachowuje się identycznie jak "static" w normalnym przepływie (bez offsetów) - więc efekt
       końcowy jest ten sam, mimo że wygrywa inline styl Leaflet, nie ta reguła. */
    #ports-live-map { position: static; width: 100%; }
    /* Polskie porty ciągną się szerokim, płaskim pasem wzdłuż wybrzeża (duży zakres długości geograficznej,
       mały zakres szerokości) - na wąskim telefonie w portrecie ramka wysoka jak na desktopie jest
       dużo bardziej pionowa niż sam kształt treści, więc dopasowanie widoku (fitBounds w portsMap.js)
       zostawia ogromny pusty pas (samo morze) nad/pod pinezkami - wygląda na "niewycentrowane". Stała,
       niższa wysokość na wąskich ekranach (zamiast "tła strony" jak na desktopie) zmniejsza ten rozjazd
       proporcji u źródła, zamiast próbować to nadrobić samym sprytniejszym doborem zoomu. */
    #ports-live-map { height: 340px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
}

/* Odznaka grupująca bliskie sobie pinezki (Leaflet.markercluster) - zastępuje wcześniejszą, ręcznie pisaną
   logikę chowania/przezroczystości etykiet gotowym, sprawdzonym mechanizmem: pinezki łączą się przy oddaleniu
   i rozdzielają się same po przybliżeniu. Pokazuje liczbę marin pod pinezką (patrz iconCreateFunction w
   portsMap.js) i zielenieje, gdy w skupisku jest choć jedna wolna marina - łatwiej ocenić, gdzie warto
   przybliżyć, bez klikania każdej pinezki po kolei. */
.ports-cluster-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--disabled);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    border: 3px solid #fff;
    box-shadow: var(--shadow-md);
}
.ports-cluster-icon.has-available { background: var(--success); }

.port-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
}

.port-pin .dot {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: var(--shadow-pin);
    background: var(--disabled);
    transition: transform 0.15s;
}
.port-pin:focus-visible .dot { transform: rotate(-45deg) scale(1.12); }
.port-pin.status-available .dot { background: var(--success); }
.port-pin.status-limited .dot { background: var(--warning); }
.port-pin.status-full .dot { background: var(--danger); }
.port-pin.status-disabled .dot { background: var(--disabled); }
/* Bosman wyłączył pokazywanie zajętości (status 'hidden', patrz statusFor() w portsMap.js) - ten sam szary
   co "disabled"/marker zewnętrzny, tekst w popupie odróżnia znaczenie. */
.port-pin.status-hidden .dot { background: var(--disabled); }

.port-pin .label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    pointer-events: none;
}

/* Popup Leaflet (marker.bindPopup, patrz portsMap.js) zamiast osobnego, ręcznie pozycjonowanego elementu na
   stałe miejsce na ekranie - Leaflet sam przypina go do pinezki i przesuwa razem z mapą (i dopilnowuje via
   autoPan, żeby nie wyjechał poza widoczny obszar). Selektory złożone (.leaflet-popup.port-popup ...) mają
   wyższą specyficzność niż gołe reguły Leaflet z leaflet.css, więc wygrywają niezależnie od tego, który plik
   CSS ładuje się pierwszy w <head> (nie trzeba pilnować kolejności <link>). */
.leaflet-popup.port-popup .leaflet-popup-content-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow: hidden;
}
.leaflet-popup.port-popup .leaflet-popup-content { margin: 0; }
.leaflet-popup.port-popup .leaflet-popup-tip {
    background: var(--surface);
    box-shadow: none;
}
.leaflet-popup.port-popup .leaflet-popup-close-button {
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    font-size: 16px;
}
.port-popup-inner { padding: 18px 20px; }
/* Bleeduje ujemnym marginesem do krawędzi karty (ten sam trik co .admin-hero gdzie indziej) - zdjęcie ma
   sięgać samych krawędzi/rogów popupu, treść pod nim zostaje w normalnym paddingu karty. */
.port-popup-inner .popover-cover {
    display: block;
    width: calc(100% + 40px);
    height: 140px;
    object-fit: cover;
    margin: -18px -20px 12px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.port-popup-inner h3 { margin: 0 0 4px; color: var(--navy-900); font-size: 17px; }
.port-popup-inner .address { margin: 0 0 12px; color: var(--text-muted); font-size: 13.5px; }
.port-popup-inner .availability { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.port-popup-inner .availability .status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
}
.port-popup-inner .popover-price { font-family: var(--font-mono); font-size: 13px; color: var(--brass-deep); font-weight: 600; }
.port-popup-inner .popover-amenities { margin: 0 0 14px; color: var(--text-muted); font-size: 12.5px; }
.port-popup-inner .status-badge.status-available { background: var(--success); }
.port-popup-inner .status-badge.status-limited { background: var(--warning); }
.port-popup-inner .status-badge.status-full { background: var(--danger); }
.port-popup-inner .status-badge.status-disabled { background: var(--disabled); }
.port-popup-inner .status-badge.status-hidden { background: var(--disabled); }
.port-popup-inner .view-btn {
    display: block;
    text-align: center;
    background: var(--gradient-brand);
    color: var(--brass-ink);
    text-decoration: none;
    padding: 11px;
    border-radius: var(--radius-md);
    font-size: 14.5px;
    font-weight: 700;
}

/* Karta wjeżdżająca z dołu EKRANU na telefonie zamiast popupu Leaflet "przy pinezce" (patrz komentarz przy
   isMobileViewport w portsMap.js) - ramka mapy tam ma tylko 340px wysokości, za mało na treść ze zdjęciem.
   Niezależna od wysokości ramki mapy (position: fixed względem całego ekranu, nie mapy), więc mieści się
   zawsze, a max-height + overflow-y na wszelki wypadek (bardzo niski telefon w poziomie). Poza media query
   zawsze display: none - na desktopie w ogóle nieużywana (tam działa zwykły popup Leaflet). */
.mobile-port-sheet { display: none; }
@media (max-width: 600px) {
    .mobile-port-sheet:not(.hidden) {
        display: block;
        position: fixed;
        z-index: 1000;
        left: 0; right: 0; bottom: 0;
        background: var(--surface);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg);
        max-height: 80vh;
        overflow-y: auto;
    }
    .mobile-port-sheet .port-popup-inner { padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .mobile-port-sheet-close {
        position: absolute;
        z-index: 2;
        top: 8px; right: 8px;
        width: 30px; height: 30px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: none;
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
        font-size: 14px;
        box-shadow: var(--shadow-sm);
    }
}

/* Karty "Pozostałych portów" - skopiowane z home.css (a nie po prostu dołączone przez <link>), żeby ta strona
   nie zależała od arkusza stylów myślanego pod zupełnie inny, pełnoekranowy układ index.html z własnymi
   regułami dla <body> (flex-direction: column) - ich zderzenie z centrującą kartą .container ze style.css
   powodowało, że strona przestawała się centrować w poziomie mimo justify-content: center. */
.ports-other-list { margin-top: 40px; }
.ports-other-list h2 { font-size: 18px; color: var(--navy-900); margin-bottom: 16px; }
.ports-other-list .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
.ports-other-list .marina-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.ports-other-list .marina-card-content { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.ports-other-list .marina-card h3 { margin: 0 0 10px 0; color: var(--navy-900); font-size: 19px; font-weight: 700; }
.ports-other-list .marina-address { margin: 0 0 16px 0; color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.ports-other-list .book-btn {
    display: block;
    text-align: center;
    background: var(--gradient-brand);
    color: var(--brass-ink);
    text-decoration: none;
    padding: 13px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

.ports-map-status { text-align: center; color: var(--text-muted); padding: 30px 0; }
.ports-map-status.hidden { display: none; }
.ports-map-status.error { color: var(--danger); }

/* :hover objęte (hover: hover) - patrz analogiczny blok w style.css po wyjaśnienie, dlaczego dotyk
   wymaga tej bramki (inaczej dotknięcie karty/przycisku trwale go "podświetla"). */
@media (hover: hover) and (pointer: fine) {
    .ports-other-list .marina-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .ports-other-list .book-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}