:root {
  --bg-dark: #070a0f;
  --bg-card: rgba(14, 18, 28, 0.85);
  --bg-sidebar: rgba(9, 12, 18, 0.98);
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.22);
  --secondary: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --text-main: #e8edf4;
  --text-muted: #8b95a8;
  --text-dim: #505a6e;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);
  --glass-bg: rgba(10, 13, 20, 0.82);
  --glass-border: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(59, 130, 246, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
}

/* ===== LAYOUT ===== */
.app-shell {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  width: 100vw;
}

/* ===== LEFT ICON BAR ===== */
.icon-bar {
  background: rgba(7, 10, 15, 0.99);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 3px;
  z-index: 100;
}

.icon-bar .brand-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary), #1d4ed8);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 0 16px var(--primary-glow), 0 2px 8px rgba(0,0,0,0.4);
}

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.icon-btn.active { background: rgba(59,130,246,0.13); color: var(--primary); }
.icon-btn.active::before {
  content: '';
  position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-link { text-decoration: none; }
.cadsolar3d-link {
  border: 1px solid rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
}
.cadsolar3d-link:hover {
  background: rgba(59,130,246,0.2);
  color: #bfdbfe;
}
.icon-link-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.icon-bar-spacer { flex: 1; }

/* ===== VIEWS ===== */
.view { display: none; width: 100%; height: 100%; overflow: hidden; }
.view.active { display: flex; flex-direction: column; }

/* ===== DASHBOARD VIEW ===== */
.dash-view { padding: 1.5rem 2rem; overflow-y: auto; }
.dash-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}
.dash-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dash-header h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); }
.cadsolar3d-top-link {
  border-color: rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
}
.cadsolar3d-top-link:hover {
  background: rgba(59,130,246,0.2);
  color: #bfdbfe;
}

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0.4;
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.1); }
.stat-label { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); }
.stat-sub { font-size: 0.68rem; color: var(--secondary); font-weight: 500; }

.section-heading {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; }
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.project-card:hover { border-color: rgba(59,130,246,0.35); transform: translateY(-2px); background: rgba(59,130,246,0.04); }
.project-card .delete-btn {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 5px; border: none;
  background: rgba(239, 68, 68, 0.08); color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.18s; z-index: 5; cursor: pointer;
}
.project-card:hover .delete-btn { opacity: 1; }
.project-card .delete-btn:hover { background: var(--danger); color: #fff; }
.project-card h3 { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.3rem; padding-right: 24px; color: var(--text-main); }
.project-card .meta { font-size: 0.73rem; color: var(--text-muted); }
.project-card .badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 0.67rem; font-weight: 600; margin-top: 0.5rem; letter-spacing: 0.02em;
}
.badge-pending { background: rgba(245,158,11,0.12); color: var(--warning); }
.badge-complete { background: rgba(16,185,129,0.12); color: var(--secondary); }

.empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-dim); font-size: 0.83rem; }
.empty-state svg { width: 34px; height: 34px; margin-bottom: 0.75rem; opacity: 0.35; display: block; margin-left: auto; margin-right: auto; }

/* ===== NEW PROJECT VIEW ===== */
.newproj-view {
  display: none; height: 100%;
}
.newproj-view.active { display: grid; grid-template-columns: 300px 1fr; }

