:root {
    --bg: #f1f3f6;
    --card-radius: 8px
}

* {
    box-sizing: border-box
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    margin: 0
}

.col-md-2.d-flex.flex-column {
    height: 97vh
}

#menu-list {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 4px
}

.menu-header {
    cursor: pointer;
    padding: .3rem .5rem;
    border-bottom: 1px solid #e4e7eb;
    display: flex;
    align-items: center;
    gap: .4rem
}

.menu-header.has-children::after {
    content: "\25b8";
    font-size: .8rem;
    margin-left: auto;
    transition: transform .18s
}

.menu-header.active.has-children::after {
    transform: rotate(90deg)
}

.submenu-list {
    padding-left: 1rem;
    display: none;
    flex-direction: column
}

.submenu-list.show {
    display: flex
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding: .5rem;
    max-height: calc(97vh - .5rem);
    overflow: auto
}

.content>.col-card {
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 30%
}

.video-player,
iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: contain;
    object-fit: cover
}

.map-container {
    width: 100%;
    min-height: 150px;
    border-radius: 6px;
    overflow: hidden
}

.map-container .leaflet-container {
    height: 100% !important;
    min-height: 180px !important;
}

.leaflet-control-attribution {
    display: none !important
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px
}

.video-item {
    display: flex;
    flex-direction: column
}

.leaflet-popup-content-wrapper {
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 10px !important
}

.leaflet-popup-content {
    margin: 0 !important
}

.leaflet-popup-tip {
    display: none
}

.leaflet-container a.leaflet-popup-close-button {
    display: none !important
}

.popup-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: #222
}

.menu-header>span {
    cursor: pointer;
}

.full-map {
    height: 93vh;
}

.popup-wrapper {
    width: 350px;
    max-height: 280px;
    overflow: hidden;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}