/* ==================================================
   MINING GIS PLATFORM
   STYLE.CSS - FINAL
   FLOATING SIDEBAR / RESPONSIVE
================================================== */


/* ==================================================
   1. RESET
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f5f5;
}

body {
    position: relative;
}


/* ==================================================
   2. MAP
================================================== */

#map {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}


/* ==================================================
   3. NETWORK STATUS
================================================== */

#networkStatus {
    position: fixed;

    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);

    padding: 5px 12px;

    background: rgba(255, 255, 255, .94);

    border: 1px solid rgba(0, 0, 0, .08);

    border-radius: 20px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .16);

    color: #343a40;

    font-size: 11px;
    font-weight: 600;

    pointer-events: none;

    z-index: 2500;
}


/* ==================================================
   4. LEGEND
================================================== */

#legend {
    position: fixed;

    top: 12px;
    left: 12px;

    min-width: 145px;
    max-width: 230px;

    padding: 9px 11px;

    background: rgba(255, 255, 255, .94);

    border:
        1px solid rgba(0, 0, 0, .08);

    border-radius: 9px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .18);

    font-size: 12px;

    z-index: 2000;
}

#legend h4 {
    margin: 0 0 7px;

    color: #212529;

    font-size: 13px;
    font-weight: 700;
}

#legend ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

#legend li {
    margin: 4px 0;
}


/* ==================================================
   5. SIDEBAR OVERLAY
================================================== */

#sideOverlay {
    position: fixed;

    inset: 0;

    display: none;

    background:
        rgba(0, 0, 0, .18);

    z-index: 4999;
}

#sideOverlay.show {
    display: block;
}


/* ==================================================
   6. SIDE TOGGLE
================================================== */

#sideToggle {
    position: fixed;

    top: 50%;
    right: 0;

    width: 44px;
    height: 54px;

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

    transform: translateY(-50%);

    padding: 0;

    border: 0;

    border-radius:
        10px 0 0 10px;

    background: #212529;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    box-shadow:
        -2px 3px 10px rgba(0, 0, 0, .25);

    z-index: 4000;

    transition:
        background .15s ease,
        width .15s ease;
}

#sideToggle:hover {
    background: #000;
}


/* ==================================================
   7. SIDEBAR
================================================== */

#sidePanel {
    position: fixed;

    top: 0;
    right: 0;

    width: 300px;
    height: 100vh;

    background:
        rgba(255, 255, 255, .98);

    border-left:
        1px solid rgba(0, 0, 0, .08);

    box-shadow:
        -5px 0 22px rgba(0, 0, 0, .20);

    overflow-y: auto;

    transform:
        translateX(100%);

    transition:
        transform .25s ease;

    z-index: 5000;
}

#sidePanel.show {
    transform:
        translateX(0);
}


/* ==================================================
   8. SIDEBAR HEADER
================================================== */

.side-header {
    position: sticky;

    top: 0;

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

    min-height: 54px;

    padding:
        12px 14px;

    background: #212529;

    color: #fff;

    z-index: 2;
}

.side-header strong {
    font-size: 15px;
    font-weight: 700;
}


/* ==================================================
   9. SIDEBAR CLOSE
================================================== */

.side-close {
    width: 30px;
    height: 30px;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .14);

    color: #fff;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;
}

.side-close:hover {
    background:
        rgba(255, 255, 255, .25);
}


/* ==================================================
   10. SIDEBAR MENU
================================================== */

.side-menu {
    padding: 12px;
}


/* ==================================================
   11. SIDEBAR BUTTON
================================================== */

.side-menu button {
    width: 100%;

    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 7px;

    padding:
        10px 12px;

    border:
        1px solid #e4e7ea;

    border-radius: 9px;

    background: #fff;

    color: #212529;

    text-align: left;

    font-size: 13px;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .1s ease;
}

.side-menu button:hover {
    background: #f4f6f8;

    border-color: #d7dce1;
}

.side-menu button:active {
    transform: scale(.99);
}

.side-menu button span {
    flex: 1;
}


/* ==================================================
   12. SIDEBAR INFO
================================================== */

.side-section {
    padding:
        12px;

    border-top:
        1px solid #eee;
}

.side-section-title {
    margin-bottom: 7px;

    color: #6c757d;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .4px;
}

.side-info {
    color: #666;

    font-size: 12px;

    line-height: 1.6;
}


/* ==================================================
   13. PANEL UMUM
================================================== */

.floating-panel {
    position: fixed;

    right: 18px;
    bottom: 18px;

    width: 270px;
    max-width:
        calc(100vw - 36px);

    max-height: 72vh;

    overflow-y: auto;

    padding: 12px;

    background:
        rgba(255, 255, 255, .98);

    border:
        1px solid rgba(0, 0, 0, .09);

    border-radius: 12px;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, .24);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(10px);

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index: 4500;
}