.newproj-form {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 1.25rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.newproj-form h2 { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }

.newproj-map { position: relative; width: 100%; height: 100%; }
.newproj-map #newproj-leaflet { width: 100%; height: 100%; }

.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.01em; }
.form-control {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.42rem 0.6rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.form-control:focus { outline: none; border-color: rgba(59,130,246,0.6); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
select.form-control { cursor: pointer; }
textarea.form-control { min-height: 60px; resize: vertical; }

.search-row { display: flex; gap: 0.4rem; }
.search-row .form-control { flex: 1; }

.coords-display {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.45rem 0;
  background: rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--glass-border);
}

.btn {
  padding: 0.44rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  border: none;
  font-family: inherit;
  font-size: 0.79rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 8px var(--primary-glow), 0 1px 3px rgba(0,0,0,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px var(--primary-glow), 0 2px 4px rgba(0,0,0,0.3); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: rgba(255,255,255,0.09); color: var(--text-main); border-color: var(--border-strong); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.74rem; }
.btn-block { width: 100%; }
.btn-success { background: linear-gradient(135deg, var(--secondary), #059669); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.25); }

/* ===== DESIGN WORKSPACE ===== */
.design-view {
  display: none; height: 100%;
}
.design-view.active { display: grid; grid-template-columns: 40px minmax(260px, 25%) 1fr; grid-template-rows: 1fr 30px; }
/* Collapse side panels when 3D view is open */
.design-view.view3d-fullscreen { grid-template-columns: 0 0 1fr !important; }
.view3d-fullscreen .design-toolbar,
.view3d-fullscreen .design-props { display: none !important; }

.design-toolbar {
  grid-column: 1;
  grid-row: 1 / 3;
  background: rgba(7,10,15,0.98);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0; gap: 1px;
}

.tool-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  position: relative;
}
.tool-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.tool-btn.active { background: rgba(59,130,246,0.18); color: var(--primary); }
.tool-btn svg { width: 14px; height: 14px; }
.tool-sep { width: 20px; height: 1px; background: rgba(255,255,255,0.07); margin: 3px 0; }
.tool-btn[title]::after {
  content: attr(title);
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.92); color: var(--text-main);
  padding: 4px 10px; border-radius: 5px;
  font-size: 0.72rem; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 50;
  border: 1px solid rgba(255,255,255,0.08);
}
.tool-btn:hover[title]::after { opacity: 1; }

/* Keepout shape picker flyout (appears to the right of btn-keepout-tool) */
.keepout-shape-picker {
  display: none;
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  padding: 4px;
  z-index: 950;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}
.keepout-shape-picker.visible { display: flex; }
.ksp-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 0.78rem;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.ksp-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ksp-btn:hover { background: rgba(255,255,255,0.07); color: var(--primary); }

.design-canvas {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}
.design-canvas #design-leaflet { width: 100%; height: 100%; }

.design-canvas .canvas-overlay-top {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none; z-index: 800;
}
.canvas-overlay-top > * { pointer-events: auto; }

.canvas-project-badge {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.71rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted);
}
.canvas-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.canvas-actions-row { display: flex; gap: 5px; }
.canvas-actions .btn {
  background: rgba(10, 18, 35, 0.88) !important;
  color: #d4e0ff !important;
  border: 1.5px solid rgba(99, 155, 255, 0.55) !important;
  backdrop-filter: blur(10px);
  font-weight: 600;
  font-size: 0.72rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.canvas-actions .btn:hover {
  background: rgba(37, 99, 235, 0.82) !important;
  color: #fff !important;
  border-color: rgba(99, 155, 255, 0.9) !important;
}

/* Push Leaflet zoom control down and left so it doesn't overlap canvas action buttons */
.leaflet-top.leaflet-right {
  top: 120px !important;
  right: 20px !important;
}

.design-props {
  grid-column: 2;
  grid-row: 1 / 3;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.props-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.props-tab {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.props-tab:hover { color: var(--text-muted); background: var(--surface-hover); }
.props-tab.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(59,130,246,0.04); }

.props-content {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 0.75rem 0.65rem;
}
.props-panel { display: none; }
.props-panel.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; gap: 0; }

.props-section { margin-bottom: 0.6rem; }
.props-section-title {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); font-weight: 700; margin-bottom: 0.35rem;
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--glass-border);
}
.props-section-title svg { width: 11px; height: 11px; }

.props-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.props-row .form-group { margin-bottom: 0; }
.form-group .form-control { font-size: 0.77rem; padding: 0.38rem 0.52rem; }
.form-group .form-label { font-size: 0.7rem; }

.orientation-toggle {
  display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.orientation-toggle button {
  flex: 1; padding: 5px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; font-size: 0.71rem; font-weight: 600;
  transition: all 0.15s; font-family: inherit;
}
.orientation-toggle button:hover { color: var(--text-muted); background: var(--surface-hover); }
.orientation-toggle button.active { background: rgba(59,130,246,0.15); color: var(--primary); }

.design-statusbar {
  grid-column: 3;
  grid-row: 2;
  background: rgba(7,10,15,0.98);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center;
  padding: 0 10px; gap: 12px;
  font-size: 0.68rem; color: var(--text-dim);
}
.statusbar-item { display: flex; align-items: center; gap: 5px; }
.statusbar-item strong { color: var(--text-muted); font-weight: 600; }
.statusbar-sep { width: 1px; height: 12px; background: rgba(255,255,255,0.08); }

/* ===== AI PANEL ===== */

.ai-flow {
  display:flex;
  align-items:center;
  gap:0.4rem;
  flex-wrap:wrap;
  margin-bottom:0.55rem;
  font-size:0.72rem;
  color:var(--text-muted);
}
.ai-flow-step {
  padding:0.2rem 0.45rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
}
.ai-flow-arrow { opacity:0.75; }
.ai-chat-box {
  display: flex; flex-direction: column; gap: 0.7rem;
  flex: 1; min-height: 0;
}
.ai-messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.65rem;
  min-height: 0;
}
.ai-msg {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.77rem;
  line-height: 1.5;
  max-width: 95%;
}
.ai-msg.system { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.18); align-self: flex-start; color: var(--text-muted); }
.ai-msg.user { background: rgba(255,255,255,0.05); align-self: flex-end; border: 1px solid var(--glass-border); }
.ai-input-row { display: flex; gap: 0.4rem; }
.ai-input-row .form-control { flex: 1; font-size: 0.77rem; padding: 0.4rem 0.55rem; }

/* ===== RESULTS VIEW ===== */
.results-view { padding: 1.5rem 2rem; overflow-y: auto; }
.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--glass-border); }
.results-header h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }

.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.result-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.result-card h3 { font-size: 0.82rem; margin-bottom: 0.65rem; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-main); }
.result-card h3 svg { width: 14px; height: 14px; color: var(--primary); }

