/* ───────── Full App Layout Override ───────── */
/* Ensure full viewport height */
html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Modify layout to include chart area */
#layout{
  display:grid;
  grid-template-columns:280px 1fr;
  grid-template-rows:1fr auto;
  height:100vh;
}
#sidebar{grid-column:1;grid-row:1 / span 2;overflow-y:auto;
         background:#fafafa;border-right:1px solid #ccc}
#map{grid-column:2;grid-row:1;position:relative;min-height:200px;overflow:hidden}
#chartContainer{
  grid-column:2;grid-row:2;display:flex;
  height:30vh;background:#fff;border-top:1px solid #ccc;
  transition:height 0.3s ease;position:relative;
}
#chartContainer.collapsed{
  height:40px !important;
}
#elevationChart{flex:1;transition:opacity 0.3s ease}
#chartContainer.collapsed #elevationChart{opacity:0.3}

/* Chart toggle button */
.chart-toggle-btn{
  position:absolute;top:8px;right:15px;z-index:1000;
  background:rgba(255,255,255,0.9);border:1px solid #ddd;
  border-radius:6px;padding:6px 10px;cursor:pointer;
  font-size:12px;color:#666;font-weight:500;
  transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.chart-toggle-btn:hover{
  background:#fff;color:#333;box-shadow:0 4px 8px rgba(0,0,0,0.15);
}
.chart-toggle-btn i{
  margin-right:4px;font-size:10px;
  transition:transform 0.3s ease;
}
.chart-toggle-btn.collapsed i{
  transform:rotate(180deg);
}

/* Mobile responsive override */
@media(max-width:900px){
  #layout{display:flex;flex-direction:column;height:auto}
  #sidebar{order:0;width:100%;max-height:40vh;overflow-y:auto}
  #map{order:1;height:60vh;min-height:250px;width:100%}
  #chartContainer{order:2;width:100%}
  #chartContainer:not(.collapsed){height:30vh}
  #chartContainer.collapsed{height:35px}
}

/* ───────── Grade Stats Panel ───────── */
#gradeDisplay{border:1px solid #bbb;border-radius:4px;padding:6px;background:#f6f6f6;
              margin-top:6px;font-size:13px}

/* ───────── Floating Layers Button & Popover ───────── */
.layers-float-btn{
  position:absolute;bottom:15px;left:15px;z-index:1001;
  width:44px;height:44px;
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(10px);
  border:1px solid #e5e7eb;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  transition:all 0.2s ease;
}
.layers-float-btn:hover{
  background:rgba(255, 255, 255, 1);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transform:scale(1.05);
}
.layers-float-btn i{
  font-size:16px;
  color:#6b7280;
}
.layers-float-btn.active i{
  color:#ff6b35;
}
.layers-float-btn.has-active-layers{
  background:rgba(255, 107, 53, 0.1);
  border-color:#ff6b35;
}
.layers-float-btn.has-active-layers i{
  color:#ff6b35;
}

/* ───────── Floating Geolocation Button ───────── */
.geolocation-float-btn{
  position:absolute;bottom:15px;left:70px;z-index:1001;
  width:44px;height:44px;
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(10px);
  border:1px solid #e5e7eb;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  transition:all 0.2s ease;
}
.geolocation-float-btn:hover{
  background:rgba(255, 255, 255, 1);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transform:scale(1.05);
}
.geolocation-float-btn i{
  font-size:16px;
  color:#6b7280;
  transition:color 0.2s ease;
}
.geolocation-float-btn.active{
  background:rgba(34, 197, 94, 0.1);
  border-color:#22c55e;
}
.geolocation-float-btn.active i{
  color:#22c55e;
}

/* ───────── Floating Tools Button & Popover ───────── */
.tools-float-btn{
  position:absolute;bottom:15px;left:125px;z-index:1001;
  width:44px;height:44px;
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(10px);
  border:1px solid #e5e7eb;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  transition:all 0.2s ease;
}
.tools-float-btn:hover{
  background:rgba(255, 255, 255, 1);
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  transform:scale(1.05);
}
.tools-float-btn i{
  font-size:16px;
  color:#6b7280;
  transition:color 0.2s ease;
}
.tools-float-btn.active{
  background:rgba(99, 102, 241, 0.1);
  border-color:#6366f1;
}
.tools-float-btn.active i{
  color:#6366f1;
}

