/* ==========================================
   RESET & MAP FULLSCREEN
   ========================================== */
body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
#map { height: 100vh; width: 100vw; z-index: 1; }

/* ==========================================
   TOP BAR (Search & Filter Chips)
   ========================================== */
.gm-top-bar {
    position: absolute; top: 15px; left: 15px; z-index: 1000;
    display: flex; align-items: center; gap: 15px;
    max-width: 95vw;
}

.gm-search-box {
    display: flex; align-items: center; background: white;
    border-radius: 24px; padding: 0 15px; height: 48px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); min-width: 320px;
}
.gm-menu-icon { font-size: 22px; cursor: pointer; margin-right: 15px; color: #5f6368; }
.gm-search-box input { border: none; outline: none; font-size: 15px; width: 100%; background: transparent; }
.gm-search-icon { cursor: pointer; color: #1a73e8; }

/* Horizontal Scroll for Filter Chips */
.gm-filter-chips {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    align-items: center; padding-right: 20px;
}
.gm-filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    background: white; border: 1px solid #dadce0; border-radius: 16px;
    padding: 0 16px; height: 36px; display: flex; align-items: center;
    font-size: 14px; font-weight: 500; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); white-space: nowrap; transition: 0.2s; color:#3c4043;
}
.filter-chip:hover { background: #f8f9fa; }
.filter-chip.active { background: #e8f0fe; color: #1a73e8; border-color: #1a73e8; }
.sensor-chip.active { background: #fef7e0; color: #b08d00; border-color: #f1c40f; }
.chip-divider { height: 24px; width: 1px; background: #dadce0; margin: 0 5px; }

/* ==========================================
   HIDDEN SIDEBAR MENU
   ========================================== */
.gm-sidebar {
    position: absolute; top: 0; left: -350px; width: 320px; height: 100vh;
    background: white; z-index: 2000; box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    transition: left 0.3s ease; padding: 20px; box-sizing: border-box;
    
    /* 🔑 Tambahkan konfigurasi flexbox ini agar logo menempel di bawah */
    display: flex;
    flex-direction: column;
}
.gm-sidebar.open { left: 0; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; }
.close-sidebar { font-size: 20px; cursor: pointer; color: #888; }
.sidebar-menu { list-style: none; padding: 0; margin: 15px 0; }
.sidebar-menu li { margin-bottom: 15px; }
.sidebar-menu a { text-decoration: none; color: #333; font-weight: 600; font-size: 15px; display: block; padding: 8px; border-radius: 8px; transition:0.2s;}
.sidebar-menu a:hover { color: #27ae60; background: #f4f6f9; }
.sidebar-coming-soon p { margin: 8px 0; font-size: 13px; color: #7f8c8d; font-weight:bold; }

/* ==========================================
   LEADERBOARD (Green Score)
   ========================================== */
.btn-leaderboard-toggle {
    position: absolute; bottom: 30px; left: 15px; z-index: 1000;
    background: white; border: none; border-radius: 24px;
    padding: 12px 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-weight: bold; font-size: 14px; color: #27ae60; cursor: pointer;
}
.btn-leaderboard-toggle:hover { background: #f1f8f4; }

.gm-leaderboard-panel {
    position: absolute; bottom: 80px; left: 15px; z-index: 1000;
    background: white; border-radius: 12px; width: 320px;
    max-height: 400px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none; padding: 15px; box-sizing: border-box;
}
.gm-leaderboard-panel.show { display: block; }

.skor-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; align-items: center; }
.skor-item:last-child { border-bottom: none; }

/* ANIMATION BLINKING */
@keyframes markerBlink {
    0% { filter: drop-shadow(0 0 2px red) hue-rotate(0deg); opacity: 1; }
    50% { filter: drop-shadow(0 0 15px yellow) hue-rotate(90deg); opacity: 0.3; }
    100% { filter: drop-shadow(0 0 2px red) hue-rotate(0deg); opacity: 1; }
}
.blinking-marker { animation: markerBlink 0.6s infinite alternate ease-in-out; z-index: 9999 !important; }

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .gm-top-bar { flex-direction: column; align-items: flex-start; left:10px; top:10px; width:calc(100% - 20px); }
    .gm-search-box { min-width: 100%; width: 100%; box-sizing: border-box; }
    .gm-filter-chips { width: 100%; padding-bottom: 5px; }
    .btn-leaderboard-toggle { bottom: 20px; left: 10px; }
    .gm-leaderboard-panel { bottom: 70px; left: 10px; width: calc(100vw - 20px); }
}