.result-row { display: flex; justify-content: space-between; padding: 0.28rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.result-row:last-child { border-bottom: none; }
.result-label { color: var(--text-muted); font-size: 0.76rem; }
.result-value { font-weight: 600; font-size: 0.76rem; color: var(--text-main); }

.validation-list { display: flex; flex-direction: column; gap: 0.4rem; }
.validation-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem; padding: 0.25rem 0;
}
.val-pass { color: var(--secondary); }
.val-fail { color: var(--danger); }
.val-warn { color: var(--warning); }

/* ===== MARKETPLACE VIEW ===== */
.market-view { padding: 1.5rem 2rem; overflow-y: auto; }

.offer-card {
  background: linear-gradient(145deg, rgba(16,185,129,0.06) 0%, var(--bg-card) 100%);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.offer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.offer-badge {
  background: var(--secondary); color: #000;
  padding: 2px 9px; border-radius: 4px;
  font-size: 0.67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.price-strike { text-decoration: line-through; color: var(--text-muted); font-size: 0.83rem; }
.price-new { font-size: 1.5rem; font-weight: 800; color: var(--secondary); letter-spacing: -0.03em; }
.price-new::before { content: '$'; font-size: 0.8rem; vertical-align: super; }

.bom-table { width: 100%; border-collapse: collapse; font-size: 0.77rem; }
.bom-table th {
  text-align: left; padding: 0.4rem 0.6rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 700;
}
.bom-table td { padding: 0.38rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-muted); }
.bom-table td:first-child { color: var(--text-main); font-weight: 500; }
.bom-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ===== TOAST ===== */
.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast {
  background: rgba(14,18,28,0.96); backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: var(--text-main); font-size: 0.77rem;
  animation: toastIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  display: flex; align-items: center; gap: 10px;
}
.toast.success { border-left: 3px solid var(--secondary); }
.toast.error { border-left: 3px solid var(--danger); }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== FIELD SEGMENT DRAWING FEEDBACK ===== */
.drawing-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  padding: 5px 14px; border-radius: 6px;
  font-size: 0.72rem; color: var(--text-main); font-weight: 500;
  z-index: 800; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none;
  display: none;
}
.drawing-hint.visible { display: block; }

/* ===== NAV READY DOT ===== */
.icon-btn { position: relative; }
.nav-ready-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 6px; height: 6px;
  background: var(--secondary);
  border-radius: 50%;
  border: 1.5px solid var(--bg-dark);
  box-shadow: 0 0 6px rgba(16,185,129,0.7);
}

/* ===== RUN-READY BANNER ===== */
.run-ready-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 9px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--secondary);
  font-size: 0.8rem;
  font-weight: 500;
}
.run-ready-banner svg { flex-shrink: 0; }
.run-ready-banner span { flex: 1; }

/* ===== RESULTS ACTIONS BAR ===== */
.results-actions-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ===== LOADER ===== */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SNAP FOOTPRINT DRAG ===== */
.snap-footprint { cursor: move; }
.snap-footprint:active { cursor: grabbing; }
.snap-footprint-editing { cursor: default; }

/* ===== FOOTPRINT VERTEX EDITING ===== */
.footprint-vertex-handle {
  cursor: move !important;
  transition: r 0.1s ease;
}
.footprint-vertex-handle:hover { r: 8 !important; }
.footprint-midpoint-handle {
  cursor: crosshair !important;
  transition: r 0.1s ease, opacity 0.15s ease;
}
.footprint-midpoint-handle:hover { r: 6 !important; fill-opacity: 1 !important; }