.floating-panel.show {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ==================================================
   14. PANEL HEADER
================================================== */

.panel-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 6px;
}

.panel-header strong {
    color: #212529;

    font-size: 14px;
    font-weight: 700;
}


/* ==================================================
   15. PANEL CLOSE
================================================== */

.close-panel {
    width: 28px;
    height: 28px;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f1f3f5;

    color: #495057;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;
}

.close-panel:hover {
    background: #dee2e6;
}


/* ==================================================
   16. HR
================================================== */

.floating-panel hr {
    border: 0;

    border-top:
        1px solid #eee;

    margin:
        9px 0;
}


/* ==================================================
   17. LAYER GROUP
================================================== */

.layer-group {
    margin-bottom: 4px;
}

.layer-title {
    margin-bottom: 4px;

    color: #6c757d;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .4px;
}


/* ==================================================
   18. LAYER CHECKBOX
================================================== */

#layerPanel label {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 32px;

    margin: 0;

    padding:
        5px;

    border-radius: 7px;

    color: #343a40;

    font-size: 13px;

    cursor: pointer;

    transition:
        background .15s ease;
}

#layerPanel label:hover {
    background: #f5f5f5;
}

#layerPanel input[type="checkbox"] {
    flex-shrink: 0;

    margin: 0;

    cursor: pointer;
}


/* ==================================================
   19. BASEMAP
================================================== */

#basemapPanel label {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 34px;

    margin: 0;

    padding:
        6px 5px;

    border-radius: 7px;

    color: #343a40;

    font-size: 13px;

    cursor: pointer;
}

#basemapPanel label:hover {
    background: #f5f5f5;
}

#basemapPanel input {
    margin: 0;
}


/* ==================================================
   20. UPLOAD
================================================== */

#uploadPanel input[type="file"] {
    width: 100%;

    margin-bottom: 8px;

    padding: 7px;

    border:
        1px solid #d9dde1;

    border-radius: 7px;

    background: #fafafa;

    color: #343a40;

    font-size: 11px;
}


/* ==================================================
   21. PANEL ACTION
================================================== */

.panel-action {
    width: 100%;

    min-height: 36px;

    margin-top: 4px;

    padding:
        8px 10px;

    border: 0;

    border-radius: 7px;

    background: #0d6efd;

    color: #fff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .1s ease;
}

.panel-action:hover {
    background: #0b5ed7;
}

.panel-action:active {
    transform: translateY(1px);
}


/* ==================================================
   22. USER LAYER LIST
================================================== */

#layerList {
    margin-top: 7px;

    max-height: 210px;

    overflow-y: auto;

    color: #555;

    font-size: 12px;
}

.layer-item {
    display: flex;
    align-items: center;

    gap: 6px;

    min-height: 34px;

    padding:
        5px 2px;

    border-bottom:
        1px solid #eee;
}

.layer-item label {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.del-btn {
    flex-shrink: 0;

    width: 26px;
    height: 26px;

    padding: 0;

    border: 0;

    border-radius: 5px;

    background: transparent;

    color: #6c757d;

    cursor: pointer;
}

.del-btn:hover {
    background: #f1f3f5;
}


/* ==================================================
   23. COORDINATE PANEL
================================================== */

.coordinate-panel {
    width: 270px;
}


/* ==================================================
   24. COORDINATE INPUT
================================================== */

.coordinate-inputs {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin:
        10px 0;
}

.coordinate-inputs input {
    width: 100%;

    height: 36px;

    padding:
        8px 10px;

    border:
        1px solid #ccc;

    border-radius: 6px;

    background: #fff;

    color: #333;

    font-size: 13px;

    outline: none;
}

.coordinate-inputs input:focus {
    border-color: #777;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, .05);
}


/* ==================================================
   25. ADMIN
================================================== */

#adminStatus {
    padding:
        8px 10px;

    margin-bottom: 8px;

    background: #f8f9fa;

    border-radius: 7px;

    color: #343a40;

    font-size: 13px;
}


/* ==================================================
   26. LEAFLET
================================================== */

.leaflet-control {
    z-index: 1500;
}

.leaflet-top,
.leaflet-bottom {
    z-index: 1500;
}


/* ==================================================
   27. MOBILE
================================================== */

