html,
body {
    height: 100%;
    margin: 0;
}

#container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#sidePanel {
    width: 300px;
    min-width: 150px;
    max-width: 600px;
    background: #e7e3d5;
    overflow-y: auto;
    padding: 10px;
    flex-shrink: 0;
}

#sidePanel h5 {
    display: block;
    width: 100%;
    text-align: center;
}


/* Amikor hidden mód van */

#sidePanel.hidden .panel-content {
    display: none !important;
    /* vagy visibility: hidden; */
}


/* A sidePanel, amikor hidden – fehér háttér + kis szélesség */

#sidePanel.hidden {
    background: #e7e3d5;
    width: 26px !important;
    /* Vagy amekkora legyen a sáv */
    min-width: 26px !important;
    overflow: visible;
    /* Hogy gomb + resizer ne legyen elvágva */
}

#resizer {
    width: 12px;
    cursor: col-resize;
    background: #ccc;
    flex-shrink: 0;
}

#resizer:hover {
    background: #999;
}

#map {
    flex: 1;
    height: 100%;
}

.leaflet-draw {
    margin-top: 70px !important;
}


/* Mobilon megtartjuk a vízszintes elrendezést (sidebar a bal oldalon),
   a sidebar a JS által .collapsed-be kerül induláskor → 40px széles. */

.leaflet-control-layers {
    font-size: 16px;
    line-height: 1.5;
    max-height: 80vh;
    border-radius: 8px;
    padding: 8px;
}

@media (max-width: 768px) {
    .leaflet-control-layers {
        font-size: 18px;
        padding: 12px;
    }
    .leaflet-control-layers label {
        padding: 6px 0;
    }
}

.geo-search.open input {
    font-size: 16px;
    height: 1.5em;
    /* tetszőleges pixel vagy rem érték */
    padding: 16px 10px;
}


/* Modern böngészők placeholder stílusozása*/

.geo-search.open input::placeholder {
    font-size: 16px;
    /* Betűméret */
    color: gray;
    /* Szín */
    font-style: italic;
    /* Opcionális stílus */
}

.geo-search button img {
    position: relative;
    height: 28px;
    width: 28px;
}

.geo-search button {
    background-color: #ead9a2;
}


/* =========== GPX/KML gombok =========== */

.gpx-btn {
    position: absolute;
    top: 260px;
    /* zoom control alatt */
    right: 10px;
    z-index: 1000;
    background: white;
    border: 2px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.gpx-btn:hover {
    background: #f7f7f7;
}

.gpx-save-btn {
    position: absolute;
    top: 305px;
    /* clear gomb alá */
    right: 10px;
    z-index: 1000;
    background: white;
    border: 2px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.gpx-save-btn:hover {
    background: #f7f7f7;
}

.gpx-clear-btn {
    position: absolute;
    top: 355px;
    /* a GPX feltöltő gomb alá igazítva */
    right: 10px;
    z-index: 1000;
    background: white;
    border: 2px solid #ccc;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.gpx-clear-btn:hover {
    background: #f7f7f7;
}

#itemList {
    background-color: #dcd6ac;
    color: rgb(68, 51, 9);
    padding: 5px;
    border-radius: 5px;
}

#itemList .list-group-item {
    background-color: transparent;
    color: rgb(18, 17, 17);
    border: 2px solid #0056b3;
    margin-bottom: 3px;
}

#itemList .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#filterToggle {
    background-color: #a38e67;
    border-color: #a38e67;
    color: white;
}

#filterToggle:hover {
    background-color: #8b7754;
    border-color: #8b7754;
}

#filterBtn {
    font-weight: bold;
    background-color: #d3c19f;
    border-color: #a38e67;
    color: rgb(139 120 65);
}

#filterBtn:hover {
    background-color: #8b7754;
    border-color: #8b7754;
}

#filter_from,
#filter_to,
#filter_utas,
#filter_hely {
    background-color: #fbf6ed;
}


/* A törlés gomb szélessége legyen két sort gomb szélessége + gap */

#clearFilterBtn {
    width: calc(33px * 2 + 0.25rem);
    /* 0.25rem = gap-1 */
}

