/* Black/white UI theme override. Kept outside the copied production CSS. */
:root {
  --bg: #000000;
  --panel: rgba(8, 8, 8, .94);
  --panel-solid: #080808;
  --border: rgba(255, 255, 255, .2);
  --text: #f7f7f7;
  --muted: #a8a8a8;
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, .14);
  --field: #101010;
  --hover: rgba(255, 255, 255, .12);
  --shadow: rgba(0, 0, 0, .72);
}

html[data-theme="light"] {
  --bg: #ffffff;
  --panel: rgba(255, 255, 255, .96);
  --panel-solid: #ffffff;
  --border: rgba(0, 0, 0, .14);
  --text: #050505;
  --muted: #5f6368;
  --accent: #000000;
  --accent-soft: rgba(0, 0, 0, .045);
  --field: #ffffff;
  --hover: rgba(0, 0, 0, .045);
  --shadow: rgba(0, 0, 0, .12);
}

html,
body,
#app {
  background: var(--bg) !important;
  color: var(--text) !important;
}

#scene {
  background: var(--bg) !important;
}

.toolbar,
.left-panel,
.panel,
.project-menu,
.snap-pop,
.map-dialog,
.render-dialog,
.np-panel,
.sk-panel,
.sk-drawer,
.sketch-editor,
.sketch-shell,
.detail-panel,
.opening-detail-panel {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  box-shadow: 0 16px 38px var(--shadow) !important;
  color: var(--text) !important;
}

.np-node,
.sketch-thumb,
.np-plan-thumb,
.map-head input,
.map-head button,
.map-head select,
.render-foot input,
.render-foot button,
.render-foot a,
.render-foot select,
.row input,
.row select,
.row textarea,
.snap-field input,
.lp-search input,
.project-btn,
.obj-name-input,
.np-num,
.np-sel,
.np-color,
.tf-vec,
input,
select,
textarea {
  background: var(--field) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

input:focus,
select:focus,
textarea:focus,
.np-num:focus,
.np-sel:focus,
.lp-search input:focus,
.row input:focus,
.map-head input:focus,
.render-foot input:focus {
  border-color: var(--accent) !important;
  outline-color: var(--accent-soft) !important;
}

.tools button:hover,
#duplicate:hover,
#delete:hover,
.lp-action:hover,
.obj-item:hover,
.pm-action:hover,
.view-body .views button:hover,
.render-head button:hover,
.render-foot button:hover,
.map-head button:hover,
.map-foot button:hover {
  background: var(--hover) !important;
  border-color: var(--border) !important;
}

.tools button.active,
.seg button.active,
.obj-item.active,
.pm-row.active,
.lp-action.primary,
.render-btn,
.render-foot button.primary,
.map-foot button.primary,
.np-planbtn.has,
.np-node-head,
button.primary {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
}

.tools button.active .ico,
.obj-item.active .obj-ico,
.obj-item.active .obj-twisty,
.lp-action.primary .ico,
.np-node-head button,
.np-node-head .np-title {
  color: var(--bg) !important;
}

.divider,
.lp-section,
.lp-section-head,
.env-group,
.pm-actions,
.map-head,
.map-foot,
.render-stage,
.render-dialog,
.panel,
.row {
  border-color: var(--border) !important;
}

input[type="range"],
input[type="checkbox"],
.caps-chk input {
  accent-color: var(--accent) !important;
}

.hint,
.lp-scene-title,
.lp-count,
.env-desc,
.env-subhead,
.obj-empty,
.search-status,
.render-status,
.project-btn .pm-caret,
.obj-ico,
.obj-twisty,
.lp-action .ico,
.tf-move-icon {
  color: var(--muted) !important;
}

.sketch-thumb,
.np-plan-thumb,
.sk-canvas,
.three-view-canvas,
.shape-view,
.top-view,
.side-view {
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--bg) !important;
  border-color: var(--border) !important;
}

.sketch-thumb-shape,
.np-thumb-wall,
.np-thumb-fp,
.sk-shape,
.sk-shape.filled {
  fill: var(--accent-soft) !important;
  stroke: var(--accent) !important;
}

.sk-underlay,
.guide,
.np-wire {
  stroke: var(--accent) !important;
}

.sk-anchor,
.sk-handle,
.handle,
.np-port {
  fill: var(--bg) !important;
  stroke: var(--accent) !important;
}

.ctx-label {
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.map-crosshair:before,
.map-crosshair:after {
  background: var(--accent) !important;
}

.render-stage,
.map-canvas,
.map-canvas .leaflet-container {
  background-color: var(--bg) !important;
}

.bw-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 600 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 12px 28px var(--shadow);
  cursor: pointer;
}

.bw-theme-toggle:hover {
  background: var(--hover);
}

a[href="./awning-node.html"] {
  border-color: var(--border) !important;
  background: var(--panel-solid) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 28px var(--shadow) !important;
}

html[data-theme="light"] .toolbar,
html[data-theme="light"] .left-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .project-menu,
html[data-theme="light"] .snap-pop,
html[data-theme="light"] .map-dialog,
html[data-theme="light"] .render-dialog,
html[data-theme="light"] .np-panel,
html[data-theme="light"] .sk-panel,
html[data-theme="light"] .sk-drawer,
html[data-theme="light"] .sketch-editor,
html[data-theme="light"] .sketch-shell,
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .opening-detail-panel,
html[data-theme="light"] .bw-theme-toggle {
  background: rgba(255, 255, 255, .97) !important;
}

html[data-theme="light"] .toolbar {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08) !important;
}

html[data-theme="light"] .seg,
html[data-theme="light"] .views,
html[data-theme="light"] .project-btn,
html[data-theme="light"] .lp-search input,
html[data-theme="light"] .row input,
html[data-theme="light"] .row select,
html[data-theme="light"] .snap-field input,
html[data-theme="light"] .np-num,
html[data-theme="light"] .np-sel,
html[data-theme="light"] .tf-vec {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, .16) !important;
}

html[data-theme="light"] .seg,
html[data-theme="light"] .views {
  border: 1px solid rgba(0, 0, 0, .16) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .seg button,
html[data-theme="light"] .views button,
html[data-theme="light"] .tools button,
html[data-theme="light"] #duplicate,
html[data-theme="light"] #delete {
  background: #ffffff !important;
  color: #050505 !important;
  border-color: transparent !important;
}

html[data-theme="light"] .seg button.active,
html[data-theme="light"] .views button.active,
html[data-theme="light"] .tools button.active,
html[data-theme="light"] #snap.active,
html[data-theme="light"] .lp-action.primary,
html[data-theme="light"] button.primary {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

html[data-theme="light"] .tools button.active .ico,
html[data-theme="light"] #snap.active .ico,
html[data-theme="light"] .lp-action.primary .ico {
  color: #ffffff !important;
}

html[data-theme="light"] input[type="range"] {
  accent-color: #000000 !important;
}

html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .28) !important;
  border-radius: 999px !important;
  height: 8px !important;
}

html[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
  background: #000000 !important;
  border: 1px solid #000000 !important;
}