@media (max-width: 576px) {

    #sidePanel {
        width: 285px;
    }

    #sideToggle {
        width: 40px;
        height: 50px;

        font-size: 19px;
    }

    #legend {
        top: 8px;
        left: 8px;

        min-width: 115px;
        max-width: 160px;

        padding:
            7px 8px;

        font-size: 10px;
    }

    #legend h4 {
        font-size: 11px;
    }

    .floating-panel {
        right: 10px;
        bottom: 12px;

        width:
            calc(100vw - 20px);

        max-width: 300px;

        max-height: 65vh;
    }

    .coordinate-panel {
        width:
            calc(100vw - 20px);
    }

    #networkStatus {
        bottom: 9px;

        font-size: 10px;
    }

    .leaflet-left {
        left: 8px !important;
    }

    .leaflet-right {
        right: 8px !important;
    }
}


/* ==================================================
   28. HP SANGAT KECIL
================================================== */

@media (max-width: 400px) {

    #sidePanel {
        width: 270px;
    }

    #sideToggle {
        width: 38px;
        height: 48px;
    }

    .floating-panel {
        width:
            calc(100vw - 16px);

        right: 8px;
        bottom: 8px;
    }

    #legend {
        min-width: 105px;
        max-width: 140px;

        font-size: 9px;
    }
}

/* ==================================================
   ATR/BPN COORDINATE POINTER
================================================== */

.atr-coordinate-pointer {
    background: transparent !important;
    border: none !important;
}


.atr-crosshair {
    position: relative;

    width: 32px;
    height: 32px;

    pointer-events: none;
}


/* garis vertikal */

.atr-cross-v {
    position: absolute;

    width: 2px;
    height: 32px;

    left: 15px;
    top: 0;

    background: #ff0000;
}


/* garis horizontal */

.atr-cross-h {
    position: absolute;

    width: 32px;
    height: 2px;

    left: 0;
    top: 15px;

    background: #ff0000;
}


/* titik tengah */

.atr-cross-center {
    position: absolute;

    width: 8px;
    height: 8px;

    left: 12px;
    top: 12px;

    border: 2px solid #ff0000;

    border-radius: 50%;

    background: #ffffff;

    box-sizing: border-box;
}

/* ==================================================
   ABEOJEMAP
   MODE TENTUKAN KOORDINAT
================================================== */

/* Normal */
#map {
    cursor: default;
}

/* Saat alat koordinat ON */
#map.coordinate-mode {
    cursor: crosshair !important;
}

/* Semua elemen Leaflet ikut crosshair */
#map.coordinate-mode .leaflet-container,
#map.coordinate-mode .leaflet-pane,
#map.coordinate-mode .leaflet-overlay-pane,
#map.coordinate-mode .leaflet-marker-pane {
    cursor: crosshair !important;
}

.leaflet-control{
    z-index:9999!important;
}

.leaflet-bar a{
    background:white!important;
    color:black!important;
}

.coordinate-active-map,
.coordinate-active-map *{
cursor:crosshair!important;
}


#coordinateBtn.active{
background:#198754!important;
color:white!important;
}

```css
/* ==================================================
   ABEOJEMAP
   MEASURE
   STYLE TAMBAHAN
================================================== */


/* ==================================================
   MEASURE PANEL
================================================== */

#measurePanel {
    min-width: 220px;
    max-width: 280px;
}


/* ==================================================
   MEASURE BUTTON
================================================== */

#sideMeasure {
    cursor: pointer;
}


/* ==================================================
   MEASURE PANEL ACTION
================================================== */

#measurePanel .panel-action {
    width: 100%;
    margin-bottom: 8px;
}


/* ==================================================
   MEASURE INFORMATION
================================================== */

#measurePanel small {
    display: block;

    line-height: 1.5;

    color: #666;

    padding: 4px 2px;
}


/* ==================================================
   MEASURE RESULT
================================================== */

.measure-result {
    position: absolute;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    z-index: 1000;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 8px;

    padding: 8px 14px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);

    font-size: 13px;

    font-weight: 600;

    pointer-events: none;
}


/* ==================================================
   MEASURE TOOL ACTIVE
================================================== */

#sideMeasure.active {
    background: rgba(0, 123, 255, 0.12);
}


/* ==================================================
   GEOMAN
================================================== */

.leaflet-pm-toolbar {
    z-index: 900 !important;
}


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

@media (max-width: 768px) {

    #measurePanel {

        min-width: 200px;

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

    }

}
```
```javascript
style: function () {

    return {

        /* WARNA WIUP GAYA MOMI */
        color: "#FF0000",
        weight: 1,
        opacity: 1,

        /* TANPA FILL */
        fillColor: "#FF0000",
        fillOpacity: 0

    };

}
```

const wiupLayer =
    L.esri.featureLayer({

        url: wiupURL,

        style: function () {

            return {

                color: "#FFD000",

                weight: 1.2,

                opacity: 1,

                fillColor: "#FFF200",

                fillOpacity: 0.28

            };

        }

    });


/* ==================================================
   BASEMAP SIDE PANEL
================================================== */

