/* 3dEX v2 — Style Editor (ML-1) */

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  background: #1a1a1a; color: #fff;
  overflow: hidden;
}

#map {
  /* phase27.15b: MapLibre 5 sets inline style="position:relative" on its
     container at boot, which collapses the right/bottom anchors and the
     div ends up 0px tall. !important wins over MapLibre's inline; the
     explicit viewport-unit sizes are a belt for the same braces. */
  position: absolute !important; left: 0; top: 0; right: 360px; bottom: 0;
  width: calc(100vw - 360px); height: 100vh;
}

#banner {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 30, 120, 0.92); color: #fff;
  padding: 4px 12px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  z-index: 1000; pointer-events: none;
}

#sidebar {
  position: fixed; right: 0; top: 0; bottom: 0; width: 360px;
  background: rgba(20, 20, 24, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column;
  font-size: 12px;
  overflow-y: auto;             /* global scroll: whole sidebar scrolls as one column */
  overflow-x: hidden;
}
#sidebar > header { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; background: rgba(20,20,24,0.99); }
#sidebar > footer { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 2; background: rgba(20,20,24,0.99); }

#sidebar header {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#sidebar h1 {
  margin: 0 0 8px 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: #ff1e78;
}
#sidebar .actions { display: flex; gap: 6px; }
#sidebar button {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
#sidebar button:hover {
  background: rgba(255, 30, 120, 0.25);
  border-color: rgba(255, 30, 120, 0.6);
  color: #fff;
}

#scene-panel,
#markerstyles-panel,
#smcards-panel,
#layer-list {
  padding: 8px;
  /* Per-section scroll/cap removed in phase7f — sidebar scrolls as a whole.
     Each section now expands to fit its content; collapse via <details>. */
}

/* Collapsible section wrappers (phase7f). Each <section> is wrapped in a
   <details data-panel="…">; <summary> is the clickable header with the
   tool's pink underline accent and a CSS chevron. */
#sidebar > details {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#sidebar > details > summary {
  list-style: none;            /* hide default disclosure arrow */
  cursor: pointer;
  padding: 8px 12px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.02);
  user-select: none;
  position: relative;
}
#sidebar > details > summary::-webkit-details-marker { display: none; }
#sidebar > details > summary::before {
  content: '▾';
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  transition: transform 120ms ease-out;
  color: rgba(255, 30, 120, 0.8);
}
#sidebar > details:not([open]) > summary::before { transform: rotate(-90deg); }
#sidebar > details > summary:hover { color: #fff; background: rgba(255, 30, 120, 0.10); }
#sidebar > details[open] > summary { color: rgba(255, 255, 255, 0.85); }
#scene-panel h2,
#markerstyles-panel h2,
#smcards-panel h2,
#layer-list h2 {
  /* Phase 7f: header now lives in the <details><summary> wrapper.
     Hide the inner h2 to avoid double titles. */
  display: none;
}
#scene-panel select,
#scene-panel input[type="text"] {
  font-size: 11px;
}
/* phase26.2 — per-user color (64 Pantone) + per-class symbol picker */
#markerstyles-panel .mk-section-hdr {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: rgba(255, 30, 120, 0.85);
  text-transform: uppercase;
  padding: 6px 0 4px;
  border-bottom: 1px solid rgba(255, 30, 120, 0.2);
  margin-bottom: 4px;
}
#markerstyles-panel details.mk-user,
#markerstyles-panel details.mk-class {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 3px 0;
  background: rgba(0, 0, 0, 0.15);
}
#markerstyles-panel details.mk-user summary,
#markerstyles-panel details.mk-class summary {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; cursor: pointer; font-size: 11px;
  list-style: none;
}
#markerstyles-panel details.mk-user summary::-webkit-details-marker,
#markerstyles-panel details.mk-class summary::-webkit-details-marker { display: none; }
#markerstyles-panel .mk-user-swatch {
  display: inline-block; width: 18px; height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}
#markerstyles-panel .mk-user-name { flex: 1; font-weight: 600; }
#markerstyles-panel .mk-user-hex { font-size: 9.5px; color: rgba(255, 255, 255, 0.5); font-family: monospace; }
#markerstyles-panel .mk-class-name { flex: 1; font-weight: 600; }
#markerstyles-panel .mk-class-sym  { font-size: 9.5px; color: rgba(255, 255, 255, 0.5); }

