/* =====================================================================
   ArchStudio Suite: True North & Latitude Sun Study, Regional Cost & BOQ,
   Solar/Battery ROI, Sloped Hillside Foundations, Backyard ADU & Layouts
   ===================================================================== */

.as-select-wrap{position:relative;margin-bottom:10px}
.as-select{
  width:100%;height:34px;border-radius:10px;padding:0 30px 0 11px;
  border:1px solid var(--stroke-strong);background:rgba(var(--ov),.06);
  color:var(--txt);font:inherit;font-size:12px;font-weight:500;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.as-select:hover{border-color:rgba(255,179,71,.55);background:rgba(var(--ov),.09)}
.as-select:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.as-select option{background:#151a22;color:#e9ecf1}
:root[data-theme="light"] .as-select option{background:#ffffff;color:#161b26}
.as-select-wrap::after{
  content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;
  border-right:1.8px solid var(--mut);border-bottom:1.8px solid var(--mut);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}

/* ---------- True North & Latitude Sun Study ---------- */
.sun-panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--stroke)}
.compass-row{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
.compass-dial{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:rgba(var(--ov),.05);border:1px solid var(--stroke-strong);
  display:grid;place-items:center;cursor:pointer;position:relative;
  transition:border-color .15s,transform .15s;
}
.compass-dial:hover{border-color:var(--amber);transform:scale(1.04)}
.compass-dial svg{width:38px;height:38px;display:block;transition:transform .12s ease-out}
.compass-ctrl{flex:1;min-width:0}
.compass-ctrl .range-row{margin-bottom:0}

.solar-box{
  margin-top:8px;padding:10px;border-radius:12px;
  background:rgba(var(--ov),.035);border:1px solid var(--stroke);
}
.solar-box[hidden]{display:none}
.solar-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.solar-stat{
  padding:7px 9px;border-radius:9px;background:rgba(var(--ov),.04);
  border:1px solid var(--stroke);display:flex;flex-direction:column;gap:2px;
}
.solar-stat span{font-size:10.5px;color:var(--mut)}
.solar-stat b{font-size:12.5px;font-weight:650;color:var(--txt);font-variant-numeric:tabular-nums}
.solar-stat small{font-size:10px;color:var(--amber);font-variant-numeric:tabular-nums}

.facade-sun{margin-top:8px;display:grid;gap:5px}
.fs-row{display:grid;grid-template-columns:68px 1fr 42px;align-items:center;gap:7px;font-size:11px}
.fs-row span{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-bar{height:6px;border-radius:999px;background:rgba(var(--ov),.09);overflow:hidden}
.fs-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffd166,var(--amber-deep));transition:width .2s}
.fs-row b{text-align:right;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.solar-tip{margin-top:8px;font-size:11px;line-height:1.35;color:var(--mut);padding:6px 8px;border-radius:8px;background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.22)}

/* ---------- Regional Cost, Renovation & BOQ CTA ---------- */
.boq-btn{
  width:100%;height:36px;margin-top:10px;border-radius:10px;
  background:rgba(255,179,71,.12);border:1px solid rgba(255,179,71,.42);
  color:var(--amber);font-size:12px;font-weight:650;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .15s,border-color .15s,transform .15s;
}
.boq-btn:hover{background:rgba(255,179,71,.2);border-color:var(--amber);transform:translateY(-1px)}
:root[data-theme="light"] .boq-btn{color:#9a5206;background:rgba(242,138,23,.12);border-color:rgba(190,100,10,.38)}
:root[data-theme="light"] .boq-btn:hover{background:rgba(242,138,23,.2)}

/* ---------- Solar & Battery ROI Card ---------- */
.roi-meter{margin:8px 0 6px}
.roi-meter-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-bottom:4px}
.roi-meter-top b{color:var(--txt);font-variant-numeric:tabular-nums}
.roi-track{height:7px;border-radius:999px;background:rgba(var(--ov),.1);overflow:hidden}
.roi-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3ddc84,#ffb347);transition:width .25s}
.roi-hl{
  margin-top:8px;padding:9px 11px;border-radius:10px;
  background:linear-gradient(155deg,rgba(61,220,132,.11),rgba(255,179,71,.08));
  border:1px solid rgba(61,220,132,.28);display:flex;justify-content:space-between;align-items:center;
}
.roi-hl span{font-size:11.5px;color:var(--mut)}
.roi-hl b{font-size:14px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
:root[data-theme="light"] .roi-hl b{color:#157f47}

/* ---------- Site Slope & ADU Notes ---------- */
.arch-meta{
  margin-top:8px;padding:7px 9px;border-radius:9px;
  background:rgba(var(--ov),.04);border:1px solid var(--stroke);
  font-size:11px;color:var(--mut);line-height:1.35;display:grid;gap:3px;
}
.arch-meta b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.seg.c2{grid-template-columns:1fr 1fr}

/* ---------- Bill of Quantities (BOQ) Modal ---------- */
#boqModal .sheet{
  width:min(920px,95vw);max-height:88vh;display:flex;flex-direction:column;
  background:var(--glass-solid);color:var(--txt);border:1px solid var(--stroke-strong);
  padding:22px 24px;border-radius:18px;
}
.boq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.boq-head h1{margin:0;font-size:19px;font-weight:700;color:var(--txt)}
.boq-head p{margin:3px 0 0;font-size:12px;color:var(--mut)}
.boq-close-x{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--stroke-strong);
  background:rgba(var(--ov),.06);color:var(--txt);font-size:14px;display:grid;place-items:center;flex:none;
}
.boq-close-x:hover{border-color:var(--amber);background:rgba(255,179,71,.15)}

.boq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
@media (max-width:680px){.boq-kpis{grid-template-columns:1fr 1fr}}
.boq-kpi{padding:10px 12px;border-radius:11px;background:rgba(var(--ov),.045);border:1px solid var(--stroke)}
.boq-kpi span{display:block;font-size:11px;color:var(--mut);margin-bottom:2px}
.boq-kpi b{font-size:15px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.boq-kpi small{display:block;font-size:10.5px;color:var(--amber);margin-top:1px}

.boq-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.boq-cats button{
  height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:500;
  background:rgba(var(--ov),.05);border:1px solid var(--stroke);color:var(--mut);
}
.boq-cats button:hover{color:var(--txt);background:rgba(var(--ov),.1)}
.boq-cats button.on{background:var(--amber);border-color:var(--amber);color:#1b1206;font-weight:650}

.boq-scroll{flex:1;overflow-y:auto;border:1px solid var(--stroke);border-radius:12px;background:rgba(var(--ov),.02)}
.boq-tbl{width:100%;border-collapse:collapse;font-size:12px}
.boq-tbl th{
  position:sticky;top:0;z-index:2;background:var(--glass-solid);
  text-align:left;padding:9px 11px;font-size:11px;font-weight:650;
  color:var(--mut);border-bottom:1px solid var(--stroke-strong);
  text-transform:uppercase;letter-spacing:.04em;
}
.boq-tbl th.num,.boq-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.boq-tbl td{padding:8px 11px;border-bottom:1px solid var(--stroke);color:var(--txt);vertical-align:top}
.boq-tbl tr:hover td{background:rgba(var(--ov),.035)}
.boq-tbl td small{display:block;font-size:10.5px;color:var(--mut);margin-top:1px}
.boq-tbl tr.boq-tot td{
  font-weight:700;font-size:13px;background:rgba(255,179,71,.09);
  border-top:1px solid rgba(255,179,71,.35);border-bottom:0;
}
.boq-tag{
  display:inline-block;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;
  background:rgba(var(--ov),.08);color:var(--mut);
}
.boq-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.boq-foot-note{font-size:11px;color:var(--mut);max-width:460px}
.boq-actions{display:flex;gap:8px}
.boq-actions button{
  height:36px;padding:0 14px;border-radius:10px;font-size:12px;font-weight:600;
  border:1px solid var(--stroke-strong);background:rgba(var(--ov),.07);color:var(--txt);
}
.boq-actions button:hover{background:rgba(var(--ov),.13)}
.boq-actions button.pri{background:var(--amber);border-color:var(--amber);color:#1b1206;font-weight:700}
.boq-actions button.pri:hover{filter:brightness(1.06)}