#basemapPanel {

    position: fixed;

    top: 70px;

    right: -320px;

    width: 300px;

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

    background: #ffffff;

    border-radius: 10px;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.25);

    z-index: 3000;

    transition:
        right 0.25s ease;

}


#basemapPanel.active {

    right: 15px;

}


#basemapPanel .side-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 15px;

    border-bottom:
        1px solid #ddd;

}


#basemapPanel .side-panel-body {

    padding: 15px;

}


#basemapPanel label {

    display: block;

    padding: 9px 5px;

    cursor: pointer;

}


#basemapPanel label:hover {

    background: #f2f2f2;

    border-radius: 6px;

}


#closeBasemapPanel {

    border: none;

    background: transparent;

    font-size: 18px;

    cursor: pointer;

}


#ajBasemapPanel {

    position: fixed;

    top: 80px;

    right: 20px;

    width: 300px;

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

    background: #fff;

    border-radius: 10px;

    box-shadow:
        0 5px 25px rgba(0,0,0,.30);

    z-index: 5000;

    display: none;

}


#ajBasemapPanel.show {

    display: block;

}


#ajBasemapPanel label {

    display: block;

    padding: 10px;

    cursor: pointer;

    border-radius: 6px;

}


#ajBasemapPanel label:hover {

    background: #f1f1f1;

}


.abejo-measure-result {
    background: white;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    font-size: 13px;
    min-width: 180px;
}

.abejo-measure-result button {
    border: 0;
    background: #dc3545;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.measure-btn {
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: #198754;
    color: white;
    cursor: pointer;
}

.measure-btn:hover {
    opacity: 0.9;
}

.measure-btn.danger {
    background: #dc3545;
}

.abejo-measure-result {
    background: white;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    font-size: 13px;
    min-width: 190px;
    z-index: 99999;
}


/* ==========================================
   ADMIN PANEL
========================================== */

#adminPanel.admin-panel {

    position: fixed;

    top: 90px;
    right: 30px;

    width: 340px;
    max-width: calc(100vw - 40px);

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.30);

    z-index: 99999;

    pointer-events: auto;

}


#adminPanel.admin-panel[hidden] {

    display: none !important;

}


#adminPanel.admin-panel.show {

    display: block !important;

}


#adminPanel .panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 16px;

}


#adminPanel .close-panel {

    border: none;

    background: transparent;

    font-size: 25px;

    cursor: pointer;

}


#adminPanel .panel-action {

    display: block;

    width: calc(100% - 30px);

    margin: 10px 15px;

    padding: 11px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

}

/* =========================================================
   ABEOJEMAP — MODERN SIDEBAR MENU
========================================================= */

.side-menu {
    padding: 14px 12px 18px;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.aj-menu-btn {

    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;

    margin-bottom: 8px;
    padding: 0 14px;

    border: 1px solid rgba(0,0,0,.07);
    border-radius: 13px;

    background: rgba(255,255,255,.92);

    color: #30343b;

    cursor: pointer;

    text-align: left;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* =========================================================
   ICON
========================================================= */

.aj-menu-icon {

    width: 34px;
    height: 34px;

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

    margin-right: 12px;

    border-radius: 10px;

    background: #f1f4f6;

    color: #56616b;

    font-size: 18px;
    font-weight: 600;

    flex-shrink: 0;

    transition:
        background .18s ease,
        color .18s ease;
}


/* =========================================================
   TEXT
========================================================= */

.aj-menu-text {

    flex: 1;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: .1px;
}


/* =========================================================
   ARROW
========================================================= */

.aj-menu-arrow {

    font-size: 21px;

    color: #a4abb1;

    transition:
        transform .18s ease,
        color .18s ease;
}


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

.aj-menu-btn:hover {

    background: #f8fafb;

    border-color: rgba(25,135,84,.25);

    box-shadow:
        0 5px 16px rgba(0,0,0,.07);

    transform: translateX(2px);
}


.aj-menu-btn:hover .aj-menu-icon {

    background: #e8f5ee;

    color: #198754;
}


.aj-menu-btn:hover .aj-menu-arrow {

    color: #198754;

    transform: translateX(3px);
}


/* =========================================================
   ACTIVE / CLICK
========================================================= */

.aj-menu-btn:active {

    transform: scale(.985);
}


/* =========================================================
   FOCUS
========================================================= */

.aj-menu-btn:focus {

    outline: none;
}


.aj-menu-btn:focus-visible {

    box-shadow:
        0 0 0 3px rgba(25,135,84,.16);
}


/* =========================================================
   DIVIDER
========================================================= */

.aj-menu-divider {

    height: 1px;

    margin: 14px 8px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(0,0,0,.12),
            transparent
        );
}


/* =========================================================
   ADMIN
========================================================= */

.aj-admin-btn {

    background:
        linear-gradient(
            135deg,
            #fafafa,
            #f3f4f5
        );

    border-color: rgba(80,80,80,.10);
}


.aj-admin-btn .aj-menu-icon {

    background: #eceff1;

    color: #555;
}


.aj-admin-btn:hover {

    border-color: rgba(80,80,80,.25);

    background: #f7f7f7;
}


.aj-admin-btn:hover .aj-menu-icon {

    background: #e5e5e5;

    color: #333;
}


.aj-admin-btn:hover .aj-menu-arrow {

    color: #444;
}


/* =========================================================
   SIDEBAR HEADER
========================================================= */

.side-header {

    height: 66px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background:
        linear-gradient(
            135deg,
            #20252a,
            #292f35
        );

    color: white;
}


.side-header strong {

    flex: 1;

    font-size: 16px;
    font-weight: 600;

    letter-spacing: .2px;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.side-close {

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.10);

    color: white;

    font-size: 20px;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}


.side-close:hover {

    background: rgba(255,255,255,.20);

    transform: rotate(90deg);
}


/* =========================================================
   INFO
========================================================= */

.side-section {

    margin: 8px 18px 20px;

    padding-top: 14px;

    border-top: 1px solid rgba(0,0,0,.08);
}


.side-section-title {

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #8a9299;
}


.side-info {

    font-size: 12px;

    line-height: 1.65;

    color: #6d747b;
}

/* =========================================================
   ADMIN PANEL
========================================================= */

#adminPanel {
    z-index: 10050;
    pointer-events: auto;
}


