html, body {
  margin: 0;
  height: 100%;
  font-family: 'Inter', Arial, sans-serif;
}
/* ===== LOGIN MODAL ===== */

#loginModal {
  position: fixed; 
  inset: 0;
  /* Clean, light gray background to make the white box pop */
  background: #f9fafb; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

#loginBox {
  background: #ffffff;
  padding: 48px 40px;
  border-radius: 12px; /* Slightly sharper for a professional look */
  width: 380px;
  text-align: center;
  /* Defined border instead of heavy shadows for B&W theme */
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

#loginBox h2 {
  margin-bottom: 8px;
  font-weight: 700;
  color: #000000;
  font-size: 24px;
  letter-spacing: -0.025em;
}

#loginBox p {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 32px;
}

#loginBox .input-group {
  margin-bottom: 20px;
  text-align: left;
}

#loginBox label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

#loginBox input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 15px;
  color: #111827;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* Sharp focus state for B&W theme */
#loginBox input:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

#loginBox button {
  width: 100%;
  padding: 14px;
  border: 1px solid #000;
  background: #000000;
  color: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  transition: all 0.2s ease;
}

#loginBox button:hover {
  background: #ffffff;
  color: #000000;
}

#loginBox button:active {
  transform: scale(0.98);
}

/* Error styling: Kept minimal but distinct */
#loginBox .error {
  background: #000000;
  color: #ffffff;
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 20px;
  display: none;
  font-weight: 500;
}
.login-logo {
  font-size: 48px;
  margin-bottom: 16px;
  filter: grayscale(100%); /* Makes the emoji match your B&W theme */
  opacity: 0.9;
  transition: transform 0.3s ease;
  display: inline-block;
}

#loginBox:hover .login-logo {
  transform: rotate(15deg) scale(1.1); /* Subtle movement when they hover the box */
}
/* ===== STYLE ACTIVE BUTTON FOR CREATE FEATURE ===== */
#createFeature.active {
  background: #000;
  color: #fff;
}

/* Submenu buttons like Style submenu */
.submenu button {
    width: 100%;
    padding: 8px 12px;
    border: none;        /* remove default button border */
    background: none;    /* remove gray background */
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #000;         /* text color same as other menu items */
}

.submenu button:hover {
    background: #f0f0f0; /* light hover like other submenus */
}

/* ===== FUTURE DEVELOPMENT GROUPS ===== */
.future-group {
  margin-top: 6px;
  border-left: 3px solid #000;
  padding-left: 6px;
}

.legend-project-list {
  margin: 6px 0 0 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
}


.future-group-title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.future-sublayers {
  margin-top: 6px;
  padding-left: 10px;
  display: none;
}

.future-sub-item {
  margin-top: 6px;
}



/* ===== Layer Panel Style ===== */
.layer-section-tabs{
  display:flex;
  gap:6px;
}

/* Black & White Development Buttons - Selected Black, Non-selected White */
.section-btn {
  flex: 1;
  padding: 10px 15px;           
  border: 1px solid #000;        /* subtle border for white buttons */
  border-radius: 5px;           
  background: #fff;              /* non-selected = white */
  color: #000;                  
  font-size: 15px;              
  font-weight: 600;             
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}

.section-btn:hover {
  background: #f0f0f0;           /* light gray hover for white buttons */
}

.section-btn.active {
  background: #000;              /* active = black */
  color: #fff;                   /* text white */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* subtle shadow for selected */
  transform: scale(1.05);        /* slight grow for emphasis */
}


/* ===== LOGOUT & CHANGE PASSWORD ===== */

/* ===== USER PANEL NAVIGATION ===== */
#userPanel {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1000;
}

.nav-btn {
  background: #ffffff;
  color: #000000;
  border: 1px solid #e5e7eb;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
}

/* Hover effect: Subtle gray background */
.nav-btn:hover {
  background: #f9fafb;
  border-color: #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Logout Button: High Contrast */
.nav-btn.logout {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

.nav-btn.logout:hover {
  background: #333333;
  transform: translateY(-1px);
}

.nav-btn:active {
  transform: scale(0.97);
}





/* ===== 3. MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
  #layerPanel {
    width: 280px; max-height: 50%; bottom: 0; top: auto; /* Move to bottom on mobile */
    border-radius: 12px 12px 0 0;
  }
  #globalSearchBox {
    width: 90%; top: 60px; /* Move down below header */
  }
  #userPanel {
    top: 5px; right: 5px; padding: 4px 8px; flex-wrap: wrap; justify-content: flex-end;
  }
  
  /* Make table modal full screen on mobile */
  #tableBox { width: 95% !important; height: 80% !important; }
}