/* ===== FOOTPRINT CONTEXT MENU ===== */
.fp-ctx-menu {
  position: fixed;
  z-index: 9000;
  background: var(--sidebar-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 190px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 13px;
  user-select: none;
}
.fp-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: var(--text-primary, #e2e8f0);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.fp-ctx-item:hover { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.fp-ctx-item.danger { color: #f87171; }
.fp-ctx-item.danger:hover { background: rgba(248,113,113,0.12); }
.fp-ctx-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 3px 0; }
.fp-ctx-height-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 8px;
}
.fp-ctx-height-row input {
  width: 70px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  color: #e2e8f0;
  padding: 3px 6px;
  font-size: 12px;
}
.fp-ctx-height-row input:focus { outline: none; border-color: #8b5cf6; }
.fp-ctx-height-row .fp-ctx-h-btn {
  background: #8b5cf6;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.fp-ctx-height-row .fp-ctx-h-btn:hover { background: #7c3aed; }
.fp-ctx-title {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.fp-ctx-rename-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 8px;
}
.fp-ctx-rename-row input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  color: #e2e8f0;
  padding: 3px 6px;
  font-size: 12px;
}
.fp-ctx-rename-row input:focus { outline: none; border-color: #8b5cf6; }
.fp-ctx-rename-row .fp-ctx-h-btn {
  background: #8b5cf6;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.fp-ctx-rename-row .fp-ctx-h-btn:hover { background: #7c3aed; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ===== FINANCIAL VIEW ===== */
.financial-view { padding: 1.5rem 2rem; overflow-y: auto; }

.cashflow-chart {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.cashflow-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 1rem; }
.cashflow-bar {
  flex: 1; border-radius: 2px 2px 0 0;
  min-width: 4px; transition: height 0.3s;
}
.cashflow-bar.positive { background: var(--secondary); opacity: 0.85; }
.cashflow-bar.negative { background: var(--danger); opacity: 0.75; }

/* ===== SETTINGS VIEW ===== */
.settings-view { padding: 1.5rem 2rem; overflow-y: auto; }

/* ===== ARRAY TEMPLATE DRAG CARD ===== */
.array-template-drag {
  background: rgba(14, 18, 28, 0.7);
  border: 1.5px dashed rgba(59, 130, 246, 0.4);
  border-radius: 8px;
  padding: 8px 8px 7px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  user-select: none;
  touch-action: none;
}
.array-template-drag:hover {
  border-color: rgba(59,130,246,0.7);
  background: rgba(59, 130, 246, 0.06);
}
.array-template-drag:active { cursor: grabbing; transform: scale(0.98); }

.array-template-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.68rem;
}
.array-template-meta span:first-child { color: var(--text-muted); font-weight: 500; }

.array-drag-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(59, 130, 246, 0.13);
  color: var(--primary);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===== ARRAY DROP OVERLAY ===== */
#array-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.05);
  border: 2px dashed rgba(59, 130, 246, 0.5);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  pointer-events: none;
  border-radius: 4px;
}
#array-drop-overlay.active { display: flex; }

/* ===== PLACED ARRAY HANDLE ===== */
.leaflet-interactive.array-border { cursor: move; }

/* ===== SOLAR PANEL CELL TEXTURE ===== */
/* Each panel polygon gets an objectBoundingBox pattern showing a full module */
path.solar-panel {
  fill: url(#_sc-cell-p);
  fill-opacity: 0.98;
  stroke: #2563eb;
  stroke-width: 0.8;
  stroke-opacity: 0.85;
}
path.solar-panel-l {
  fill: url(#_sc-cell-l);
  fill-opacity: 0.98;
  stroke: #2563eb;
  stroke-width: 0.8;
  stroke-opacity: 0.85;
}
path.solar-panel.panel-selected,
path.solar-panel-l.panel-selected {
  fill: #f97316;
  fill-opacity: 0.92;
  stroke: #fbbf24;
  stroke-width: 1.5;
  stroke-opacity: 1;
}
path.solar-panel.heatmap-active,
path.solar-panel-l.heatmap-active {
  /* inline style.fill set by JS overrides this — class used as flag only */
}

/* ===== WORKFLOW STEPS (MECH/ELEC) ===== */
.wf-steps { display: flex; flex-direction: column; }
.wf-step { padding: 0.7rem 0; }

.wf-step-hd {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.wf-num {
  width: 20px; height: 20px; min-width: 20px;
  border-radius: 50%;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.28);
  color: var(--primary);
  font-size: 0.63rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px; flex-shrink: 0;
  letter-spacing: 0;
}
.wf-num-run {
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(37,99,235,0.2));
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 0 8px rgba(59,130,246,0.2);
}

.wf-info {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.wf-title {
  font-size: 0.79rem; font-weight: 600; color: var(--text-main); line-height: 1.3;
}
.wf-desc {
  font-size: 0.66rem; color: var(--text-muted); line-height: 1.3;
}

.wf-body {
  padding-left: 27px;
  display: flex; flex-direction: column; gap: 0.45rem;
}

.wf-hint {
  font-size: 0.64rem; color: var(--text-dim); line-height: 1.5;
}

.wf-line {
  margin-left: 9.5px;
  width: 1px; height: 10px;
  background: var(--glass-border);
}

/* ===== CONFIG BLOCKS (inside step 3) ===== */
.cfg-block {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  padding: 0.55rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.38rem;
}

.cfg-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--text-dim);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.05rem;
}

.cfg-block .form-group { margin-bottom: 0; }
.cfg-block .form-label { font-size: 0.68rem; }
.cfg-block .form-control { font-size: 0.75rem; padding: 0.36rem 0.5rem; }
.cfg-block .orientation-toggle button { font-size: 0.7rem; }
.cfg-block .props-row { gap: 0.38rem; }

/* ===== CHECK ROW ===== */
.check-row {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.74rem; color: var(--text-muted);
  cursor: pointer; padding: 1px 0;
}
.check-row input[type="checkbox"] {
  width: auto; cursor: pointer;
  accent-color: var(--primary);
}
.check-row label { cursor: pointer; }

/* ===== 3D WORLD VIEW (Maplibre GL, read-only) ===== */
.view3d-panel {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #000c1a; z-index: 900;
  display: flex; flex-direction: column;
}
#view3d-map { flex: 1; width: 100%; height: 100%; }
.view3d-toolbar {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 8px; z-index: 910; align-items: center;
}
/* Make 3D toolbar buttons clearly visible — solid filled, not transparent */
.view3d-toolbar .btn {
  background: rgba(15, 25, 50, 0.92) !important;
  color: #e2eaff !important;
  border: 1.5px solid rgba(99, 155, 255, 0.65) !important;
  backdrop-filter: blur(10px);
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
  padding: 0.38rem 0.9rem;
  font-size: 0.78rem;
}
.view3d-toolbar .btn:hover {
  background: rgba(59, 130, 246, 0.7) !important;
  color: #fff !important;
  border-color: rgba(99, 155, 255, 0.95) !important;
}
/* Make the 3D button in the 2D canvas top-bar clearly visible */
#btn-view-3d {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(37,99,235,0.5);
}
#btn-view-3d:hover { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; }
.view3d-badge {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0, 12, 26, 0.86); border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 7px; padding: 4px 10px; font-size: 0.7rem;
  color: rgba(190, 210, 255, 0.88); backdrop-filter: blur(8px);
  pointer-events: none;
}
.view3d-badge svg { opacity: 0.65; flex-shrink: 0; }