/* PANEL TERBUKA */

#adminPanel.show,
#adminPanel.active {
    display: block;
    pointer-events: auto;
}


/* TOMBOL X */

#closeAdminPanel {
    position: absolute;
    right: 10px;
    top: 8px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: #f1f1f1;

    font-size: 22px;
    line-height: 30px;

    cursor: pointer;

    z-index: 10060;

    pointer-events: auto;
}


#closeAdminPanel:hover {
    background: #e5e5e5;
}

/* =========================================================
   ABEOJEMAP
   SINGLE LOGO MENU
   BOTTOM LEFT
========================================================= */

#ajMenu {

    position: fixed;

    left: 14px;
    bottom: 14px;

    z-index: 6000;

    display: flex;

    align-items: center;

    gap: 7px;

}


/* =========================================================
   LOGO UTAMA
========================================================= */

#ajMenuToggle {

    width: 48px;
    height: 48px;

    padding: 4px;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 13px;

    background: rgba(20,25,32,.94);

    display: flex;

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

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,.30);

    transition:
        transform .2s ease,
        background .2s ease;

}


/* LOGO */

#ajMenuToggle img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 9px;

    display: block;

}


/* HOVER */

#ajMenuToggle:hover {

    transform: scale(1.05);

    background:
        rgba(35,42,51,.98);

}


/* =========================================================
   MENU SEKUNDER
========================================================= */

#ajMenuItems {

    display: flex;

    align-items: center;

    gap: 5px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-18px)
        scale(.96);

    transform-origin: left center;

    transition:
        opacity .18s ease,
        transform .22s ease,
        visibility .18s ease;

}


/* =========================================================
   MENU TERBUKA
========================================================= */

#ajMenu.open #ajMenuItems {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);

}


/* =========================================================
   ICON MENU
========================================================= */

.aj-menu-item {

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.13);

    border-radius: 11px;

    background:
        rgba(20,25,32,.94);

    color: #fff;

    display: flex;

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

    cursor: pointer;

    box-shadow:
        0 4px 14px rgba(0,0,0,.22);

    transition:
        transform .15s ease,
        background .15s ease;

}


.aj-menu-item:hover {

    background:
        rgba(48,58,69,.98);

    transform:
        translateY(-3px);

}


.aj-menu-item span {

    font-size: 17px;

    line-height: 1;

}


/* =========================================================
   ADMIN
========================================================= */

.aj-menu-admin {

    color: #e5c66b;

}


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

.aj-menu-item::after {

    content:
        attr(data-tooltip);

    position: absolute;

    bottom: 58px;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(5px);

    white-space: nowrap;

    padding: 5px 8px;

    border-radius: 6px;

    background:
        rgba(15,19,24,.96);

    color: #fff;

    font-size: 11px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        .15s ease;

}


.aj-menu-item:hover::after {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}


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

@media (max-width: 768px) {

    #ajMenu {

        left: 10px;
        bottom: 10px;

        gap: 5px;

    }


    #ajMenuToggle {

        width: 44px;
        height: 44px;

    }


    .aj-menu-item {

        width: 36px;
        height: 36px;

        border-radius: 9px;

    }


    .aj-menu-item span {

        font-size: 15px;

    }

}