/* rest of your styles ... */
html,body{margin:0;height:100%;font-family:Arial, sans-serif}
#map{width:100%;height:100%}
#layerPanel{position:absolute; top:10px; left:10px; width:340px; background:#f8f9fa; padding:10px; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,.2); max-height:90%; overflow:auto; z-index:1000; display:flex; flex-direction:column; gap:8px;}
.layer-item{display:flex; flex-direction:column; padding:6px 8px; margin-bottom:6px; background:#fff; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:0.2s; cursor:grab;}
.layer-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.2);}
.layer-header{display:flex; align-items:center; justify-content:space-between;}
.layer-left{display:flex; align-items:center; gap:8px; flex:1;}
.layer-name{font-weight:600;font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.toggle-switch{position:relative; display:inline-block; width:36px; height:18px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.4s;border-radius:18px;}
.slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background:white;transition:.4s;border-radius:50%;}
input:checked + .slider{background:#000000;}
input:checked + .slider:before{transform:translateX(18px);}
.layer-menu{cursor:pointer;font-size:18px;color:#555;margin-left:5px;}
.layer-menu:hover{color:#000;}


/* ===== Basemap Panel (Integrated) ===== */
.basemap-card {
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.basemap-header {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.basemap-title {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}

#basemapSelect {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}


.menu-popup {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.menu-popup button {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submenu {
  position: absolute;
  gap: 2px;       /* adds spacing between buttons */
  min-width: 220px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  display: none;
  flex-direction: column;
  padding: 5px 0;
}

.menu-popup button:hover {
  background: #f0f0f0;
}
.submenu div label {
  font-size: 13px;      /* match CSV/Excel buttons */
  font-weight: 500;     /* optional, adjust to match */
  margin: 0;
}

.submenu input,
.submenu select {
  font-size: 13px;      /* match buttons */
  padding: 4px 6px;     /* make input height similar to buttons */
}


.submenu label,.submenu select,.submenu input{width:90%; margin:5px 5%; display:block;}
.ol-popup{background:#fff; padding:10px; border-radius:6px; border:1px solid #ccc;  min-width: 300px;
  max-width: 320px; /* Prevent it from getting too wide */
  max-height: 400px; /* Limit height */
  display: flex; flex-direction: column;}

  .popup-content-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 300px; /* Scroll after 300px */
  padding-right: 5px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}
.popup-footer {
  display: flex; gap: 8px; justify-content: flex-end; padding-top: 5px;
}


.popup-btn {
  padding: 6px 12px; border: none; border-radius: 4px; 
  cursor: pointer; font-size: 12px; font-weight: 600; 
  display: flex; align-items: center; gap: 5px;
  transition: 0.2s;
}

.btn-edit { background: #3498db; color: white; }
.btn-edit:hover { background: #2980b9; }

.btn-street { background: #f1c40f; color: #333; }
.btn-street:hover { background: #d4ac0d; }

.btn-link { background: #2ecc71; color: white; text-decoration: none; padding: 4px 8px; border-radius: 4px; font-size: 11px;}
/* Style the scrollbar to be subtle */
.popup-content-scroll::-webkit-scrollbar { width: 6px; }
.popup-content-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }


.popup-table{width:100%; border-collapse:collapse;}
.popup-table td{padding:6px; border-bottom:1px solid #eee;}
.popup-table tr:nth-child(even){background:#f6f6f6;}
#tableModal{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:10000;}
#tableBox{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:75%; height:65%; background:#fff; border-radius:8px; display:flex; flex-direction:column;}
#tableHeader{background:#000000; color:#fff; padding:10px; display:flex; justify-content:space-between; align-items:center;}
#tableSearch{width:300px; padding:6px;}
#tableContent{flex:1; overflow:auto; padding:10px;}
#tableFooter{padding:6px; font-size:13px; background:#f0f0f0;}
table{width:100%; border-collapse:collapse;}
th,td{border:1px solid #ddd; padding:6px; font-size:13px;}
tr:nth-child(even){background:#f5f5f5;}
tr:hover{background:#dfefff; cursor:pointer;}
.open-link-btn{padding:2px 6px; font-size:12px; cursor:pointer; background:#3498db; color:#fff; border:none; border-radius:4px;}
#globalSearchBox {position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: min(90%, 480px); background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 1000; font-size: 14px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px;}
#globalSearchInput {width: 100%; padding: 10px; border: none; border-radius: 8px; font-size: 16px; outline: none; box-sizing: border-box;}
#globalSearchResults {max-height: 300px; overflow-y: auto;}
.search-item{padding:8px; cursor:pointer; font-size:13px; border-bottom:1px solid #eee;}
.search-item:hover{background:#e6f2ff;}
.ol-zoom-bottom-right {top: auto !important; bottom: 10px !important; left: auto !important; right: 10px !important;}
.ol-zoom-bottom-right button {width: 32px; height: 32px;}

/* ===== LEGEND PANEL ===== */
#legendPanel {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 260px;
  max-height: 80%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  padding: 8px;
  overflow-y: auto;       /* allow vertical scroll if needed */
  overflow-x: hidden;     /* prevent horizontal scrollbar */
  /* add small inner padding to prevent hover clipping */
  padding-right: 12px;    
  z-index: 1500;
  display: none;
}


/* ===== HEADER ===== */
.legend-header {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dddddd;
}

/* ===== LEGEND ITEMS ===== */
.legend-item {
  margin-bottom: 10px;
}

.legend-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.legend-symbol {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.legend-box {
  width: 18px;
  height: 18px;
  border: 2px solid #000000;
}

/* ===== PROJECT TOGGLE ROW ===== */
.legend-project-toggle {
  display: flex;
  cursor: pointer;
  font-weight: 500;
  padding: 6px 0;
  user-select: none;
  border-bottom: 1px solid #e0e0e0;
}

.legend-project-toggle .arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* ===== PROJECT LIST ===== */
.legend-project-list {
  margin: 6px;
    align-items: center;
  justify-content: center;
  list-style: none;
  display: none;           /* collapsed by default */
  flex-direction: column;
  gap: 6px;
  overflow: hidden;   /* ✅ prevent nested scroll / horizontal overflow */
}

.legend-project-list.open {
  display: flex;

}
/* ===== PROJECT ITEM ===== */
.legend-project-list li {
  margin: 0px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 12px;
  cursor: pointer;
  transform-origin: center;

  display: flex;
  align-items: center;
  justify-content: center;  /* align text inside border */
  gap: 6px;                      /* space for symbols if any */

  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  box-sizing: border-box;         /* include padding inside width */
  white-space: normal;            /* allow wrapping */
}

.legend-project-list li:hover {
  background: #f0f8ff;
  border-color: #3399ff;
  color: #1a73e8;
  transform: scale(1.03);
}

/* ===== ARROW STATE ===== */
.legend-project-toggle .arrow.open {
  transform: rotate(90deg);
}



/* 2. Primary Action Buttons (Save, Turn Off) - Keep these Black */
#turnEditingOff, 
#saveEditBtn3D, 
#saveAttrBtn {
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%; /* Full width in toolbox */
  text-align: center;
}

#turnEditingOff:hover, 
#saveEditBtn3D:hover, 
#saveAttrBtn:hover {
  background-color: #333333;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 2.1 Create Feature (Toggle: White Default -> Black Active) */
#createFeature {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
}

#createFeature:hover {
  background-color: #f4f4f4;
}

/* Active state: Turns Black with White Font */
#createFeature.active {
  background-color: #000000;
  color: #ffffff;
}

/* 3. Secondary Action Buttons (Cancel) */
#cancelEditBtn3D, 
#cancelAttrBtn {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#cancelEditBtn3D:hover, 
#cancelAttrBtn:hover {
  background-color: #f4f4f4;
  color: #000;
}

/* 4. Destructive Action (Delete) - Fixed to Black & White */
#deleteFeature {
  background-color: #ffffff;
  color: #000000; /* Fixed: Black Text */
  border: 1px solid #000000; /* Fixed: Black Border */
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 5px;
}

#deleteFeature:hover {
  background-color: #000000; /* Fixed: Black Background on hover */
  color: #ffffff; /* Fixed: White Text on hover */
}