*{box-sizing:border-box}
body { 
margin:0; 
font-family: Arial, 
sans-serif; 
display:flex; 
flex-direction:column; 
height:100vh; }

/* HEADER */
.header {
  height:60px;
  background:#0b3c5d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.logo-left img {
  height: 50px;   /* control size here */
  width: auto;    /* keeps aspect ratio */
  object-fit: contain;
  border-radius: 10px;
}

.nav a{
  color:#fff;
  text-decoration:none;
  margin-left:20px;
  font-weight:500;
  padding:5px 10px;
  border-radius:5px;
  transition:0.3s;
}

.nav a.active, .nav a:hover{
  background:#0e5581;
}

/* LAYOUT */
.app { 
        display:flex; 
        flex:1; 
        overflow:hidden;
 }

.sidebar-left { 
        width:250px; 
        background:#07293f; 
        color:white; 
        padding:15px; 
        display:flex; 
        flex-direction:column;
 }

/* FILTERS */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.filter-btn {
    background: #0b3c5d;
    color: #fff;
    border: 1px solid #176599;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.filter-btn.active, .filter-btn:hover {
    background: #176599;
    border-color: #2196f3;
}

/* LEGEND */
.legend { 
        flex:1; 
        overflow-y:auto; 
        margin-top:10px; 
}

ul#dynamicLegend {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legend-item {
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 4px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.legend-item:hover, .legend-item.active {
    background: #176599;
}

.sidebar-right { 
       width:300px; 
       background:#e2e2e2; 
       padding:15px; 
       font-family: montserrat, sans-serif;
       font-weight: 400;
       color: #0b3c5d;
       
}

h3{
   font-family: montserrat, sans-serif;
   font-weight: 600;
}
ol{
   line-height: 20px;
   font-family: montserrat, sans-serif;
   font-weight: 200;
}

.main { 
      flex:1; 
      position:relative; 
      overflow:hidden; 
}


.map-wrapper {
  
         width:100%;
         height:100%; 
         transform-origin: 0 0; 
         transition: transform 0.4s ease; 
         flex: 1;
         position: relative;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
  
}

.zoom-controls { 
       position:absolute; 
       bottom:20px; 
       right:20px; 
       display:flex; 
       flex-direction:column;     
 }

.zoom-controls button { 
       margin:5px; 
       padding:10px; 
       font-size:18px; 
       background: #0b3c5d;
       color: white;
       border-radius: 10px;
 }

.active-location polygon { 
       stroke:yellow; 
       stroke-width:3; 
       filter:drop-shadow(0 0 6px yellow);
    
  }

.map-interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-interactive:hover, .map-interactive.active {
    filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.8));
}

#tooltip { 
       position:absolute; 
       background:black; 
       color:white; 
       padding:5px 10px; 
       font-size:14px; 
       border-radius:4px; 
       pointer-events:none; 
       display:none;
  }

/* FOOTER */
.footer { height:40px; 
background:#0b3c5d; 
color:#fff; display:flex;
align-items:center; 
justify-content:center; 
font-size:12px; 
font-family: montserrat, sans-serif;
font-weight: 200;
}

/* MODAL */
.modal {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  animation: fadeIn 1s ease; 
}

.modal-content {
  background:#fff;
  padding:20px;
  width:400px;
  border-radius:10px;
  animation: slideUp 0.4s ease;
}

.close-btn {
  float:right;
  cursor:pointer;
  font-weight:bold;
}

@keyframes fadeIn {
  from {opacity:0}
  to {opacity:1}
}

@keyframes slideUp {
  from {transform:translateY(50px); opacity:0}
  to {transform:translateY(0); opacity:1}
}

#panBtn {
    position: absolute;
    bottom: 200px;
    right: 20px;
    padding: 10px;
    background: #0b3c5d;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#panBtn.active {
    background: #176599;
}

/* Cursor styles */
.pan-active {
    cursor: grab;
}

.pan-active:active {
    cursor: grabbing;
}

#panorama {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
}


.app {
  display: flex;
  height: calc(100vh - 70px);
}


@media (max-width: 768px) {
  .app {
    flex-direction: column-reverse;
  }

  .sidebar-left {
    width: 100%;
    height: 40vh;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
  }

  .sidebar-right {
    display: none;
  }

  .main {
    height: 60vh;
  }
}


button {
  padding: 10px 14px;
  font-size: 16px;
}