#clearFilterBtn {
    font-weight: bold;
    color: rgb(139 120 65);
    background-color: #c3b08c;
}

@media (max-width: 768px) {
    #filterToggle,
    #filterBtn {
        width: 100%;
        font-size: 1rem;
        padding: 10px 0;
    }
}

#polyline-measure-control {
    position: absolute;
    top: 315px;
    /*background: #dbcab3;*/
}


/* Touch toolbar
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a,
.leaflet-touch
  .leaflet-control-toolbar
  .leaflet-toolbar-1
  > li
  > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions,
.leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}
*/

.leaflet-bar a,
.leaflet-draw-toolbar a {
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
}

.leaflet-draw-toolbar a {
    background-size: 390px 39px !important;
    /* 300*1.3 = 390, 30*1.3 = 39 */
    background-repeat: no-repeat;
}


/* Draw toolbar - eredeti pozíciók */

.leaflet-draw-draw-polyline {
    background-position: -21px -2px !important;
}

.leaflet-draw-draw-polygon {
    background-position: -59px -2px !important;
}

.leaflet-draw-draw-rectangle {
    background-position: -99px -2px !important;
}

.leaflet-draw-draw-marker {
    background-position: -177px -2px !important;
}

.leaflet-draw-edit-edit {
    background-position: -293px -2px !important;
    background-color: #827b7b !important;
}

.leaflet-draw-edit-remove {
    background-position: -333px -2px !important;
    background-color: #9d6868 !important;
}


/* Csak az edit ikonokat erősítjük 
.leaflet-draw-edit-edit,
.leaflet-draw-edit-remove {
  background-color: transparent !important;
  filter: brightness(0) grayscale(1) brightness(9);
}
*/


/* Rajzolás tooltip elrejtése */

.leaflet-draw-tooltip {
    display: none !important;
}


/* ========= LEAFLET draw/edit töréspont stílus ========= */

.leaflet-editing-icon {
    width: 15px !important;
    height: 15px !important;
    margin-top: -7px !important;
    margin-left: -7px !important;
    background-color: #f4f4f4;
    border: 1px solid #666;
    border-radius: 50%;
    display: inline-block;
}

#sortDesc {
    background-color: #806e5b;
}

#sortAsc {
    background-color: #806e5b;
}

.sort-btn.active {
    background-color: #36310c !important;
    color: rgb(248, 244, 7);
}


/* Feltételezzük, hogy a sort gombok kb. 38px szélesek */

.sort-btn {
    width: 33px;
}


/*
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
  background-image: url(images/downloading.png);
  background-image: no-repeat;
  background-color: #fff;
}
*/


/* =======================================
   BEÚSZÓ – ÖSSZECSUKHATÓ OLDALSÁV (UPDATE)
   toggle gomb mindig a resizer mellett!
   ======================================= */

:root {
    --panel-width: 300px;
    --panel-collapsed: 40px;
    --resizer-width: 12px;
}


/* Oldalsáv */

#sidePanel {
    position: relative;
    width: var(--panel-width);
    transform: translateX(0);
    transition: transform 0.35s ease, width 0.35s ease;
    z-index: 500;
}


/* Collapsed mód */

#sidePanel.collapsed {
    width: var(--panel-collapsed) !important;
    min-width: var(--panel-collapsed) !important;
    max-width: var(--panel-collapsed) !important;
    overflow: hidden;
}


/* =======================================
     Toggle gomb – mindig a resizer mellett!
     ======================================= */

#sideToggleBtn {
    position: absolute;
    top: 5px;
    right: 12px;
    /* resizer szélesség + kis hézag = pl. 12px */
    width: 26px;
    height: 40px;
    background: #c0a879;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    z-index: 2000;
    transition: transform 0.35s ease;
    user-select: none;
}


/* Collapsed: új pozíció */

#sidePanel.collapsed~#sideToggleBtn {
    left: calc(var(--panel-collapsed) + var(--resizer-width));
}

#sidePanel.collapsed~#sideToggleBtn i {
    transform: rotate(180deg);
}


/* Hidden: ugyanez */