#markerstyles-panel .mk-swatch-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
  padding: 6px 8px 8px;
}
#markerstyles-panel .mk-swatch {
  width: 100%; aspect-ratio: 1; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
#markerstyles-panel .mk-swatch:hover { transform: scale(1.15); border-color: #fff; }
#markerstyles-panel .mk-swatch.sel   { outline: 2px solid #fff; outline-offset: 1px; }

#markerstyles-panel .mk-symbol-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px 8px;
}
#markerstyles-panel .mk-sym-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff; font-size: 10px;
  padding: 4px 8px; border-radius: 2px; cursor: pointer;
}
#markerstyles-panel .mk-sym-btn:hover { background: rgba(255, 30, 120, 0.18); }
#markerstyles-panel .mk-sym-btn.sel   { background: rgba(255, 30, 120, 0.35); border-color: #ff1e78; }
#markerstyles-panel .mk-sym-upload {
  display: inline-flex; align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  padding: 4px 8px; border-radius: 2px; cursor: pointer;
}
#markerstyles-panel .mk-sym-upload:hover { border-color: #ff1e78; color: #fff; }
.layer-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 3px;
}
.layer-row:hover { background: rgba(255, 255, 255, 0.06); }
.layer-row.selected {
  background: rgba(255, 30, 120, 0.18);
  color: #ff1e78;
}
.layer-row input[type="checkbox"] {
  margin: 0; accent-color: #ff1e78; cursor: pointer;
}
.layer-row .layer-name { flex: 1; }
.layer-row .layer-swatch {
  width: 14px; height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

#prop-panel {
  /* Phase 7f: sidebar owns scroll now; prop panel just renders inline. */
  padding: 12px;
}
.prop-empty {
  padding: 20px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  text-align: center;
}
.prop-section {
  margin-bottom: 14px;
}
.prop-section h3 {
  margin: 0 0 6px 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
}
.prop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 11px;
}
.prop-row label {
  flex: 0 0 100px;
  color: rgba(255, 255, 255, 0.65);
}
.prop-row input[type="color"] {
  width: 32px; height: 22px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent; cursor: pointer;
  border-radius: 3px;
}
.prop-row input[type="range"] { flex: 1; accent-color: #ff1e78; }
.prop-row input[type="number"], .prop-row input[type="text"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px; padding: 3px 6px;
  font-size: 11px; font-family: monospace;
}
.prop-row .prop-value {
  font-size: 10px; color: rgba(255, 255, 255, 0.55);
  min-width: 38px; text-align: right;
}
.pat-btn {
  width: 32px; height: 22px;
  background-color: rgba(255, 255, 255, 0.05);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 3px;
  font-size: 12px; line-height: 1;
}
.pat-btn:hover { border-color: #ff1e78; color: #ff1e78; }

#sidebar footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: monospace;
}

/* Capture buttons (📷 / 📋) — phase 7g, mirrors runtime toolbar style. */
.edit-cap-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
}
.edit-cap-btn:hover {
  background: rgba(255, 30, 120, 0.25);
  border-color: rgba(255, 30, 120, 0.6);
  color: #fff;
}
.edit-cap-btn:disabled { opacity: 0.5; cursor: progress; }

/* VOGIS import panel — Phase 8. */
#import-panel .imp-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 11px;
  border-radius: 3px;
}
#import-panel .imp-row:hover { background: rgba(255, 255, 255, 0.05); }
#import-panel .imp-row .imp-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}
#import-panel .imp-row .imp-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgba(255, 30, 120, 0.85);
  padding: 1px 5px;
  background: rgba(255, 30, 120, 0.10);
  border-radius: 2px;
}
#import-panel .imp-row .imp-edit,
#import-panel .imp-row .imp-remove {
  flex: 0 0 auto;
  font-size: 10px; padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 2px; cursor: pointer;
}
#import-panel .imp-row .imp-remove { color: rgba(255, 100, 100, 0.85); }
#import-panel .imp-row button:hover { background: rgba(255, 30, 120, 0.15); color: #fff; border-color: rgba(255, 30, 120, 0.5); }

