html{
    /* overflow:hidden; */
    height:100%;
}

body{
	min-height:100%;
	margin:0;
	overflow:hidden;
	font-family:Arial;
}

/* =========================
   LAYOUT
========================= */

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

#left{
  width:450px;
  min-width:450px;
  max-width:80%;
  padding:10px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-right:1px solid #ccc;
  box-sizing:border-box;
  background:#fff;
}

#right{
  flex:1;
  min-width:200px;
}

#map{
  width:100%;
  height:100%;
}

/* =========================
   GLOBAL INPUT CONSISTENCY
========================= */

#left input,
#left select{
  padding:6px;
  box-sizing:border-box;
  max-width:100%;
  display:block;
}

/* labels */
label{
  display:block;
  margin:0;
  font-weight:normal;
}

/* buttons */
button{
  padding:6px 10px;
  cursor:pointer;
  margin-right:5px;
}

/* =========================
   FILTER SECTIONS
========================= */

.filterSection{
  padding:20px 0;                /* 👈 ENAK VERTIKALNI SPACING */
  margin:0;
  border-bottom:1px solid #e6e6e6;
}

/* zadnji brez črte */
.filterSection:last-child{
  border-bottom:none;
}

/* =========================
   INLINE LAYOUT (UNIFIED)
========================= */

.inlineField,
.inlineRow{
  display:flex;
  align-items:center;
  /* justify-content:space-between; */
  gap:10px;
  margin-top:8px;
}

/* label v obeh enako */
.inlineField label,
.inlineRow label{
  margin:0;
  white-space:nowrap;
  flex:0 0 auto;
}

/* input + select enako široki */
.inlineField input,
.inlineRow select{
  width:40%;
  margin:0;
}

/* =========================
   SLIDER
========================= */

.slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:6px;
  background:#d9d9d9;
  outline:none;
  margin:10px 0 15px 0;
  transition:0.2s;
}

.slider:hover{
  background:#c8c8c8;
}

.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#4a90e2;
  cursor:pointer;
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
}

/* .slider::-webkit-slider-runnable-track{

    height:8px;

    border-radius:6px;

    background:#d9d9d9;

} */

.slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#4a90e2;
  cursor:pointer;
  border:none;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
}

.slider::-moz-range-track{
  height:8px;
  border-radius:6px;
  background:#d9d9d9;
}

/* =========================
   RABA FILTER
========================= */

.rabaFilterBox{
  border:1px solid #ccc;
  border-radius:8px;
  padding:8px;
  max-height:200px;
  overflow-y:auto;
  background:#fff;
}

.rabaItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 2px;
  font-size:13px;
}

.rabaItem input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 16px;
}

.rabaText{
  flex:1;
}

/* =========================
   SEARCH BUTTON
========================= */

.searchButton{
  width:100%;
  padding:12px;
  margin-top:10px;
  border:none;
  border-radius:8px;
  background:#4a90e2;
  color:white;
  font-size:25px;
  font-weight:bold;
  cursor:pointer;
}

.searchButton:hover{
  background:#357abd;
}

/* =========================
   TABS
========================= */

.tabs{
  display:flex;
  gap:5px;
  margin-bottom:15px;
}

.tabButton{
  flex:1;
  padding:10px;
  border:none;
  background:#e0e0e0;
  border-radius:8px 8px 0 0;
  font-weight:bold;
  cursor:pointer;
}

.tabButton.active{
  /* background:#808080; */
  background:#4a90e2;
  color:white;
}

.tabContent{
  display:none;
}

.tabContent.active{
  display:block;
}

/* =========================
   RESULTS
========================= */

#stats{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:5px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}

/* .csvBtn{
    background:#2e7d32;
    color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
} */

/* .csvBtn:hover{
    background:#256628;
} */

#sortContainer{
  font-weight:bold;
  padding:10px 0;
  border-bottom:1px solid #ccc;
  margin-bottom:10px;
}

/* =========================
   PARCELS
========================= */

.parcel{
  border:1px solid #ddd;
  background:#fafafa;
  margin-bottom:10px;
  padding:10px;
  border-radius:8px;
}

.parcel:hover{
  background:#f0f0f0;
}

.parcel.active{
  border:2px solid #4a90e2;
  background:#e8f2ff;
}

/* =========================
   LEAFLET FIX
========================= */

.leaflet-control-layers{
  font-family:Arial !important;
  font-size:13px;
  max-width:220px;
  padding:6px;
}

.leaflet-control-layers label{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
}

.leaflet-control-layers input{
  width:auto !important;
  margin:0 6px 0 0;
}

/* =========================
   PAGINATION
========================= */

#pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:20px 0;
}

