@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
    --color-white: #ffffff;
    --color-green: #009688;
    --color-green-dark: #007a70;
    --color-orange: #f15a24;
    --color-blue: #00a2ce;
    --v2-text: #143039;
    --v2-muted: #59717a;
    --v2-border: #dbe5e8;
    --v2-surface: #f7fbfc;
    --v2-elevated: #ffffff;
    --v2-hover: #edf6f7;
    --v2-active: #e0f0f2;
    --v2-shadow: 0 10px 30px rgba(14, 46, 56, 0.08);
    --header-height: 70px;
    --inner-navbar-height: 70px;
    --sidebar-width: 340px;
    --sidebar-width-max: 380px;
    --sidebar-layout-width: max(var(--sidebar-width-max), var(--sidebar-width));
}

.only-v2 {
    display: none;
}

body.ui-v2-active {
    color: var(--v2-text);
    background: #edf3f5;
}

body.ui-v2-active div,
body.ui-v2-active span,
body.ui-v2-active a,
body.ui-v2-active button,
body.ui-v2-active input {
    font-family: "DM Sans", "Nunito", sans-serif;
}

body.ui-v2-active .only-v2 {
    display: initial;
}

body.ui-v2-active .not-v2 {
    display: none;
}

/* Header and top navigation */
body.ui-v2-active .navbar-custom {
    height: var(--header-height);
    border-bottom: 1px solid var(--v2-border);
    background-color: var(--color-white);
    box-shadow: 0 1px 0 rgba(20, 48, 57, 0.04);
}

body.ui-v2-active .navbar-custom .navbar-brand img {
    height: 50px;
}

body.ui-v2-active .icon-navbar span,
body.ui-v2-active .navbar-custom a {
    color: var(--color-green);
    font-size: 14px;
    font-weight: 600;
}

body.ui-v2-active .icon-navbar a {
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.ui-v2-active .icon-navbar a:hover,
body.ui-v2-active .icon-navbar a:focus-visible {
    background: var(--v2-hover);
    color: #0a6e76;
    outline: none;
    padding: 10px
}

body.ui-v2-active #versionToggleButton {
    border: 1px solid transparent;
}

body.ui-v2-active #versionToggleButton:hover,
body.ui-v2-active #versionToggleButton:focus-visible {
    border-color: #c8d9de;
}

/* Main map and inner bar layout */
body.ui-v2-active .map-canvas {
    position: absolute;
    top: var(--header-height);
    bottom: 0;
    right: 0;
    width: calc(100% - var(--sidebar-layout-width));
}

body.ui-v2-active .inner-navbar-custom {
    top: var(--header-height);
    border-bottom: 1px solid #e4edf0;
    background-color: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /*! height: 60px; */
}

body.ui-v2-active .inner-navbar-custom .map-details {
    left: var(--sidebar-layout-width);
    width: calc(100% - var(--sidebar-layout-width));
    /*! height: 50px; */
}

body.ui-v2-active .map-tools a {
    border-radius: 10px;
    padding: 2px 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.ui-v2-active .map-tools a:hover,
body.ui-v2-active .map-tools a:focus-visible {
    background: #ebf4f6;
    color: #0b6f77;
    outline: none;
}

/* Sidebar and layered panels */
body.ui-v2-active .sidebar-custom,
body.ui-v2-active .sidebar-custom-black,
body.ui-v2-active .items-section,
body.ui-v2-active .float-sidebar,
body.ui-v2-active .float-sidebar-header {
    width: var(--sidebar-layout-width);
    min-width: var(--sidebar-width);
}

body.ui-v2-active .sidebar-custom {
    background: var(--v2-surface);
    border-right: 1px solid var(--v2-border);
    box-shadow: var(--v2-shadow);
    top: var(--header-height);
    height: calc(100dvh - var(--header-height) - var(--inner-navbar-height));
}

body.ui-v2-active .sidebar-custom-black {
    top: initial;
    font-size: 13px;
}

body.ui-v2-active .drag-drop-header{
background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-dark) 100%);
}

body.ui-v2-active .list_section {
    margin-top: 12px;
}