/* ==================================================
   COORDINATE TOOL
================================================== */

#map.coordinate-active {
    cursor: crosshair !important;
}

#map.coordinate-active .leaflet-interactive {
    cursor: crosshair !important;
}

#coordinateStartBtn.active {
    background: #dc3545;
    color: #fff;
}

.coordinate-message {
    transition: opacity 0.2s ease;
}

/* ==================================================
   ABEOJEMAP
   MODERN COORDINATE PANEL
================================================== */

#coordinatePanel {
    width: 340px;
    max-width: calc(100vw - 32px);

    background: rgba(255, 255, 255, 0.97);

    border-radius: 18px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);

    overflow: hidden;

    backdrop-filter: blur(10px);
}


/* ==================================================
   HEADER
================================================== */

#coordinatePanel .panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 16px;

    background: linear-gradient(
        135deg,
        #e6053e,
        #c1214a
    );

    color: white;

    border: 0;

}


#coordinatePanel .panel-header strong {

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.2px;

}


/* ==================================================
   CLOSE
================================================== */

#coordinatePanel .close-panel {

    width: 30px;
    height: 30px;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);

    color: white;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


#coordinatePanel .close-panel:hover {

    background:
        rgba(255,255,255,0.25);

    transform:
        rotate(90deg);

}


/* ==================================================
   BODY
================================================== */

#coordinatePanel .panel-body {

    padding: 16px;

}


/* ==================================================
   MAIN BUTTON
================================================== */

#coordinateStartBtn {

    width: 100%;

    min-height: 44px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: white;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 5px 12px
        rgba(37, 99, 235, 0.25);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


#coordinateStartBtn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(37, 99, 235, 0.32);

}


#coordinateStartBtn:active {

    transform:
        translateY(0);

}


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

#coordinateStartBtn.active {

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        );

    box-shadow:
        0 5px 12px
        rgba(239, 68, 68, 0.25);

}


/* ==================================================
   LABEL
================================================== */

#coordinatePanel .panel-body label {

    display: block;

    margin-top: 14px;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;

    color: #6b7280;

}


/* ==================================================
   INPUT
================================================== */

#coordinatePanel input {

    width: 100%;

    height: 42px;

    box-sizing: border-box;

    padding:
        0 12px;

    border:
        1px solid #e5e7eb;

    border-radius: 10px;

    background:
        #f8fafc;

    color:
        #111827;

    font-size:
        14px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    outline:
        none;

    transition:
        border 0.2s ease,
        background 0.2s ease;

}


#coordinatePanel input:focus {

    border-color:
        #2563eb;

    background:
        white;

}


/* ==================================================
   COORDINATE ACTIONS
================================================== */

#coordinatePanel .coordinate-actions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 14px;

}


/* ==================================================
   ACTION BUTTON
================================================== */

#coordinatePanel
.panel-action {

    min-height: 40px;

    border: 0;

    border-radius: 10px;

    background:
        #f1f5f9;

    color:
        #334155;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;

}


#coordinatePanel
.panel-action:hover {

    background:
        #e2e8f0;

    transform:
        translateY(-1px);

}


/* ==================================================
   COPY
================================================== */

#coordinateCopyBtn {

    background:
        #eff6ff !important;

    color:
        #1d4ed8 !important;

}


/* ==================================================
   CLEAR
================================================== */

#coordinateClearBtn {

    background:
        #fef2f2 !important;

    color:
        #dc2626 !important;

}


/* ==================================================
   MESSAGE
================================================== */

#coordinatePanel
.coordinate-message {

    margin-top:
        10px !important;

    padding:
        9px 10px !important;

    border-radius:
        9px !important;

    background:
        #ecfdf5 !important;

    color:
        #047857 !important;

    font-size:
        12px !important;

    font-weight:
        500;

}


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

@media (max-width: 600px) {

    #coordinatePanel {

        width:
            calc(100vw - 24px);

        max-width:
            none;

        border-radius:
            16px;

    }

    #coordinatePanel .panel-body {

        padding:
            14px;

    }

}

/* ==================================================
   ABEOJEMAP
   MODERN MEASURE PANEL
================================================== */

#measurePanel {
    width: 340px;
    max-width: calc(100vw - 32px);

    background: rgba(255, 255, 255, 0.97);

    border-radius: 18px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);

    overflow: hidden;

    backdrop-filter: blur(10px);
}


/* ==================================================
   HEADER
================================================== */

#measurePanel .panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 16px;

    background:
        linear-gradient(
            135deg,
            #f07609,
            #fb8663
        );

    color: white;

    border: 0;
}


#measurePanel .panel-header strong {

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.2px;
}


/* ==================================================
   CLOSE BUTTON
================================================== */