#pagination button{
  width:40px;
  height:40px;
  border:none;
  border-radius:8px;
  background:#4a90e2;
  color:white;
  font-size:18px;
  font-weight:bold;
}

#pagination button:hover:not(:disabled){
  background:#357abd;
}

#pagination button:disabled{
  background:#bfcde0;
}

.pageInfo{
  font-weight:bold;
}

/* =========================
   CUSTOM ALERT
========================= */

.customAlert{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.customAlert.hidden{
  display:none;
}

.customAlertBox{
  width:min(420px, 90vw);
  background:white;
  border-radius:14px;
  padding:28px 24px;
  box-shadow:0 10px 35px rgba(0,0,0,0.25);
  animation:alertPop 0.18s ease-out;
}

@keyframes alertPop{
  from{transform:scale(0.92);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

.customAlertText{
  font-size:18px;
  margin-bottom:22px;
  white-space:pre-line;
}

.customAlertBtn{
  width:100%;
  border:none;
  border-radius:10px;
  padding:13px;
  background:#4a90e2;
  color:white;
  font-size:17px;
  font-weight:bold;
}

.customAlertBtn:hover{
  background:#357abd;
}

/* =========================
   SPECIAL INPUT ROWS
========================= */


.roadDistanceRow{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  justify-content:flex-start;
}

.roadDistanceRow .rabaText{
  flex:0 0 auto;
}

.roadDistanceRow .smallNumberInput{
  flex:0 0 auto;
  /* width:60px !important; */
  width:60px;
  margin:0 4px;
}

#sortContainer .sortRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

#sortContainer label,
#sortContainer select{
  display:inline-flex;
  align-items:center;
}

/* =========================
   PARCEL CARD 
========================= */

.parcel {
  position: relative;
}

.parcelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  padding-left: 30px; /* space for X button */
  padding-bottom: 8px;
  color: #1565c0;
}

.removeBtn {
  position: absolute;
  top: 6px;
  left: 6px;

  width: 22px;
  height: 22px;

  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;
}

.removeBtn:hover {
  background: #d90000;
}


.parcelBody {
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* vsaka vrstica */
.parcelRow {
  padding: 8px 0;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

/* zadnja vrstica */
.parcelLastRow {
  padding: 8px 0;
  font-size: 14px;
  font-weight: bold;
}

.parcelRaba {
  padding-top: 8px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.rabaTitle {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.rabaContent {
  font-size: 13px;
  line-height: 1.4;
}

/* akcijski gumbi */
.parcelActions {
  margin-top: 12px;
  display: flex;
  gap: 6px;
}


/* tooltip */
.tooltip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	flex: 0 0 18px;

    width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: #1976d2;
    color: white;

    font: bold 12px/1 Arial, sans-serif;
    cursor: pointer;
    user-select: none;
}

.tooltip-btn:hover {
    background: #1565c0;
}

#tooltip-popup {
    position: absolute;
    display: none;

    max-width: 260px;
    padding: 10px 12px;

    background: #333;
    color: white;

    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);

    font-size: 14px;
    line-height: 1.4;

    z-index: 10000;
}

/* =========================
   LOADING OVERLAY
========================= */

.loadingOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:99998;
}

.loadingOverlay.hidden{
  display:none;
}

.loadingBox{
  background:white;
  padding:24px 32px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.loadingText{
  font-size:18px;
  font-weight:bold;
  color:#333;
}

.spinner{
  width:46px;
  height:46px;
  border:5px solid #ddd;
  border-top:5px solid #4a90e2;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

/* =========================
   PDF EXPORT
========================= */

.pdf-export .parcelActions,
.pdf-export .removeBtn {
    display: none !important;
}

.pdf-export .pdf-title {
    text-align: center;
}

.pdf-export .pdf-note {
    margin-top: 8px;
    font-size: 10px;
    color: #666;
    text-align: left;
}

/* =========================================================
   MOBILE TABS - DEFAULT
   ========================================================= */

#mobileTabs {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    /* =====================================================
       DESKTOP TABS
       ===================================================== */

    .tabs {
        display: none;
    }


    /* =====================================================
       MAIN CONTAINER
       ===================================================== */

    #container {
        display: block;

        width: 100%;

        height: 100vh;
        height: 100dvh;

        min-height: 0;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* =====================================================
       LEFT / RIGHT PANELS
       ===================================================== */

    #left,
    #right {
        width: 100%;

        min-width: 0;
        max-width: none;
        min-height: 0;

        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);

        box-sizing: border-box;
    }


    #left {
        display: none;
    }


    #right {
        display: block;

        width: 100%;

        min-height: 0;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* =====================================================
       MAP
       ===================================================== */

    #map {
        width: 100%;
        height: 100%;

        min-height: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       MOBILE BOTTOM TABS
       ===================================================== */

    #mobileTabs {

        display: flex;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        /*
         * VERY IMPORTANT:
         * The actual element is ALWAYS exactly 60px.
         */
        height: 60px;
        min-height: 60px;
        max-height: 60px;

        box-sizing: border-box;

        margin: 0;
        padding: 0;

        background: #ffffff;

        border-top: 1px solid #cccccc;

        z-index: 99999;

        pointer-events: auto;

        /*
         * Mobile WebView rendering.
         */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        touch-action: manipulation;
    }


    /* =====================================================
       IPHONE HOME INDICATOR
       ===================================================== */

    /*
     * IMPORTANT:
     *
     * We DO NOT add safe-area padding to #mobileTabs.
     *
     * This prevents the Facebook/iOS WebView from making
     * #mobileTabs taller than 60px.
     *
     * Instead, the pseudo-element paints the safe-area
     * background BELOW the 60px navigation.
     */

    #mobileTabs::after {

        content: "";

        position: absolute;

        left: 0;
        right: 0;

        top: 100%;

        width: 100%;

        height: env(safe-area-inset-bottom, 0px);

        background: #ffffff;

        pointer-events: none;
    }


    /* =====================================================
       MOBILE TAB BUTTONS
       ===================================================== */

    .mobileTab {

        flex: 1 1 0;

        width: 33.333333%;

        /*
         * Button is ALWAYS 60px.
         */
        height: 59px;

        min-height: 59px;
        max-height: 59px;

        min-width: 0;

        box-sizing: border-box;

        margin: 0;
        padding: 2px;

        border: 0;

        border-right: 1px solid #e5e5e5;

        outline: none;

        background: #ffffff;

        color: #222222;

        font-family: inherit;

        font-size: 15px;

        font-weight: normal;

        line-height: 1.15;

        text-align: center;

        vertical-align: middle;

        /*
         * Remove native button appearance.
         */
        -webkit-appearance: none;
        appearance: none;

        /*
         * Touch.
         */
        pointer-events: auto;

        touch-action: manipulation;

        /*
         * Prevent text selection.
         */
        -webkit-user-select: none;
        user-select: none;

        /*
         * Remove iOS tap highlight.
         */
        -webkit-tap-highlight-color: transparent;
    }


    /* =====================================================
       LAST TAB
       ===================================================== */

    .mobileTab:last-child {
        border-right: none;
    }


    /* =====================================================
       ACTIVE TAB
       ===================================================== */

    .mobileTab.active {

        background: #4a90e2;

        color: #ffffff;

        font-weight: bold;
    }


    /* =====================================================
       TOUCH FEEDBACK
       ===================================================== */

    .mobileTab:active {

        background: #dcecff;
    }


    .mobileTab.active:active {

        background: #3b7fc9;
    }


    /* =====================================================
       HOVER
       ===================================================== */

    @media (hover: hover) and (pointer: fine) {

        .mobileTab:not(.active):hover {

            background: #f3f3f3;
        }
    }


    /* =====================================================
       TOOLTIP BUTTON
       ===================================================== */

    .tooltip-btn {

        flex: 0 0 auto;

        margin-left: 5px;
    }


    /* =====================================================
       TOOLTIP
       ===================================================== */

    #tooltip-popup {

        max-width: calc(100vw - 20px);

        box-sizing: border-box;

        word-wrap: break-word;

        overflow-wrap: break-word;
    }


    /* =====================================================
       ASPECT RATIO
       ===================================================== */

    #aspectRatioValue {

        width: 50px;

        box-sizing: border-box;
    }


    /* =====================================================
       MOBILE RADIUS CONTROL
       ===================================================== */

    .mobile-radius-control {

        width: clamp(240px, 80vw, 360px);

        max-width: calc(100vw - 30px);

        box-sizing: border-box;

        padding: 10px;

        background: #ffffff;

        border-radius: 10px;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.25);
    }


    .mobileRadiusTitle {

        margin-bottom: 8px;

        font-weight: bold;

        text-align: center;

        font-size: clamp(18px, 2.8vw, 20px);

        line-height: 1.2;
    }


    .mobile-radius-control input[type="range"] {

        display: block;

        width: 100%;

        margin: 0;
    }


    /* =====================================================
       LEAFLET CONTROLS
       ===================================================== */

    .leaflet-bottom.leaflet-left .leaflet-control {

        margin-bottom: 25px;
    }


    /* =====================================================
       MOBILE FORM ELEMENTS
       ===================================================== */

    input,
    select,
    button {

        font-size: 16px;
    }

}





/* =========================
   SKRITI PDF MAP
========================= */

#pdfMap {
    position: fixed;

    left: -10000px;
    top: -10000px;

    width: 900px;
    height: 900px;

    visibility: hidden;
    pointer-events: none;

    overflow: hidden;
}