body.ui-v2-active .items-section,
body.ui-v2-active .list-box-maps {
    background: linear-gradient(180deg, #0b6d75 0%, #085d66 100%);
}

body.ui-v2-active .items-section-showing {
    left: var(--sidebar-layout-width) !important; 
    top:var(--header-height);
    
}

body.ui-v2-active .list-maps-showing {
    /*left: var(--sidebar-layout-width) !important;*/
    background: var(--color-green);
}

body.ui-v2-active .float-sidebar {
    top: var(--header-height);
    background: #fff;
    box-shadow: var(--v2-shadow);
}

body.ui-v2-active .float-sidebar-header {
    background: #f2f8f9;
    border-bottom: 1px solid var(--v2-border);
}

/* Sidebar navigation density and hierarchy */
body.ui-v2-active .ul-list-custom .nav-item {
    text-transform: none;
    background: var(--v2-elevated);
    margin: 4px 6px 0 !important;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
padding:10px;
}

body.ui-v2-active .ul-list-custom .standard-item {
    min-height: 40px;
}

body.ui-v2-active .ul-list-custom .standard-item:hover,
body.ui-v2-active .ul-list-custom .sub-item:hover {
    background-color: var(--v2-hover);
    border-color: #c9dde2;
}

body.ui-v2-active .ul-list-custom .standard-item.active,
body.ui-v2-active .ul-list-custom .sub-item.active {
    background-color: var(--v2-active);
    border-color: #b2d3d8;
  
}

body.ui-v2-active .ul-list-custom a {
    color: #3f5e68;
    font-size: 13px;
    text-decoration: none;
    
}

body.ui-v2-active .ul-list-custom a:focus-visible {
    outline: 2px solid #8bc6ce;
    outline-offset: 2px;
}

body.ui-v2-active .sidebar-icon {
    height: 25px;
    opacity: 0.75;
    filter: grayscale(100%);
}

body.ui-v2-active .list-box-maps .nav-item {
    background: transparent;
    border-color: transparent;
    margin: 1px 6px !important;
    border-radius: 8px;
}

body.ui-v2-active .list-box-maps .nav-item:hover {
    background: rgba(255, 255, 255, 0.13);
}

body.ui-v2-active .ul-maps .title .map-name-on,
body.ui-v2-active .ul-maps li:has(.map-name-on) {
    color: var(--color-orange);
    font-weight: 700;
    background: #FFF; border-radius: 5px;
    display: flex;
}


body.ui-v2-active .ul-maps li:has(.map-name-on) .map-list-icon{
    filter: invert(1)
}

body.ui-v2-active .ul-maps .title .fa-check-square-o,
body.ui-v2-active .ul-maps a li .fa-check-square-o {
    color: var(--color-orange);
}

/* Search area */
body.ui-v2-active #search {
    position: relative;
    padding-top: 16px;
    margin: 0 14px;
}

body.ui-v2-active #search-input {
    color: #14535b;
    background: #fff;
    border: 1px solid #d5e3e7;
}

body.ui-v2-active #search *,
body.ui-v2-active #search-input::placeholder {
    color: #3f7379;
}

body.ui-v2-active #search .search-label,
body.ui-v2-active #search .close-label {
    top: 24px;
}

body.ui-v2-active .green-search:focus {
    border-color: #8ec5cd;
    box-shadow: 0 0 0 0.2rem rgba(0, 150, 136, 0.16);
}

body.ui-v2-active .search-result-box {
    background: linear-gradient(180deg, #11818f 0%, #0a6672 100%);
    /*! margin-top: 12px; */
    border-radius: 10px 10px 0px 0px;
    overflow: auto;
    bottom: 0;
}

body.ui-v2-active .search-result-box .nav-item {
    color: var(--color-white);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    padding: 10px;
    border-radius: 6px;
    margin: 4px 8px;
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
}

/* Map controls and legend polish */
body.ui-v2-active .legend {
    box-shadow: none !important;
}

body.ui-v2-active .legend .card {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
}

body.ui-v2-active .legend .card,
body.ui-v2-active .leaflet-control-layers,
body.ui-v2-active .leaflet-bar a {
    background-color: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.ui-v2-active .leaflet-left {
    left: 0;
}

body.ui-v2-active .leaflet-left .leaflet-control {
    margin-left: 12px;
}

body.ui-v2-active .edit-map-container .btn-primary {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.ul-maps .title .map-name-on, .ul-maps a li .map-name-on{
    color: var(--color-orange)
}

/* Responsive behavior */
@media (max-width: 900px) {
    body.ui-v2-active {
        --sidebar-width: 320px;
        --sidebar-layout-width: var(--sidebar-width);
    }

    body.ui-v2-active .map-canvas {
        width: calc(100% - var(--sidebar-width));
    }
}

@media (max-width: 667px) {
    body.ui-v2-active {
        --sidebar-width: min(92vw, 340px);
        --sidebar-layout-width: var(--sidebar-width);
    }

    body.ui-v2-active .navbar-custom {
        z-index: 1099;
    }

    body.ui-v2-active .map-canvas {
        top: var(--header-height);
        width: 100%;
    }

    body.ui-v2-active .inner-navbar-custom .map-details {
        left: 0;
        width: 100%;
    }

    body.ui-v2-active .sidebar-canvas {
        left: calc(-1 * var(--sidebar-width));
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
        transition: left 0.35s ease;
        z-index: 1100;
    }

    body.ui-v2-active .sidebar-canvas.on {
        left: 0;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    }

    body.ui-v2-active .sidebar-custom,
    body.ui-v2-active .sidebar-custom-black,
    body.ui-v2-active .items-section,
    body.ui-v2-active .float-sidebar,
    body.ui-v2-active .float-sidebar-header {
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
    }

    body.ui-v2-active .items-section-showing,
    body.ui-v2-active .list-maps-showing {
        left: 0 !important;
        z-index: 1098 !important;
    }

    body.ui-v2-active .leaflet-left {
        left: 0 !important;
        width: auto;
    }

    body.ui-v2-active .leaflet-left .leaflet-control {
        margin-left: 8px;
    }

    body.ui-v2-active .legend {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
}