#sidePanel.hidden~#sideToggleBtn {
    left: calc(var(--panel-collapsed) + var(--resizer-width));
}

#sidePanel.hidden~#sideToggleBtn i {
    transform: rotate(180deg);
}


/* MAP eltolás */

#map {
    transition: margin-left 0.35s ease;
}

.merge-btn {
    position: absolute;
    top: 15px;
    left: 10px;
    z-index: 1000;
    background-color: #808080;
    /* szürke */
    color: white;
    border: none;
    padding: 7px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.65rem;
    /* kisebb betűméret */
    /*  line-height: 1;           /* sormagasság csökkentése */
}

.merge-btn.active {
    background-color: #a71d2a;
}


/* INFO gomb — közvetlenül a MERGE gomb alatt, ugyanazon a függőlegesen */

.info-btn {
    position: absolute;
    top: 48px;
    left: 10px;
    z-index: 1000;
    background-color: #808080;
    color: white;
    border: none;
    padding: 4px 7px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

.info-btn:hover {
    background-color: #6c6c6c;
}

.info-btn.active {
    background-color: #a71d2a;
}


/* Info popover tartalom: id+hely listához scrollozható, kompakt táblázat */

.info-popover-body {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 0.85rem;
}

.info-popover-body table {
    width: 100%;
    border-collapse: collapse;
}

.info-popover-body th,
.info-popover-body td {
    padding: 3px 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.info-popover-body th {
    background-color: #f1f3f5;
    position: sticky;
    top: 0;
}


/* ADMIN button — jobb alsó sarokban, mobilon és asztalon egyaránt látható */

.admin-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 32px;
    width: 32px;
    background: rgba(238, 232, 232, 0.7);
    z-index: 2000;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-btn:hover {
    background: #c26b13;
}


/* Mobil: a térkép kitölti a maradék helyet, nincs vízszintes görgetés */

@media (max-width: 768px) {
    #map {
        overflow: hidden;
    }
    #map>.leaflet-container {
        width: 100%;
        height: 100%;
    }
}


/* ===== Listaelem attribútum szerkesztés gomb ===== */

.list-group-item {
    position: relative;
}

.edit-item-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 0.8rem;
    padding: 2px 5px;
    cursor: pointer;
    color: #0056b3;
}

.edit-item-btn:hover {
    color: #c00;
}


/* Marker ki/be kapcsoló gomb */


/* Marker toggle gomb – Bootstrap kinézet, Leaflet controlként */

#toggleMarkersBtn {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    font-size: 15px;
    font-weight: 500;
    background-color: #f8f9fa;
    /* btn-light */
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

#toggleMarkersBtn i {
    color: #dc3545;
    /* Bootstrap danger */
}


/* hover */

#toggleMarkersBtn:hover {
    background-color: #e9ecef;
}


/* aktív állapot (markerek elrejtve) */

#toggleMarkersBtn.hidden {
    background-color: #d48a8c;
    color: #fff;
    border-color: #d48a8c;
}

#toggleMarkersBtn.hidden i {
    color: #fff;
}


/* mobilon kisebb */

@media (max-width: 768px) {
    #toggleMarkersBtn {
        font-size: 12px;
        padding: 5px 8px;
    }
}


/* =======================================================
   Telefon-specifikus finomhangolás (Xiaomi Redmi 10 ≈ 412px)
   A sidebar a JS révén default .collapsed mobilon (40px széles),
   itt csak a top-bar gombok és a touch-méret hangolása marad.
   ======================================================= */

@media (max-width: 576px) {
    /* Listaelemek olvashatóbbak (ha kinyitja a sidebart) */
    #itemList .list-group-item {
        font-size: 14px;
        padding: 8px 10px;
    }
    /* Form inputok ne zoomoljanak iOS Safari/Chrome-on (≥16px elkerüli az auto-zoom-ot) */
    .form-control,
    input[type="text"],
    input[type="date"],
    input[type="password"] {
        font-size: 16px;
    }
    /* Modal ne lógjon ki a kijelzőről */
    .modal-dialog {
        margin: 0.5rem;
    }
}