#measurePanel .close-panel {

    width: 30px;
    height: 30px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.12);

    color: white;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


#measurePanel .close-panel:hover {

    background:
        rgba(255,255,255,0.25);

    transform:
        rotate(90deg);
}


/* ==================================================
   BODY
================================================== */

#measurePanel .panel-body {

    padding: 16px;
}


/* ==================================================
   MEASURE BUTTONS
================================================== */

#measurePanel .panel-action {

    width: 100%;

    min-height: 44px;

    margin-bottom: 9px;

    border: 0;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.2s ease;
}


/* ==================================================
   DISTANCE
================================================== */

#measureDistanceBtn {

    background:
        linear-gradient(
            135deg,
            #de3785,
            #ed378c
        );

    color: white;

    box-shadow:
        0 5px 12px
        rgba(37, 99, 235, 0.22);
}


#measureDistanceBtn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(37, 99, 235, 0.30);
}


/* ==================================================
   AREA
================================================== */

#measureAreaBtn {

    background:
        linear-gradient(
            135deg,
            #0ba6e6,
            #219cc1
        );

    color: white;

    box-shadow:
        0 5px 12px
        rgba(5, 150, 105, 0.22);
}


#measureAreaBtn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(5, 150, 105, 0.30);
}


/* ==================================================
   CLEAR
================================================== */

#measureClearBtn {

    margin-top: 3px;

    margin-bottom: 0;

    background:
        #fef2f2 !important;

    color:
        #dc2626 !important;

    border:
        1px solid #fecaca !important;

    box-shadow: none !important;
}


#measureClearBtn:hover {

    background:
        #fee2e2 !important;

    transform:
        translateY(-1px);
}


/* ==================================================
   ACTIVE STATE
================================================== */

#measurePanel
.panel-action.active {

    transform:
        scale(0.98);

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,0.45);
}


/* ==================================================
   INFO / RESULT AREA
   jika nanti measure.js menambahkan hasil
================================================== */

#measurePanel .measure-result {

    margin-top: 12px;

    padding: 12px;

    border-radius: 11px;

    background:
        #219cc1;

    border:
        1px solid #e5e7eb;

    color:
        #219cc1;

    font-size: 13px;

    line-height: 1.6;
}


#measurePanel .measure-result strong {

    color:
        #111827;
}


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

@media (max-width: 600px) {

    #measurePanel {

        width:
            calc(100vw - 24px);

        max-width:
            none;

        border-radius:
            16px;
    }

    #measurePanel .panel-body {

        padding:
            14px;
    }

    #measurePanel .panel-action {

        min-height:
            46px;
    }

}	


/* ==================================================
   ABEOJEMAP MEASURE RESULT
================================================== */

.abejo-measure-tooltip {

    background:
        rgba(17, 24, 39, 0.95) !important;

    border:
        none !important;

    border-radius:
        9px !important;

    color:
        white !important;

    padding:
        8px 11px !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,0.22) !important;

}


.abejo-measure-tooltip strong {

    color:
        #ffffff !important;

}


/* ==================================================
   ABEOJEMAP ADMIN STATUS
================================================== */

#adminPanel .panel-body {
    padding: 16px;
}


#adminStatus {

    margin-bottom: 14px;

    padding: 12px 14px;

    border-radius: 10px;

    background:
        #f8fafc;

    border:
        1px solid #e2e8f0;

    font-size:
        13px;

    color:
        #475569;
}


/* ADMIN AKTIF */

body.abejo-admin-active
#adminStatus {

    background:
        #f0fdf4;

    border-color:
        #bbf7d0;

}


/* TOMBOL ADMIN */

#adminEnableBtn {

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #15803d
        );

    color:
        white;
}


#adminDisableBtn {

    background:
        #fef2f2;

    color:
        #dc2626;

    border:
        1px solid #fecaca;
}

/* =========================================================
   ABEOJEMAP
   NORTH INDICATOR
   KANAN ATAS MAP
========================================================= */

#abeJoeNorth {

    position: absolute;

    top: 65px;
    right: 22px;

    width: 115px;
    height: 115px;

    z-index: 1000;

    pointer-events: none;

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

}







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

@media (max-width: 767px) {

    #abeJoeNorth {

        top: 58px;
        right: 12px;

        width: 78px;
        height: 78px;

    }

}