/* Hide 2D elements in 3D mode */
.view3d-active .canvas-overlay-top,
.view3d-active .drawing-hint,
.view3d-active #layers-manager,
.view3d-active #array-layer-panel,
.view3d-active #array-drop-overlay {
  display: none !important;
}
/* Prevent Leaflet from receiving any pointer events while 3D panel is on top */
.view3d-active #design-leaflet {
  pointer-events: none !important;
}

/* ===== LAYERS POPUP ===== */
.layers-popup {
  position: absolute; bottom: 80px; left: 50px;
  width: 220px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex; flex-direction: column;
}
.layers-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
}
#layers-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem;
}
.layers-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.layer-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; color: var(--text-main); cursor: pointer;
}
.layer-item input { cursor: pointer; }

/* Utility */
.hidden { display: none !important; }

/* ===== TILE SOURCE SWITCHER ===== */
.tile-switcher-select {
  font-size: 0.7rem;
  background: rgba(0,0,0,0.55);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.22rem 0.45rem;
  cursor: pointer;
  height: 28px;
}
.tile-switcher-select:hover { border-color: var(--border-strong); color: var(--text-main); }

/* ===== AZIMUTH SNAP BUTTONS ===== */
.azimuth-snap-row {
  display: flex; gap: 0.3rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
.az-snap-btn {
  flex: 1; min-width: 28px;
  font-size: 0.68rem; font-weight: 700;
  padding: 0.28rem 0.3rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  transition: all 0.14s;
}
.az-snap-btn:hover { background: rgba(59,130,246,0.1); border-color: var(--primary); color: var(--primary); }
.az-detect-btn { flex: 2; }

/* ===== KEEPOUT LIST ===== */
.keepout-list {
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.keepout-list-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--glass-border);
}
.keepout-list-item:last-child { border-bottom: none; }
.ko-name { flex: 1; color: var(--text-muted); }
.ko-area { color: var(--text-dim); font-size: 0.68rem; }
.ko-del-btn {
  background: none; border: none; color: var(--danger);
  cursor: pointer; font-size: 0.9rem; padding: 0 3px; line-height: 1;
  opacity: 0.6;
}
.ko-del-btn:hover { opacity: 1; }

/* ===== SYSTEM LOSS REPORT ===== */
.loss-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.78rem;
}
.loss-row:last-child { border-bottom: none; }
.loss-label { flex: 0 0 130px; color: var(--text-muted); }
.loss-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.loss-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.loss-pct { flex: 0 0 50px; text-align: right; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }
.loss-total { background: rgba(59,130,246,0.06); border-radius: 4px; padding: 0.35rem 0.5rem; margin-top: 0.3rem; font-weight: 700; }
.loss-total .loss-label { color: var(--text-main); }

/* ===== STRINGING REPORT ===== */
#res-stringing .result-row { padding: 0.25rem 0; }