.tools-popover{
  position:absolute;bottom:70px;left:120px;z-index:9999;
  background:#fff;border:2px solid #333;border-radius:6px;
  padding:12px;width:240px;max-height:60vh;overflow-y:auto;
  box-shadow:4px 4px 12px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all 0.2s ease;
}
.tools-popover.visible{
  opacity:1;visibility:visible;transform:translateY(0);
}

.tools-popover-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #ddd;
}
.tools-popover-title{font-weight:600;font-size:16px;color:#374151}
.tools-close-btn{
  background:none;border:none;font-size:18px;cursor:pointer;
  padding:2px 6px;border-radius:3px;color:#666;
  transition:all 0.2s ease;
}
.tools-close-btn:hover{background:#eee;color:#000}

.tools-popover-content{
  display:flex;flex-direction:column;gap:6px;
}

.tool-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:6px;cursor:pointer;
  transition:all 0.2s ease;border:1px solid transparent;
  background:#fff;
}
.tool-item:hover{
  background:#f8fafc;border-color:#e2e8f0;
}
.tool-item.active{
  background:rgba(99, 102, 241, 0.1);
  border-color:#6366f1;color:#6366f1;
}
.tool-item i{
  font-size:16px;color:#6b7280;width:20px;
  transition:color 0.2s ease;
}
.tool-item.active i{
  color:#6366f1;
}
.tool-item span{
  font-size:14px;font-weight:500;color:#374151;
  transition:color 0.2s ease;
}
.tool-item.active span{
  color:#6366f1;
}

.tool-separator{
  height:1px;
  background:#e5e7eb;
  margin:6px 0;
}

.layers-popover{
  position:absolute;bottom:60px;left:10px;z-index:9999;
  background:#fff;border:2px solid #333;border-radius:6px;
  padding:12px;width:280px;max-height:60vh;overflow-y:auto;
  box-shadow:4px 4px 12px rgba(0,0,0,.4);
  display:none;
}
.layers-popover.show{display:block}

.layers-popover-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #ddd;
}
.layers-popover-title{font-weight:600;font-size:16px}
.layers-close-btn{
  background:none;border:none;font-size:18px;cursor:pointer;
  padding:2px 6px;border-radius:3px;color:#666;
}
.layers-close-btn:hover{background:#eee;color:#000}

/* ───────── Search Box ───────── */
.search-container{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  z-index:1000;width:280px;
}
.search-box{
  width:100%;padding:10px 40px 10px 15px;border:none;border-radius:8px;
  background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0,0,0,0.1);font-size:14px;
  border:1px solid #e5e7eb;transition:all 0.2s ease;
}
.search-box:focus{
  outline:none;border-color:#ff6b35;
  box-shadow:0 0 0 3px rgba(255, 107, 53, 0.1);
  background:rgba(255, 255, 255, 1);
}
.search-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#6b7280;cursor:pointer;
  padding:8px;border-radius:4px;transition:all 0.2s ease;
}
.search-btn:hover{background:#f3f4f6;color:#374151}
.search-suggestions{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(255, 255, 255, 0.98);backdrop-filter:blur(15px);
  border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:200px;overflow-y:auto;
  display:none;z-index:1001;
}
.search-suggestion{
  padding:12px 15px;cursor:pointer;border-bottom:1px solid #f1f5f9;
  font-size:13px;transition:all 0.2s ease;
}
.search-suggestion:hover{background:rgba(255, 107, 53, 0.05)}
.search-suggestion:last-child{border-bottom:none}
.suggestion-name{font-weight:500;color:#374151;margin-bottom:2px}
.suggestion-address{color:#6b7280;font-size:12px}

/* ───────── Design Tab Redesign ───────── */
.design-toolbar{
  display:flex;align-items:center;gap:8px;padding:12px;
  background:#f8f9fa;border:1px solid #e5e7eb;border-radius:8px;
  margin-bottom:16px;flex-wrap:wrap;
}
.design-tool{
  width:36px;height:36px;border:1px solid #d1d5db;border-radius:6px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s ease;position:relative;
  overflow:hidden;/* Prevent text overflow */
}
.design-tool::before, .design-tool::after{
  content:none !important;/* Prevent pseudo-element text */
}
.design-tool:hover{
  background:#f3f4f6;border-color:#9ca3af;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.design-tool.active{
  background:#3b82f6;border-color:#2563eb;color:#fff;
}
.design-tool i{font-size:14px;color:#6b7280}
.design-tool.active i{color:#fff}
.design-tool[data-disabled="true"]{
  opacity:0.5;cursor:not-allowed;
}
.design-tool[data-disabled="true"]:hover{
  background:#fff;border-color:#d1d5db;transform:none;box-shadow:none;
}
.design-tool-danger{
  border-color:#dc2626 !important;background:#fef2f2 !important;
}
.design-tool-danger i{color:#dc2626 !important}
.design-tool-danger:hover{
  background:#fee2e2 !important;border-color:#b91c1c !important;
  transform:translateY(-1px);box-shadow:0 2px 4px rgba(220,38,38,0.2);
}
.design-tool-danger.active{
  background:#dc2626 !important;border-color:#b91c1c !important;
}
.design-tool-danger.active i{color:#fff !important}
.design-tool-separator{
  width:1px;height:24px;background:#e5e7eb;margin:0 6px;
}

.profile-manager{
  background:#f8f9fa;border:1px solid #e5e7eb;border-radius:8px;
  padding:16px;margin-bottom:16px;
}
.profile-manager-header{
  display:flex;align-items:center;justify-content:between;margin-bottom:12px;
}
.profile-manager-title{font-weight:600;font-size:14px;color:#374151;margin:0}
.profile-selector{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.profile-dropdown{
  flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;
  background:#fff;font-size:13px;min-height:34px;
}
.profile-dropdown:focus{
  outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}
.profile-actions{
  display:flex;gap:6px;
}
.profile-action-btn{
  padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;
  background:#fff;font-size:11px;cursor:pointer;transition:all 0.2s ease;
}
.profile-action-btn:hover{background:#f3f4f6;border-color:#9ca3af}

.design-section{
  margin-bottom:16px;
}
.design-section-title{
  font-weight:600;font-size:13px;color:#374151;margin:0 0 8px 0;
}
/* New Parameter Layout */
.param-row{
  margin-bottom:10px;display:flex;align-items:center;
}
.param-input-group{
  display:flex;align-items:center;gap:8px;flex:1;
}
.param-label{
  font-size:12px;color:#4b5563;font-weight:500;min-width:fit-content;
}
.param-input{
  width:60px;padding:6px 8px;border:1px solid #d1d5db;border-radius:4px;
  font-size:13px;min-height:30px;text-align:center;background:#fff;
}
.param-input:focus{
  outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}
.param-button{
  padding:8px 12px;background:#3b82f6;color:#fff;border:none;
  border-radius:4px;font-size:12px;cursor:pointer;font-weight:500;
}
.param-button:hover{background:#2563eb}

/* Depth Constraints Group */
.param-group{
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;
  padding:12px;margin:8px 0;
}
.param-group-title{
  font-size:13px;color:#374151;font-weight:600;margin-bottom:8px;
  text-align:center;
}
.depth-constraints-row{
  display:flex;gap:12px;justify-content:center;margin-bottom:8px;
}
.depth-input-group{
  display:flex;flex-direction:column;align-items:center;
}
.depth-label{
  font-size:11px;color:#4b5563;font-weight:500;margin-bottom:4px;
  display:block;text-align:center;
}

.grade-analysis{
  background:#f8f9fa;border:1px solid #e5e7eb;border-radius:8px;padding:12px;
}
.grade-actions{
  display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;
}
.grade-btn{
  padding:6px 10px;border:1px solid #d1d5db;border-radius:4px;
  background:#fff;font-size:11px;cursor:pointer;transition:all 0.2s ease;
  flex:1;min-width:fit-content;
}
.grade-btn:hover{background:#f3f4f6;border-color:#9ca3af}
.grade-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Copy Offset Popover */
.offset-popover{
  /* Position will be set dynamically by JavaScript */
  z-index:10000;
  background:#fff;border:2px solid #333;border-radius:6px;
  padding:16px;width:260px;box-shadow:4px 4px 12px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all 0.2s ease;
}
.offset-popover.visible{
  opacity:1;visibility:visible;transform:translateY(0);
}
.offset-popover-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #ddd;
}
.offset-popover-title{font-weight:600;font-size:14px;color:#374151}
.offset-close-btn{
  background:none;border:none;font-size:16px;cursor:pointer;
  padding:2px 6px;border-radius:3px;color:#666;
}
.offset-close-btn:hover{background:#eee;color:#000}
.offset-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.offset-control-group{display:flex;flex-direction:column;gap:4px}
.offset-label{font-size:11px;color:#6b7280;font-weight:500}
.offset-input{
  padding:8px;border:1px solid #d1d5db;border-radius:4px;font-size:12px;
}
.offset-input:focus{
  outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.1);
}
.offset-create-btn{
  width:100%;padding:8px;background:#3b82f6;color:#fff;border:none;
  border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;
}
.offset-create-btn:hover{background:#2563eb}