/* ==================================================
   ABEOJEMAP - MOBILE ANDROID
   FINAL MOBILE FIX
================================================== */

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

    /* ------------------------------------------
       MAP
    ------------------------------------------ */

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

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


    /* ------------------------------------------
       FLOATING MENU UTAMA
       NAIK DARI BAWAH
    ------------------------------------------ */

    #ajMenu {
        position: fixed !important;

        left: 14px !important;
        bottom: calc(
            70px + env(safe-area-inset-bottom)
        ) !important;

        z-index: 5000 !important;

        display: flex;
        flex-direction: column;
        align-items: center;

        pointer-events: auto;
    }


    /* ------------------------------------------
       TOMBOL MENU UTAMA
    ------------------------------------------ */

    #ajMenuToggle {

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        min-height: 52px !important;

        padding: 0 !important;

        border-radius: 50% !important;

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

        touch-action: manipulation;

        -webkit-tap-highlight-color: transparent;

        box-shadow:
            0 4px 12px rgba(0,0,0,.35);

        z-index: 5002 !important;
    }


    #ajMenuToggle img {

        width: 100% !important;
        height: 100% !important;

        object-fit: contain;

        border-radius: 50%;
    }


    /* ------------------------------------------
       MENU ITEMS
    ------------------------------------------ */

    #ajMenuItems {

        max-height:
            calc(
                100dvh -
                170px -
                env(safe-area-inset-bottom)
            );

        overflow-y: auto;
        overflow-x: hidden;

        scrollbar-width: none;

        margin-bottom: 8px !important;

        gap: 7px !important;

        z-index: 5001 !important;
    }


    #ajMenuItems::-webkit-scrollbar {
        display: none;
    }


    /* ------------------------------------------
       TOMBOL MENU
    ------------------------------------------ */

    #ajMenuItems .aj-menu-item {

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        display: flex !important;

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

        font-size: 20px !important;

        touch-action: manipulation;

        -webkit-tap-highlight-color: transparent;

        box-shadow:
            0 3px 9px rgba(0,0,0,.30);
    }


    /* ------------------------------------------
       PANEL MOBILE
    ------------------------------------------ */

    .floating-panel {

        position: fixed !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        max-width: none !important;

        max-height:
            calc(
                100dvh -
                100px -
                env(safe-area-inset-bottom)
            ) !important;

        overflow-y: auto;

        border-radius: 16px !important;

        z-index: 6000 !important;
    }


    /* ------------------------------------------
       PANEL HEADER
    ------------------------------------------ */

    .panel-header {

        min-height: 50px;

        padding:
            10px 12px !important;

        font-size: 15px;
    }


    /* ------------------------------------------
       TOMBOL PANEL
    ------------------------------------------ */

    .panel-action {

        min-height: 48px !important;

        width: 100% !important;

        margin-bottom: 8px;

        font-size: 14px !important;

        touch-action: manipulation;
    }


    /* ------------------------------------------
       LEGEND
    ------------------------------------------ */

    #legend {

        left: 10px !important;
        top: 10px !important;

        max-width: 145px !important;

        max-height: 150px !important;

        overflow-y: auto;

        font-size: 11px !important;

        z-index: 4000 !important;
    }


    #legend h4 {

        font-size: 13px !important;

        margin-bottom: 5px !important;
    }


 

    /* ------------------------------------------
       LEAFLET CONTROLS
    ------------------------------------------ */

    .leaflet-control {

        margin-bottom:
            8px !important;
    }


    .leaflet-control-zoom a {

        width: 36px !important;
        height: 36px !important;

        line-height: 36px !important;

        font-size: 20px !important;
    }


    /* ------------------------------------------
       NETWORK STATUS
    ------------------------------------------ */

    #networkStatus {

        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            ) !important;

        font-size: 10px !important;
    }

}


/* ==================================================
   ANDROID PHONE KECIL
================================================== */

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

    #ajMenu {

        left: 10px !important;

        bottom:
            calc(
                65px +
                env(safe-area-inset-bottom)
            ) !important;
    }


    #ajMenuToggle {

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;
    }


    #ajMenuItems .aj-menu-item {

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        font-size: 18px !important;
    }


    #legend {

        max-width: 135px !important;

        font-size: 10px !important;
    }


    #abeJoeNorth img {

        max-width: 65px !important;
        max-height: 65px !important;
    }

}

```css
/* ==========================================================
   ABEOJEMAP MEASURE RESULT
========================================================== */

.abejo-measure-tooltip {
    background: #ffffff;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    color: #111;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.abejo-measure-tooltip::before {
    display: none;
}

.abejo-measure-result {
    min-width: 110px;
    text-align: center;
    line-height: 1.5;
}

.abejo-measure-result hr {
    margin: 5px 0;
    border: 0;
    border-top: 1px solid #ccc;
}

.measure-value {
    font-size: 18px;
    font-weight: 700;
}
```
.floating-panel {
  position: fixed;
  z-index: 9999 !important;
  background: rgba(255,255,255,0.95);
  pointer-events: auto !important;
}
#map.panel-active {
  pointer-events: none !important;
}

.panel-logo img {
    max-width: 80px;
    margin: 10px auto;
    display: block;
}