:root{
  --bg:#0b1020;
  --panel:#151b2d;
  --text:#e6ecff;
  --muted:#9bb0ff;
  --accent:#4da3ff;
  --ok:#31c48d;
  --warn:#f59e0b;
  --bad:#ef4444;
  --border: #24304d;
}
*{box-sizing:border-box}

/* Roof edge dimension labels overlaid on the satellite map (one per polygon edge,
   placed at the edge midpoint, showing the side length in metres). */
.roof-dim-label {
  background: rgba(15, 22, 40, 0.88);
  color: #9bb0ff;
  padding: 2px 6px;
  border-radius: 4px;
  font: 600 11px/1.2 system-ui, sans-serif;
  border: 1px solid rgba(155, 176, 255, 0.45);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.roof-dim-label.zone-summary {
  color: #4da3ff;
  background: rgba(15, 22, 40, 0.92);
  border-color: rgba(77, 163, 255, 0.55);
  font-size: 12px;
}

/* Auto-save indicator (mirrors the Solar & Load Planner pattern) */
.save-indicator {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ok);
  background: rgba(49, 196, 141, 0.12);
  border: 1px solid rgba(49, 196, 141, 0.35);
  opacity: 0;
  transition: opacity 0.25s;
  margin-right: 8px;
  align-self: center;
}
.save-indicator.show { opacity: 1; }
@media print {
  .save-indicator { display: none !important; }
}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.4 system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #0b1020 0%, #0f1a33 100%);
}
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:rgba(10,14,30,.6);backdrop-filter: blur(6px);
  position:sticky;top:0;z-index:10
}
.app-header h1{margin:0;font-size:18px;color:var(--muted)}
.header-actions .btn{margin-left:8px}

