/* ============================================================================
   barox office – Editor
   Vollflaechiges Raster: Kopfzeile, drei Spalten, Statuszeile.
   ========================================================================== */

.editor-body { overflow: hidden; }

.ed {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
}

/* --------------------------------- Kopfzeile ------------------------------ */
/* Die Kopfzeile muss umbrechen duerfen. Der Editor blendet den Seitenrollbalken
   aus (.editor-body), damit die Zeichenflaeche den Bildschirm fuellt – ohne
   Umbruch wuerden die Schaltflaechen rechts aus dem Bild geschoben und waeren
   dann weder sichtbar noch erreichbar. */
.ed-top {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 14px; row-gap: 8px;
  padding: 8px 16px;
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0, 45, 78, 0.06);
}
.ed-back { display: flex; align-items: center; flex: none; }
.ed-logo { height: 26px; width: auto; display: block; }

/* Der Planname gibt als Erstes nach, wenn es eng wird – er ist das Einzige
   hier, das auch gekuerzt noch seinen Zweck erfuellt. */
.ed-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--navy); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 6px 10px;
  flex: 1 1 16ch; min-width: 9ch; max-width: 28ch;
}
.ed-name:hover { border-color: var(--navy-20); }
.ed-name:focus { border-color: var(--navy); background: var(--white); }

.ed-save {
  font-size: 0.8rem; color: var(--grey); flex: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: var(--navy-10);
}
.ed-save.dirty { background: #fff3d6; color: #6b5100; }
.ed-save.saving { background: var(--navy-10); color: var(--navy); }
.ed-save.error { background: #fdecea; color: #7a1710; }

.ed-view-switch {
  display: flex; margin-left: auto; flex: none;
  border: 1px solid var(--navy-40); border-radius: var(--radius); overflow: hidden;
}
.ed-view-switch button { white-space: nowrap; }
.ed-view-switch button {
  font: inherit; font-size: 0.85rem; padding: 6px 14px;
  border: none; background: var(--white); color: var(--navy); cursor: pointer;
}
.ed-view-switch button + button { border-left: 1px solid var(--navy-20); }
.ed-view-switch button.active { background: var(--navy); color: var(--white); font-weight: 700; }

.ed-top-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-top-actions .btn-small { white-space: nowrap; }

/* ------------------------------- Hauptbereich ----------------------------- */
.ed-main {
  display: grid;
  grid-template-columns: 236px 1fr 288px;
  min-height: 0;
}

.ed-left, .ed-right {
  background: var(--white); overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 0;
}
.ed-left { border-right: 1px solid var(--line); }
.ed-right { border-left: 1px solid var(--line); }

.panel { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel h3 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy-60); font-family: var(--font-text); font-weight: 700;
  margin: 0 0 12px;
}

/* --------------------------------- Werkzeuge ------------------------------ */
.tool-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 12px; border-bottom: 1px solid var(--line);
}
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; font-size: 0.76rem; color: var(--navy);
  padding: 10px 4px; cursor: pointer;
  background: var(--white); border: 1px solid var(--navy-20); border-radius: var(--radius);
}
.tool:hover { background: var(--navy-10); }
.tool.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.tool.active .tool-icon { color: var(--amber); }
.tool-icon { font-size: 1.2rem; line-height: 1; }

.row-check {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; font-size: 0.88rem; color: var(--ink); margin-bottom: 8px;
}
.row-check input { width: auto; margin: 0; }
.row-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 400; font-size: 0.88rem; color: var(--ink); margin-bottom: 8px;
}
.row-field > span:first-child { flex: none; color: var(--grey); }
.row-field select, .row-field input, .row-field .with-unit { width: 130px; flex: none; }
.row-field input[type="range"] { padding: 0; }