/* Pattern picker modal — same look as the runtime */
.pat-pick-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.pat-pick-modal {
  background: rgba(20, 20, 24, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 12px;
  max-width: 480px;
  width: 80vw;
  max-height: 80vh;
  display: flex; flex-direction: column; gap: 8px;
  color: #fff;
}
.pat-pick-hdr {
  display: flex; align-items: center;
  font-size: 12px; font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pat-pick-hdr span { flex: 1; }
.pat-pick-close {
  background: none; color: rgba(255, 255, 255, 0.7);
  border: none; font-size: 18px; cursor: pointer;
  padding: 0 4px; line-height: 1;
}
.pat-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 4px; overflow-y: auto;
}
.pat-pick-tile {
  width: 60px; height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-size: cover; background-position: center;
  cursor: pointer; padding: 0;
  font-size: 9px; color: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}
.pat-pick-tile:hover { border-color: #ff1e78; color: #ff1e78; }
.pat-pick-clear, .pat-pick-url, .pat-pick-upload {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}
.pat-pick-upload {
  background: rgba(255, 30, 120, 0.18);
  color: #fff;
  border-color: rgba(255, 30, 120, 0.4);
}
.pat-pick-upload:hover { background: rgba(255, 30, 120, 0.35); }

/* Phase23b: FHV per-building selection list. Compact, scrollable, with a pink
   accent on hover/selected to match the editor's accent palette. */
.bldg-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.20);
}
.bldg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  font-size: 11px; line-height: 1.3;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  color: rgba(220,230,255,0.85);
}
.bldg-row:last-child { border-bottom: none; }
.bldg-row:hover { background: rgba(255,30,120,0.08); color: #fff; }
.bldg-row-selected {
  background: rgba(255,30,120,0.18);
  color: #fff;
  border-left: 3px solid #ff1e78;
  padding-left: 5px;
}
.bldg-name { font-weight: 500; }
.bldg-id  { font-size: 9.5px; color: rgba(255,255,255,0.45); font-family: monospace; }
.bldg-selected {
  padding: 6px 8px;
  font-size: 10.5px;
  background: rgba(255,30,120,0.10);
  border: 1px solid rgba(255,30,120,0.30);
  border-radius: 3px;
  color: rgba(220,230,255,0.9);
  display: flex; justify-content: space-between; align-items: center;
}
.bldg-selected strong { color: #ff1e78; }
.bldg-clear {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
}
.bldg-clear:hover { color: #fff; border-color: #ff1e78; }

/* Phase23c: per-building controls beneath the selected-row marker. */
.bldg-controls {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
}
.bldg-controls .prop-row { margin-bottom: 0; }
.bldg-controls .prop-value em { color: rgba(255,255,255,0.4); font-style: normal; font-size: 9.5px; }
.bldg-reset-height {
  margin-top: 6px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 4px 6px;
  font-size: 10px;
  cursor: pointer;
}
.bldg-reset-height:hover { color: #fff; border-color: #ff1e78; }

/* phase27.26: per-building OBJ upload/download/remove */
.bldg-objbadge {
  margin-left: 6px; font-size: 11px; line-height: 1;
  opacity: 0.85;
}
.bldg-obj-row {
  display: flex; gap: 6px; margin-top: 8px;
}
.bldg-obj-row button {
  flex: 1;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 5px 6px;
  font-size: 10px;
  cursor: pointer;
}
.bldg-obj-row button:hover { color: #fff; border-color: #ff1e78; }
.bldg-obj-row button:disabled { opacity: 0.5; cursor: wait; }
.bldg-obj-row .bldg-obj-clear { color: #ff1e78; border-color: rgba(255,30,120,0.4); }
.bldg-obj-status {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(255,30,120,0.06);
  border: 1px solid rgba(255,30,120,0.18);
  border-radius: 2px;
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  word-break: break-all;
}
.bldg-obj-status a { color: rgba(255,30,120,0.85); text-decoration: none; }
.bldg-obj-status a:hover { color: #ff1e78; text-decoration: underline; }

/* Phase23e: collapsible layer groups in the sidebar. */
.layer-group { margin: 0 0 8px; }
.layer-group-summary {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  padding: 4px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.layer-group-summary::-webkit-details-marker { display: none; }
.layer-group-summary::before {
  content: '▶'; display: inline-block;
  margin-right: 6px; font-size: 8px;
  transition: transform 0.12s ease;
  color: rgba(255,255,255,0.4);
}
.layer-group[open] > .layer-group-summary::before { transform: rotate(90deg); }
.layer-group-summary:hover { color: #fff; border-color: rgba(255,30,120,0.4); }
.layer-group-count { color: rgba(255,255,255,0.35); font-weight: 400; }
.layer-group-rows {
  padding: 4px 0 0;
}