:root {
    --scale: clamp(0.8, calc(1vw + 0.5 * var(--dpr)), 1.8);
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
/*    font-size: 1rem;*/
    font-size: clamp(14px, 1.2vw + 0.5vh, 22px);
}
input:read-only {
    background-color: lightgray;
}

#map { height: 100vh; }

#toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    /*height: clamp(50px, 10vw, 120px);*/
    height: 4rem;
}
#toolbar button {
    border: none;
    border-radius: 12px;
    background: white;
    transition: 0.15s;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 44px;
    min-height: 44px;
/*    width: calc(60px * var(--scale));
    height: calc(60px * var(--scale));
    font-size: calc(1rem * var(--scale));   */
/*    width: clamp(40px, 10vw, 100px);
    height: clamp(40px, 10vw, 100px);
    font-size: clamp(1rem, 2vw, 3rem);*/
}
@media (pointer: coarse) {
    #toolbar button {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
}

@media (pointer: fine) {
    #toolbar button {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}
#toolbar button i {
    font-size: 1.5em;
    pointer-events: none;
}
/* AKTÍV TOOL */
#toolbar button.active {
    background: #2d89ef;
    color: white;
    transform: scale(1.1);
}
#toolbar button:disabled,
#toolbar button.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    font-size: 1.5rem;
    box-sizing: border-box;
    padding: 16px;
}

.modal-content {
    background: white;
    width: min(92vw, 540px);
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 16px;    
}

.modal-content input:read-only {
    border:none;
    color:darkgrey;
}
.modal-content input,
.modal-content select {
    color: darkred;
}
.modal-content input,
.modal-content select,
.modal-content button {
    font-size: 1.5rem;
    padding: 12px 14px;
}
.hidden {
    display: none;
}
.leaflet-draw-tooltip {
    font-size: clamp(14px, 2.5vw, 24px);
    padding: 6px 10px;
}
#areaDisplay {
    position: absolute;
    top: 10px;
    right: 10px;

    background: rgba(0,0,0,0.6);
    color: white;

    padding: 0.2rem 0.2rem;
    border-radius: 8px;

    font-size: 2rem;
    z-index: 1000;
}

#openSettings {
    position: fixed;
    top: 10rem; /* 60px + gomb magasság + kis gap */
    right: 10px;

    width: 5rem;
    height: 5rem;
    font-size: 3rem;
    border-radius: 12px;
    border: none;
    background: rgba(0,0,0,0.8);
    color: white;
    z-index: 1000;
}
#openSettings.active {
    background: #4caf50;
}

/*Session*/
#sessionToggle:hover,
#openSettings:hover {
    background: rgba(20,60,140,0.8);
}
#sessionControl {
    position: fixed;
    top: 4rem;
    right: 10px;
    z-index: 1000;
}

/* TOGGLE BUTTON */
#sessionToggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
    border-radius: 12px;
    border: none;
    background: rgba(0,0,0,0.8);
    color: white;
    cursor: pointer;
}

/* PANEL */
#sessionPanel {
    margin-top: 6rem;
    margin-right: 0;
    line-height: 2;

    background: rgba(0,0,0,0.85);
    color: white;
    padding: 10px;
    border-radius: 10px;
    min-width: 18rem;
    max-width: 22rem;
    font-size: x-large;

    transform-origin: top right;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* COLLAPSED STATE */
#sessionPanel.collapsed {
    transform: scale(0.95);
    opacity: 0;
    display: none;
    pointer-events: none;
}
/* OPEN STATE */
#sessionPanel.open {
    transform: scale(1);
    opacity: 1;
    display: block;
    pointer-events: auto;
}
#sessionPanel h4 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size:1.7rem;
}
#sessionPanel select {
    width: 100%;
    margin: 2px 1%;
    font-size:1.5rem;
    padding: 12px 14px;
}
.session-buttons button {
    width: 100%;
    margin: 2px 1%;
    font-size: 1.5rem;
    padding: 12px 14px;
}
#sessionToggle.active {
    background: #4caf50;
}