/* ---------------------------------- Katalog ------------------------------- */
.catalog { margin: 10px 0; max-height: 40vh; overflow-y: auto; }
.catalog-group { margin-bottom: 10px; }
.catalog-group h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--navy-60); margin: 8px 0 4px; font-weight: 700;
}
.catalog-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 0.83rem; text-align: left; color: var(--ink);
  padding: 6px 8px; margin-bottom: 2px; cursor: pointer;
  background: var(--white); border: 1px solid transparent; border-radius: var(--radius);
}
.catalog-item:hover { background: var(--navy-10); }
.catalog-item.active { border-color: var(--amber); background: #fff8e8; }
.catalog-swatch {
  width: 22px; height: 16px; flex: none; border-radius: 3px;
  border: 1px solid rgba(0, 45, 78, 0.25);
}
.catalog-item .dims { color: var(--grey); font-size: 0.74rem; margin-left: auto; flex: none; }
.catalog-del {
  border: none; background: none; color: var(--navy-40); cursor: pointer;
  font-size: 0.9rem; padding: 0 2px; flex: none;
}
.catalog-del:hover { color: var(--error); }

/* -------------------------------- Zeichenflaeche -------------------------- */
.ed-stage { position: relative; min-width: 0; min-height: 0; display: grid; }
.ed-stage[data-view="2d"] { grid-template-columns: 1fr; }
.ed-stage[data-view="3d"] { grid-template-columns: 1fr; }
.ed-stage[data-view="split"] { grid-template-columns: 1fr 1fr; }

.ed-stage[data-view="2d"] .stage-3d,
.ed-stage[data-view="3d"] .stage-2d { display: none; }

.stage-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.stage-pane + .stage-pane { border-left: 1px solid var(--line); }
.stage-pane canvas { display: block; width: 100%; height: 100%; }
.stage-2d { background: #eef1f4; cursor: crosshair; }
.stage-2d.tool-select { cursor: default; }
.stage-2d.panning { cursor: grabbing; }
.stage-3d { background: #dfe5ea; }

/* Startpunkt bei einem leeren Plan. Der Hintergrund faengt keine Klicks ab,
   damit die Zeichenflaeche darunter bedienbar bleibt. */
.stage-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none;
}
/* display: flex wuerde das hidden-Attribut sonst uebersteuern. */
.stage-empty[hidden] { display: none; }
.stage-empty-card {
  pointer-events: auto;
  max-width: 44ch; text-align: center;
  background: var(--white); border-radius: var(--radius-lg);
  border-top: 3px solid var(--amber);
  box-shadow: 0 18px 44px rgba(0, 45, 78, 0.22);
  padding: 30px 32px;
}
.stage-empty-card h2 { font-size: 1.2rem; margin-bottom: 8px; }
.stage-empty-card p { color: var(--grey); font-size: 0.9rem; margin: 0 0 20px; }
.stage-empty-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.stage-hint {
  position: absolute; left: 12px; top: 12px;
  background: rgba(0, 45, 78, 0.88); color: var(--white);
  font-size: 0.8rem; padding: 7px 12px; border-radius: var(--radius);
  max-width: 44ch; pointer-events: none;
}
.stage-hint:empty { display: none; }

.zoom-controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.zoom-controls button {
  width: 32px; height: 32px; font-size: 1rem; line-height: 1;
  border: 1px solid var(--navy-20); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94); color: var(--navy); cursor: pointer;
}
.zoom-controls button:hover { background: var(--white); border-color: var(--navy); }

.view3d-controls {
  position: absolute; left: 12px; top: 12px; display: flex; gap: 4px;
}
.view3d-controls button {
  font: inherit; font-size: 0.8rem; padding: 5px 12px;
  border: 1px solid var(--navy-20); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94); color: var(--navy); cursor: pointer;
}
.view3d-controls button.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.view3d-hint {
  position: absolute; left: 12px; bottom: 10px; margin: 0;
  font-size: 0.76rem; color: var(--navy-60); pointer-events: none;
}

/* ------------------------------- Eigenschaften ---------------------------- */
#props-body .prop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; font-size: 0.88rem;
}
#props-body .prop-row > span:first-child { color: var(--grey); flex: none; }
#props-body input, #props-body select { width: 130px; flex: none; }
#props-body .with-unit { width: 130px; flex: none; }
#props-body .prop-actions { display: flex; gap: 6px; margin-top: 14px; }
#props-body .prop-note { font-size: 0.84rem; color: var(--grey); margin: 0 0 12px; }
#props-body fieldset { border: none; padding: 0; margin: 0 0 10px; }
#props-body .seg { display: flex; border: 1px solid var(--navy-20); border-radius: var(--radius); overflow: hidden; }
#props-body .seg button {
  flex: 1; font: inherit; font-size: 0.8rem; padding: 5px 4px;
  border: none; background: var(--white); color: var(--navy); cursor: pointer;
}
#props-body .seg button + button { border-left: 1px solid var(--navy-20); }
#props-body .seg button.active { background: var(--navy); color: var(--white); }

.scale-state { font-size: 0.88rem; margin: 0 0 10px; color: var(--navy); font-weight: 500; }
.scale-state.unset { color: var(--warning); }

.summary { margin: 0; font-size: 0.86rem; }
.summary div { display: flex; justify-content: space-between; padding: 3px 0; }
.summary dt { color: var(--grey); margin: 0; }
.summary dd { margin: 0; font-weight: 700; color: var(--navy); }

/* -------------------------------- Statuszeile ----------------------------- */
.ed-status {
  display: flex; align-items: center; gap: 20px;
  padding: 5px 16px; font-size: 0.78rem; color: var(--navy-20);
  background: var(--navy);
}
.ed-status #status-msg { color: var(--amber); }

/* ------------------------------ Analyse-Dialog ---------------------------- */
.analyze-progress {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 28px 0; padding: 14px 16px;
  background: var(--navy-10); border-radius: var(--radius);
}
.analyze-progress p { margin: 0; font-size: 0.88rem; color: var(--navy); }
.spinner {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 3px solid var(--navy-20); border-top-color: var(--amber);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.analyze-result h3 { font-size: 0.95rem; margin: 18px 0 6px; }
.analyze-counts { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.analyze-counts li { font-size: 0.86rem; color: var(--grey); }
.analyze-counts strong { display: block; font-size: 1.3rem; color: var(--navy); font-family: var(--font-display); }
.analyze-pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.analyze-pick legend { font-size: 0.8rem; color: var(--navy-60); padding: 0 6px; }
.analyze-pick label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 400; font-size: 0.88rem; margin: 0 0 6px; color: var(--ink);
}
.analyze-pick input { width: auto; }

#history-list { margin: 16px 28px 0; max-height: 46vh; overflow-y: auto; }
.history-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}

/* -------------------------------- Responsive ------------------------------ */
@media (max-width: 1100px) {
  .ed-main { grid-template-columns: 200px 1fr 250px; }
  .ed-name { width: 20ch; }
}
@media (max-width: 860px) {
  .ed-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ed-left, .ed-right { flex-direction: row; overflow-x: auto; border: none; border-bottom: 1px solid var(--line); }
  .ed-right { display: none; }
  .ed-stage[data-view="split"] { grid-template-columns: 1fr; }
  .ed-top { flex-wrap: wrap; }
}