/* ===== SOLAR EFFICIENCY CALENDAR ===== */
.calendar-controls {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.calendar-mode-btn {
  font-size: 0.75rem; padding: 0.3rem 0.75rem;
  border-radius: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer; transition: all 0.15s ease;
}
.calendar-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.calendar-mode-btn.active {
  background: rgba(59,130,246,0.15);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.calendar-day-label {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
}
.calendar-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.cal-stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  text-align: center;
}
.cal-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.cal-stat-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.calendar-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 4px;
}
.cal-hour-cell {
  border-radius: 6px;
  padding: 0.35rem 0.4rem;
  text-align: center;
  border: 1px solid var(--glass-border);
  transition: transform 0.1s ease;
  position: relative;
}
.cal-hour-cell:hover {
  transform: scale(1.06);
  z-index: 2;
  border-color: var(--primary);
}
.cal-hour-time {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cal-hour-eff {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cal-hour-irr {
  font-size: 0.58rem;
  color: var(--text-dim);
  margin-top: 1px;
}
.cal-hour-alt {
  font-size: 0.55rem;
  color: var(--text-dim);
}
/* Efficiency color scale: red (0%) → yellow (50%) → green (75%+) */
.cal-eff-0  { background: rgba(239,68,68,0.12); }
.cal-eff-0 .cal-hour-eff  { color: #ef4444; }
.cal-eff-1  { background: rgba(249,115,22,0.12); }
.cal-eff-1 .cal-hour-eff  { color: #f97316; }
.cal-eff-2  { background: rgba(234,179,8,0.12); }
.cal-eff-2 .cal-hour-eff  { color: #eab308; }
.cal-eff-3  { background: rgba(132,204,22,0.12); }
.cal-eff-3 .cal-hour-eff  { color: #84cc16; }
.cal-eff-4  { background: rgba(34,197,94,0.12); }
.cal-eff-4 .cal-hour-eff  { color: #22c55e; }

/* ===== ARRAY LAYER PANEL ===== */
.array-layer-panel {
  position: absolute;
  top: 48px; right: 8px;
  width: 200px;
  background: rgba(9, 12, 18, 0.95);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.array-layer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.alp-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.alp-close:hover { color: var(--text-main); }
.alp-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.65rem; border-bottom: 1px solid var(--glass-border); font-size: 0.72rem; }
.alp-item:last-child { border-bottom: none; }
.alp-eye { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; }
.alp-eye:hover { color: var(--primary); }
.alp-name { flex: 1; color: var(--text-muted); }
.alp-meta { color: var(--text-dim); font-size: 0.65rem; }

/* ===== SLD VIEW ===== */
.sld-view { padding: 0; overflow: auto; }
.sld-view .dash-header { padding: 1.25rem 2rem; border-bottom: 1px solid var(--glass-border); }
.sld-view #sld-empty { padding: 3rem 2rem; }
.sld-diagram-wrap { width: 100%; overflow-x: auto; padding: 0.75rem 0; }
.sld-diagram-wrap svg { display: block; width: 100%; min-width: 900px; height: auto; border-radius: 6px; }

/* ===== PROPOSALS VIEW ===== */
.proposals-view { padding: 0; overflow-y: auto; }
.proposals-view .dash-header { padding: 1.25rem 2rem; border-bottom: 1px solid var(--glass-border); }
.proposals-view .empty-state { padding: 3rem 2rem; }
.proposals-view .result-card { margin-left: auto; margin-right: auto; }
.proposal-list-row:hover { border-color: var(--accent) !important; }
.proposal-status-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }

/* Proposal detail — cover card */
.prop-cover-card { background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg-card)) 100%); }
.prop-company-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.prop-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.4rem; line-height: 1.25; }
.prop-customer-info { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; line-height: 1.5; }
.prop-dates { font-size: 0.75rem; color: var(--text-dim); }

/* Validity countdown tags */
.prop-validity { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.prop-validity.ok      { background: #dcfce7; color: #166534; }
.prop-validity.warn    { background: #fef9c3; color: #854d0e; }
.prop-validity.urgent  { background: #fef2f2; color: #991b1b; }
.prop-validity.expired { background: #f1f5f9; color: #64748b; }

/* Signed confirmation */
.prop-signed-info { font-size: 0.72rem; color: #166534; font-weight: 600; }

/* Section card headings */
.prop-section-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.9rem; display: flex; align-items: center; }

/* Two-column label/value metric rows */
.prop-metrics-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.prop-metric-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.42rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.prop-metric-row:last-child { border-bottom: none; }
.prop-metric-label { color: var(--text-muted); flex-shrink: 0; margin-right: 1rem; }
.prop-metric-value { font-weight: 600; text-align: right; }
.prop-metric-highlight .prop-metric-label { color: var(--text); font-weight: 600; }
.prop-metric-highlight .prop-metric-value { color: var(--accent); font-size: 0.92rem; }

/* Incentives/rebates table */
.prop-incentives-table { display: flex; flex-direction: column; }
.prop-incentive-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.prop-incentive-row:last-child { border-bottom: none; }
.prop-incentive-name { font-size: 0.82rem; font-weight: 600; flex: 1; }
.prop-incentive-note { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; margin-top: 0.15rem; line-height: 1.4; }
.prop-incentive-amount { font-size: 0.88rem; font-weight: 700; color: #166534; white-space: nowrap; }

/* E-signature canvas */
.sig-canvas-wrap { border: 1.5px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; cursor: crosshair; }
.sig-canvas-wrap canvas { display: block; width: 100%; height: 150px; touch-action: none; }

/* Generic modal overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 12px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; display: flex; align-items: center; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.25rem; }

/* Print / PDF export */
@media print {
  body > * { display: none !important; }
  #app { display: block !important; }
  .sidebar, .topbar, .dash-header, #prop-action-bar, #btn-prop-back,
  .proposals-view > #prop-empty,
  .proposals-view > #prop-form,
  .proposals-view > #prop-list,
  #prop-detail > div:first-child { display: none !important; }
  #v-proposals { display: block !important; }
  #prop-detail { display: block !important; max-width: 100% !important; padding: 0 !important; }
  .result-card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; break-inside: avoid; margin-bottom: 10pt !important; }
  .prop-title { font-size: 18pt; }
  .prop-cover-card { background: none !important; border: 2px solid #334155 !important; }
  .prop-section-title { font-size: 10pt; border-bottom: 1pt solid #334155; padding-bottom: 4pt; }
  .prop-metric-row, .prop-incentive-row { font-size: 9pt; padding: 3pt 0; }
  .prop-validity, .proposal-status-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== TEMPLATE BUILDER VIEW ===== */
.templates-view.active { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.tb-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--glass-border); flex-shrink: 0; }
.tb-topbar-left { display: flex; align-items: center; gap: 0.75rem; }
.tb-topbar-right { display: flex; gap: 0.4rem; }
.tb-layout { display: flex; flex: 1; overflow: hidden; }
.tb-browser { width: 260px; min-width: 220px; border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; padding: 0.6rem; overflow: hidden; }
.tb-filter-row { display: flex; gap: 0.3rem; margin-bottom: 0.35rem; }
.tb-template-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.tb-tmpl-card { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-size: 0.75rem; }
.tb-tmpl-card:hover { border-color: var(--accent); background: rgba(99,102,241,0.04); }
.tb-tmpl-card.active { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.tb-tmpl-card-name { font-weight: 600; font-size: 0.78rem; margin-bottom: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tmpl-card-meta { font-size: 0.68rem; color: var(--text-dim); display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tb-tmpl-card-meta span { background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }

.tb-editor-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.tb-preview { flex-shrink: 0; height: 320px; min-height: 200px; border-bottom: 1px solid var(--glass-border); display: flex; flex-direction: column; position: relative; background: var(--bg-base); }
.tb-preview-toolbar { display: flex; align-items: center; padding: 0.35rem 0.75rem; gap: 0.5rem; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }
.tb-view-toggle { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.tb-view-btn { padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.tb-view-btn.active { background: var(--accent); color: #fff; }
.tb-canvas { flex: 1; overflow: hidden; position: relative; }
.tb-canvas svg { display: block; }

.tb-editor-panels { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; }
.tb-section { padding-bottom: 0.6rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.tb-section:last-child { border-bottom: none; }
.tb-section-hd { font-size: 0.78rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--text); }

.tb-drag-handle {
  border: 2px dashed var(--accent); border-radius: 8px; padding: 0.4rem;
  background: rgba(99,102,241,0.04); cursor: grab; text-align: center;
  transition: border-color 0.15s, background 0.15s;
  touch-action: none;
}
.tb-drag-handle:hover { background: rgba(99,102,241,0.10); border-color: var(--green); }

/* ===== WEATHER SOURCE PILL ===== */
.weather-source-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.68rem; color: #22c55e;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 20px; padding: 0.18rem 0.55rem;
}

/* ===== HEATMAP / STRINGING TOOLBAR ACTIVE STATE ===== */
.tool-btn.active {
  background: rgba(59,130,246,0.18);
  border-color: var(--primary);
  color: var(--primary);
}

/* ===== COMPONENT LIBRARY MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  width: 480px; max-width: 92vw;
  max-height: 78vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
}
.modal-header h3 { font-size: 0.95rem; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1;
  transition: color 0.12s;
}
.modal-close:hover { color: var(--text-main); }
.modal-tabs-row {
  display: flex; gap: 0; border-bottom: 1px solid var(--glass-border);
}
.modal-tab {
  flex: 1; padding: 0.5rem 1rem; background: none; border: none;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.14s;
}
.modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modal-tab:hover { color: var(--text-main); }
.modal-search-row {
  position: relative; padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}
.modal-search-row .form-control { padding-left: 2rem; }
.comp-lib-list {
  flex: 1; overflow-y: auto;
}
.comp-lib-item {
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background 0.1s;
}
.comp-lib-item:last-child { border-bottom: none; }
.comp-lib-item:hover { background: rgba(59,130,246,0.08); }
.cli-name { font-size: 0.82rem; font-weight: 600; color: var(--text-main); margin-bottom: 2px; }
.cli-meta { font-size: 0.7rem; color: var(--text-muted); }
.modal-footer {
  padding: 0.5rem 1.1rem;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}

/* ===== LAYER MANAGER PANEL (Item 33) ===== */
.layer-manager-panel {
  position: absolute;
  bottom: 44px; left: 8px;
  width: 196px;
  background: rgba(9, 12, 18, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  z-index: 500;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.layer-manager-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.layer-manager-body {
  padding: 0.35rem 0.65rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.layer-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.layer-row input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }
.layer-row:hover { color: var(--text-main); }
.layer-row-sep { height:1px; background:var(--border); margin:0.5rem 0; }
.shading-anim-panel { position:absolute; bottom:40px; left:210px; width:220px; z-index:500; background:rgba(9,12,18,0.96); border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; }
.view3d-hd { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.75rem; font-weight:600; }
.compare-view { padding:1rem 1.2rem; }
.compare-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.compare-table th, .compare-table td { padding:0.5rem; border-bottom:1px solid var(--glass-border); text-align:left; }
.compare-better { color:#22c55e; font-weight:700; }
.compare-worse { color:#ef4444; font-weight:700; }
/* Zoning overlay tooltip */
.overlay-tip {
  background: rgba(5,10,20,0.92) !important;
  border: 1px solid rgba(99,155,255,0.35) !important;
  color: #d4e0ff !important;
  font-size: 0.7rem !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  white-space: nowrap;
}
.overlay-tip::before { display: none !important; }
/* Zoning legend chip */
.zoning-legend {
  position: absolute; bottom: 52px; right: 10px; left: auto; z-index: 700;
  background: rgba(5,10,20,0.92); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px;
  font-size: 0.65rem; pointer-events: none;
}
.zoning-legend-row { display: flex; align-items: center; gap: 5px; color: var(--text-muted); }
.zoning-chip { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ===== PANEL SELECTION BAR ===== */
.panel-selection-bar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 14, 22, 0.94);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 10px;
  padding: 7px 16px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(249,115,22,0.10);
  animation: psbSlideUp 0.22s ease-out;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
@keyframes psbSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.psb-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f97316;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.psb-count svg { stroke: #f97316; flex-shrink: 0; }
.psb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.psb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-main, #e8edf4);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.psb-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.psb-btn.psb-danger { color: #f87171; border-color: rgba(248,113,113,0.25); }
.psb-btn.psb-danger:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.5); }
.psb-btn.psb-ghost { color: var(--text-muted, #8b95a8); border-color: transparent; background: transparent; }
.psb-btn.psb-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }

/* ===== MOBILE / RESPONSIVE ===== */

/* Mobile props toggle — hidden on desktop, shown on mobile */
.btn-mobile-props { display: none; }

/* ── Tablet & phone (≤ 768 px) ── */
@media (max-width: 768px) {

  /* 1. App shell: single column, icon bar pinned to bottom */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 56px;
  }

  /* 2. Icon bar → horizontal bottom nav */
  .icon-bar {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    height: 56px;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 0 6px;
    justify-content: space-around;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .icon-bar::-webkit-scrollbar { display: none; }
  .icon-bar .brand-icon { display: none; }
  .icon-bar-spacer { display: none; }

  /* Bigger touch targets */
  .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .icon-btn svg { width: 20px; height: 20px; }

  /* Active indicator: bottom bar instead of left bar */
  .icon-btn.active::before {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 0;
    width: 20px;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }

  /* 3. All views fill row 1 */
  .view {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
  }

  /* 4. Dashboard */
  .dash-view { padding: 0.85rem 1rem; }
  .dash-header h1 { font-size: 1rem; }
  .stat-value { font-size: 1.2rem; }
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }

  /* 5. New project: stack form above map */
  .newproj-view.active {
    display: flex;
    flex-direction: column;
  }
  .newproj-form {
    max-height: 45vh;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .newproj-map { flex: 1; min-height: 220px; }

  /* 6. Design workspace: collapse props panel, widen toolbar */
  .design-view.active {
    grid-template-columns: 44px 1fr;
    grid-template-rows: 1fr 30px;
  }
  .design-props {
    position: absolute;
    top: 0; right: 0;
    width: min(320px, 85vw);
    height: calc(100% - 30px);
    z-index: 600;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
    display: flex;
  }
  .design-view.mobile-props-open .design-props {
    transform: translateX(0);
  }

  /* Mobile props-panel backdrop */
  .design-view.mobile-props-open::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 590;
    background: rgba(0,0,0,0.45);
  }

  /* Show mobile props toggle button */
  .btn-mobile-props {
    display: flex !important;
  }

  /* Larger toolbar buttons */
  .tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 7px;
  }
  .tool-btn svg { width: 18px; height: 18px; }
  .tool-sep { width: 28px; }

  /* Canvas overlay: tighter spacing */
  .canvas-overlay-top { top: 6px; left: 6px; right: 6px; }
  .canvas-actions-row { flex-wrap: wrap; gap: 3px; }
  .canvas-actions .btn { font-size: 0.65rem; padding: 0.25rem 0.45rem; }
  .tile-switcher-select { font-size: 0.65rem; height: 26px; }

  /* Results / financial / settings / marketplace */
  .results-view,
  .financial-view,
  .settings-view,
  .market-view { padding: 0.85rem 1rem; }
  .results-grid { grid-template-columns: 1fr; }
  .results-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .results-actions-bar { flex-wrap: wrap; }

  /* SLD / Proposals headers */
  .sld-view .dash-header,
  .proposals-view .dash-header { padding: 0.85rem 1rem; }

  /* Compare view */
  .compare-view { padding: 0.85rem 1rem; }
  .compare-table { font-size: 0.76rem; }
  .compare-table th, .compare-table td { padding: 0.35rem 0.4rem; }

  /* Templates view: stack browser above editor */
  .templates-view.active { overflow-y: auto; }
  .tb-layout { flex-direction: column; }
  .tb-browser {
    width: 100%;
    min-width: 0;
    height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }

  /* Toast & panel bar: clear the bottom nav */
  .toast-container { bottom: 68px; right: 12px; }
  .panel-selection-bar { bottom: 68px; }

  /* Modals: wider */
  .modal-panel { width: 96vw; max-width: 96vw; max-height: 85vh; }

  /* Layers popup: account for toolbar width */
  .layers-popup { left: 52px; }
  .layer-manager-panel { left: 52px; }
  .shading-anim-panel { left: 52px; }
}

/* ── Small phone (≤ 480 px) ── */
@media (max-width: 480px) {
  .icon-btn { width: 40px; height: 40px; }

  /* Dashboard header stacks vertically */
  .dash-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .dash-header .btn { width: 100%; }
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* Canvas project badge: smaller */
  .canvas-project-badge { font-size: 0.63rem; padding: 3px 7px; }

  /* Modal becomes a bottom sheet */
  .modal-overlay { align-items: flex-end; }
  .modal-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }

  /* Financial chart: smaller */
  .cashflow-bars { height: 120px; }
}