.app-main{display:grid;grid-template-columns:360px 1fr;gap:16px; padding:16px;align-items:start}
.app-main > .panel{min-width:0}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px}
.panel h2{margin:4px 0 12px;color:var(--muted)}
.inputs{position:sticky;top:60px;max-height:calc(100vh - 76px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.inputs::-webkit-scrollbar{width:6px}
.inputs::-webkit-scrollbar-track{background:transparent}
.inputs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.inputs::-webkit-scrollbar-thumb:hover{background:var(--muted)}

.inputs fieldset{border:1px solid var(--border);border-radius:8px;margin:10px 0;padding:10px}
.inputs legend{padding:0 6px;color:var(--muted)}

/* Row configuration sections */
.row-config{border:1px solid var(--border);border-radius:8px;margin:10px 0;overflow:hidden}
.row-config-header{background:#1a2340;padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.row-config-header:hover{background:#1f2847}
.row-config-header h3{margin:0;font-size:13px;color:var(--muted)}
.row-config-toggle{color:var(--accent);font-size:14px;transition:transform 0.3s}
.row-config-toggle.collapsed{transform:rotate(-90deg)}
.row-config-body{padding:10px;display:block}
.row-config-body.collapsed{display:none}
.row-config .field{margin:8px 0}

/* Per-tilt width controls */
.tilt-widths-section{
  margin:6px 0 10px;
  padding:8px 10px;
  background:rgba(77,163,255,.06);
  border:1px solid rgba(77,163,255,.2);
  border-radius:6px;
}
.tilt-widths-label{
  display:block;font-size:11px;color:var(--muted);
  margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.tilt-widths-grid{
  display:flex;flex-wrap:wrap;gap:6px;
}
.tilt-width-item{
  display:flex;align-items:center;gap:4px;
}
.tilt-width-item label{
  font-size:11px;color:var(--accent);font-weight:700;
  min-width:22px;text-align:center;
}
.tilt-width-item input{
  width:56px;padding:4px 6px;font-size:12px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:4px;color:var(--text);text-align:center;
}

.field{display:flex;flex-direction:column;margin:6px 0}
.field.checkbox{flex-direction:row;align-items:center}
.field label{font-size:12px;color:var(--muted);margin-bottom:4px}
.field input, .field select{background:#0f1628;border:1px solid var(--border);color:var(--text);padding:8px;border-radius:6px;width:100%}
legend{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Views section - full width layout */
.views-section{width:100%;margin-bottom:24px}

/* Tables section - two column layout */
.tables-section{width:100%}
.tables-section .grid-2{grid-template-columns:1fr 1fr}

/* Outputs: give more space to drawings than tables */
.outputs .data th,.outputs .data td{font-size:12px;padding:4px 6px}

/* BOM table text wrapping */
#bom-table td {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  max-width: 180px !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word !important;
}

#bom-table th {
  white-space: nowrap !important;
  vertical-align: top !important;
}

#bom-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.btn{background:#23314f;color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);border-color:#2b7bd9}
.btn:active{transform:translateY(1px)}
.btn-tool{background:linear-gradient(135deg, rgba(49,196,141,0.18), rgba(77,163,255,0.18));border-color:rgba(49,196,141,0.5);color:var(--ok);font-weight:600}
.btn-tool:hover{background:linear-gradient(135deg, rgba(49,196,141,0.28), rgba(77,163,255,0.28));border-color:var(--ok)}

/* Warning Display Styles */
.warning-container {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--warn);
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 10px;
  font-size: 12px;
}

.warning-header {
  font-weight: bold;
  color: var(--warn);
  margin-bottom: 6px;
  font-size: 12px;
}

.warning-list {
  margin: 0;
  padding-left: 16px;
  color: var(--text);
}

.warning-list li {
  margin: 2px 0;
  font-size: 11px;
  line-height: 1.3;
}

.outputs h3{margin:12px 0 8px;color:var(--muted)}
.data{width:100%;border-collapse:collapse;table-layout:fixed}
.data th,.data td{border:1px solid var(--border);padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data th{color:var(--muted);font-weight:600;text-align:left}

/* Key Results table text wrapping (similar to BOM table) */
#results-table td {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  max-width: 180px !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word !important;
}

#results-table th {
  white-space: nowrap !important;
  vertical-align: top !important;
}

.canvas{width:100%;height:720px;max-width:100%;background:#0f1628;border:1px solid var(--border);border-radius:8px}
.canvas-3d{width:100%;height:720px;max-width:100%;background:#0f1628;border:1px solid var(--border);border-radius:8px;position:relative}

.zoom-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  padding:8px;
  background:rgba(15,22,40,0.5);
  border-radius:6px;
}

.zoom-controls label{
  color:var(--muted);
  font-size:12px;
}

.zoom-slider{
  flex:1;
  height:6px;
  background:#24304d;
  border-radius:3px;
  outline:none;
  -webkit-appearance:none;
}

.zoom-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  background:var(--accent);
  border-radius:50%;
  cursor:pointer;
}

.zoom-slider::-moz-range-thumb{
  width:16px;
  height:16px;
  background:var(--accent);
  border-radius:50%;
  cursor:pointer;
  border:none;
}

.btn-small{
  background:#23314f;
  color:var(--text);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:6px;
  cursor:pointer;
  font-size:11px;
}

.btn-small:hover{
  background:#2a3b5f;
}

.btn-small:active{
  transform:translateY(1px);
}

.warnings{margin-top:8px;color:#fff}
.warnings .warn{color:var(--warn)}
.warnings .bad{color:var(--bad)}
.warnings .ok{color:var(--ok)}

/* Satellite View */
.satellite-section{margin-bottom:24px}
.satellite-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.address-search{display:flex;flex:1;min-width:240px;gap:6px}
.address-search input{
  flex:1;background:#0f1628;border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:6px;font-size:13px
}
.address-search input::placeholder{color:var(--muted);opacity:.6}
.satellite-actions{display:flex;gap:6px;align-items:center}
.btn-draw{background:#1a4a2e !important;border-color:#31c48d !important;color:#31c48d !important}
.btn-draw:hover{background:#225a38 !important}
.btn-apply{background:#1a3a5e !important;border-color:var(--accent) !important;color:var(--accent) !important}
.btn-apply:hover{background:#224a6e !important}
.btn-apply:disabled{opacity:.4;cursor:not-allowed}
.btn-geo{background:#3a2a1a !important;border-color:#f59e0b !important;color:#f59e0b !important}
.btn-geo:hover{background:#4a3a2a !important}
.btn-overlay{background:#2a1a3a !important;border-color:#a855f7 !important;color:#a855f7 !important}
.btn-overlay:hover{background:#3a2a4a !important}
.btn-overlay:disabled{opacity:.4;cursor:not-allowed}
.btn-overlay.active{background:#a855f7 !important;color:#fff !important}
.btn-solar{background:#1a3a2a !important;border-color:#f59e0b !important;color:#f59e0b !important}
.btn-solar:hover{background:#2a4a3a !important}
.btn-solar:disabled{opacity:.4;cursor:not-allowed}
.btn-solar.loading{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.solar-data-panel{
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border)
}
.solar-data-header{
  font-weight:600;color:var(--warn);font-size:13px;margin-bottom:8px
}
.monthly-chart{margin-top:10px}
.monthly-chart svg{width:100%;height:140px}
.monthly-chart .bar{fill:var(--accent);rx:2}
.monthly-chart .bar-label{fill:var(--muted);font-size:9px;text-anchor:middle}
.monthly-chart .bar-value{fill:var(--text);font-size:8px;text-anchor:middle;font-weight:600}
.satellite-map{
  width:100%;height:900px;background:#0f1628;
  border:1px solid var(--border);border-radius:8px;
  overflow:hidden;position:relative;z-index:1
}
/* When satellite tiles are hidden, give the map a flat dark backdrop so the
   roof polygon + panel overlays read clearly without the satellite imagery */
.satellite-map.map-bg-dark .leaflet-container{background:#0b1020}
.satellite-map.map-bg-dark .leaflet-tile-pane{display:none}
.roof-info{
  background:rgba(15,22,40,.8);border:1px solid var(--border);
  border-radius:6px;padding:10px 14px;margin-top:8px
}
.roof-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 16px}
.info-label{color:var(--muted);font-size:12px}
.roof-info-grid span:not(.info-label){color:var(--text);font-size:13px;font-weight:600}

/* Multiple roof zones */
.roof-zone-card{
  background:rgba(15,22,40,.5);border:1px solid var(--border);border-radius:6px;
  padding:8px 10px;margin-bottom:6px;position:relative
}
.roof-zone-card .zone-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:6px
}
.roof-zone-card .zone-title{font-size:12px;font-weight:600}
.roof-zone-card .zone-color{
  display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle
}
.roof-zone-card .zone-remove{
  background:none;border:none;color:var(--bad);cursor:pointer;font-size:14px;padding:0 4px;line-height:1
}
.roof-zone-card .zone-remove:hover{opacity:.7}

/* Panel facing (azimuth) editable control */
.panel-facing-row{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel-facing-row .info-label{flex-shrink:0}
.panel-facing-control{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:4px;
  padding:2px 6px
}
.zone-azimuth-input,.row-azimuth-input{
  width:54px;background:transparent;border:none;color:var(--text);
  font-size:13px;font-weight:600;text-align:right;padding:2px 0;
  -moz-appearance:textfield
}
.zone-azimuth-input::-webkit-outer-spin-button,
.zone-azimuth-input::-webkit-inner-spin-button,
.row-azimuth-input::-webkit-outer-spin-button,
.row-azimuth-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zone-azimuth-input:focus,.row-azimuth-input:focus{outline:1px solid var(--accent);outline-offset:1px;border-radius:2px}
.azimuth-deg-suffix{color:var(--muted);font-size:13px;font-weight:600}
.azimuth-label,.row-azimuth-label{
  color:var(--accent);font-size:12px;font-weight:600;
  background:rgba(56,189,248,.12);border-radius:3px;padding:1px 6px;margin-left:4px;
  min-width:36px;text-align:center
}
.azimuth-reset{
  background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;
  font-size:12px;padding:2px 6px;line-height:1;border-radius:3px
}
.azimuth-reset:hover:not(:disabled){color:var(--accent);border-color:var(--border);background:rgba(0,0,0,.2)}
.azimuth-reset:disabled{opacity:.3;cursor:not-allowed}

/* Multi-row panel-facing layout */
.panel-facing-multi{flex-direction:column;align-items:stretch;gap:6px}
.panel-facing-multi .panel-facing-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px
}
.panel-facing-rows-list{
  display:flex;flex-direction:column;gap:4px;
  padding-left:14px;border-left:2px solid rgba(49,196,141,.3)
}
.row-facing-item{display:flex;align-items:center;gap:8px}
.row-facing-name{
  color:var(--muted);font-size:12px;font-weight:600;min-width:50px
}

.roof-totals{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border)
}
.roof-totals-header{font-weight:600;color:var(--ok);font-size:13px;margin-bottom:6px}

/* Leaflet overrides for dark theme */
.satellite-map .leaflet-control-zoom a{
  background:var(--panel) !important;color:var(--text) !important;border-color:var(--border) !important
}
.satellite-map .leaflet-control-zoom a:hover{background:#23314f !important}
.satellite-map .leaflet-bar{border:1px solid var(--border) !important;border-radius:6px !important;overflow:hidden}
.satellite-map .leaflet-control-attribution{background:rgba(11,16,32,.7) !important;color:var(--muted) !important;font-size:10px}
.satellite-map .leaflet-control-attribution a{color:var(--accent) !important}

/* Leaflet Draw toolbar dark theme */
.satellite-map .leaflet-draw-toolbar a{
  background-color:var(--panel) !important;border-color:var(--border) !important
}
.satellite-map .leaflet-draw-toolbar a:hover{background-color:#23314f !important}
.satellite-map .leaflet-draw-actions{background:var(--panel) !important}
.satellite-map .leaflet-draw-actions a{
  background:var(--panel) !important;color:var(--text) !important;border-color:var(--border) !important
}
.satellite-map .leaflet-draw-actions a:hover{background:#23314f !important}

/* Array drag handle */
.array-drag-handle{
  background:rgba(30,50,90,.85);
  border:2px solid #4da3ff;
  border-radius:50%;
  cursor:grab;
  box-shadow:0 0 8px rgba(77,163,255,.6), 0 2px 6px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s, transform .15s;
}
.array-drag-handle:hover{
  box-shadow:0 0 14px rgba(77,163,255,.9), 0 2px 8px rgba(0,0,0,.6);
  transform:scale(1.15);
}
.array-drag-handle:active,.array-drag-handle.leaflet-drag-target{
  cursor:grabbing;
  box-shadow:0 0 18px rgba(77,163,255,1), 0 2px 10px rgba(0,0,0,.7);
}
.array-drag-handle svg{
  width:18px;height:18px;pointer-events:none;
}
.array-drag-handle.row-handle{
  background:rgba(30,50,90,.9);
  border-color:#f59e0b;
  box-shadow:0 0 8px rgba(245,158,11,.6), 0 2px 6px rgba(0,0,0,.5);
}
.array-drag-handle.row-handle:hover{
  box-shadow:0 0 14px rgba(245,158,11,.9), 0 2px 8px rgba(0,0,0,.6);
}
.row-handle-label{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-size:12px;font-weight:700;color:#fff;
  pointer-events:none;user-select:none;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}

/* Array rotation handle (different color: green, to distinguish from blue/orange drag handles) */
.array-rotate-handle{
  background:rgba(20,60,40,.92);
  border:2px solid #31c48d;
  border-radius:50%;
  cursor:grab;
  box-shadow:0 0 10px rgba(49,196,141,.7), 0 2px 6px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s, transform .15s;
}
.array-rotate-handle:hover{
  box-shadow:0 0 16px rgba(49,196,141,1), 0 2px 8px rgba(0,0,0,.6);
  transform:scale(1.15);
}
.array-rotate-handle:active,.array-rotate-handle.leaflet-drag-target{
  cursor:grabbing;
  box-shadow:0 0 20px rgba(49,196,141,1), 0 2px 10px rgba(0,0,0,.7);
}
.array-rotate-handle svg{
  width:18px;height:18px;pointer-events:none;
  /* Tilt the refresh-arrow icon so it reads as "rotate" not "reload" */
  transform:rotate(45deg);
}

/* Row gap warning label */
.gap-warning-label{
  background:none !important;
  border:none !important;
  pointer-events:none;
}
.gap-warn-text{
  display:inline-block;
  background:rgba(180,20,20,.88);
  color:#fff;
  font-size:11px;font-weight:700;
  line-height:1.3;
  padding:3px 8px;
  border-radius:6px;
  border:1.5px solid #ff6666;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 0 10px rgba(255,50,50,.5), 0 2px 6px rgba(0,0,0,.5);
  animation:warnPulse 1.2s ease-in-out infinite;
  pointer-events:none;user-select:none;
}
@keyframes warnPulse{
  0%,100%{box-shadow:0 0 8px rgba(255,50,50,.4)}
  50%{box-shadow:0 0 16px rgba(255,50,50,.8)}
}

.app-footer{padding:10px 16px;color:var(--muted);border-top:1px solid var(--border)}

/* Print styles */
@media print{
  @page {
    size: landscape;
    margin: 10mm;
  }
  
  body{background:#fff;color:#000;margin:0;padding:0}
  .app-header, .inputs{display:none}
  .satellite-section{display:none !important}
  .app-main{padding:0;margin:0;gap:0;display:block}
  .panel{border:none;margin:0;padding:0}
  
  /* Force each view to its own page and fit to page */
  .grid-2{display:block}
  .grid-2 > div{
    page-break-after: always;
    page-break-inside: avoid;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* Each canvas fills the page */
  .canvas{
    width: 95vw !important;
    height: 85vh !important;
    max-width: 95vw;
    max-height: 85vh;
  }
  
  svg{
    width: 100% !important;
    height: 100% !important;
  }
  
  #view3D{
    width: 95vw !important;
    height: 85vh !important;
  }
  
  /* Show only output titles, hide main section headers */
  h2{display:none}
  .outputs h3{display:block !important; margin-top: 20px; margin-bottom: 15px; font-size: 1.5em; text-align: center;}
  
  /* Tables on separate page */
  .outputs{
    page-break-before: always;
    page-break-after: always;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
  }
  
  .outputs h2{
    display: block !important;
    font-size: 18px;
    margin: 10px 0;
    color: #000;
  }
  
  .outputs table{
    page-break-inside: avoid;
    margin-bottom: 20px;
    width: 100%;
  }
  
  /* Key Results table on one page */
  .outputs > div:first-child{
    page-break-after: always;
  }
}

/* Responsive: stack panels on narrow screens */
@media (max-width: 1100px){
  .app-main{grid-template-columns:1fr}
}

/* Responsive: avoid cramping nested two-column groups */
@media (max-width: 800px){
  .grid-2{grid-template-columns:1fr}
}