/* ============================================================
   layout.css – Grundraster der Anwendung
   ============================================================ */

body {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  /* Spalte fest ans Fenster binden: sonst zieht überbreiter Inhalt (z. B. die
     Kopfleiste) die ganze Seite breiter und schiebt Leisten aus dem Bild. */
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Kopfzeile ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  z-index: 20;
  /* Passt die Kopfleiste nicht ins Fenster, wird sie seitlich scrollbar,
     statt überzulaufen und andere Bereiche zu verdrängen. */
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar > *:not(.topbar__spacer) { flex: 0 0 auto; }

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding-right: var(--sp-2);
}

.topbar__name input {
  width: 190px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-weight: 500;
}
.topbar__name input:hover { border-color: var(--c-border); }
.topbar__name input:focus { border-color: var(--c-accent); background: #fff; outline: none; }

.topbar__group { display: flex; gap: var(--sp-1); }
.topbar__spacer { flex: 1; }

/* ---------- Arbeitsbereich ---------- */
.workspace {
  display: grid;
  /* Die mittlere Spalte darf bis 0 schrumpfen (minmax(0,1fr)), damit die
     Eigenschaften-Leiste nie aus dem Fenster gedrängt wird. Die Leiste ist
     zusätzlich auf einen Bildschirmanteil begrenzt. */
  grid-template-columns: var(--toolbar-w) minmax(0, 1fr) min(var(--inspector-w), 44vw);
  min-height: 0;
}

/* ---------- Werkzeugleiste ---------- */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  overflow-y: auto;
}

.toolbar__sep {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-2) var(--sp-2);
  width: calc(100% - var(--sp-4));
}

/* ---------- Bühne ---------- */
.stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr var(--status-h);
  min-width: 0;
  background: var(--c-canvas);
}

.view {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
}
.view[hidden] { display: none; }

.view canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.statusbar {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
  font-size: 12px;
  color: var(--c-text-soft);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
}
.statusbar__spacer { flex: 1; }
#statusCoords { font-family: var(--font-num); font-size: 11.5px; color: var(--c-text-faint); }

/* ---------- Überlagerungen auf der Zeichenfläche ---------- */
.hud {
  position: absolute;
  top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  z-index: 5;
}
.hud--left  { left: var(--sp-3); }
.hud--right { right: var(--sp-3); align-items: flex-end; }
.hud > * { pointer-events: auto; }

.chip-row { display: flex; gap: var(--sp-1); }
.chip-row--stack { flex-direction: column; align-items: flex-start; }

/* ---------- Eigenschaftenleiste ---------- */
.inspector {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
}

.inspector__tabs {
  display: flex;
  padding: var(--sp-2) var(--sp-2) 0;
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.inspector__tabs::-webkit-scrollbar { display: none; }
.inspector__tabs > * { flex: 0 0 auto; }

.inspector__tab {
  flex: 1;
  padding: 7px 4px 9px;
  border: 0;
  background: none;
  color: var(--c-text-soft);
  font-size: 12.5px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.inspector__tab:hover { color: var(--c-text); background: var(--c-surface-2); }
.inspector__tab.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.inspector__body { overflow-y: auto; min-height: 0; }

.panel { display: none; padding: var(--sp-3); }
.panel.is-active { display: block; }

/* ============================================================
   Aufräumbarer Arbeitsbereich (Photoshop-artig)
   ============================================================ */

/* Burger-Knopf und Ansicht-Menü in der Kopfzeile */
.topbar__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-right: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
  color: var(--c-text);
  touch-action: manipulation;
  flex: 0 0 auto;
}
.topbar__burger:hover { background: var(--c-surface-alt, #f2f3f5); }

.ws-menu {
  position: fixed;
  top: calc(var(--topbar-h) - 4px);
  left: var(--sp-2);
  z-index: 60;
  min-width: 230px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-menu[hidden] { display: none; }
.ws-menu__title {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-text-faint); padding: 6px 8px 4px;
}
.ws-menu label,
.ws-menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--c-text);
  background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
}
.ws-menu label:hover,
.ws-menu__item:hover { background: var(--c-surface-alt, #f2f3f5); }
.ws-menu__sep { border: 0; border-top: 1px solid var(--c-border); margin: 4px 2px; }

/* Leisten ausblenden – Zeichenfläche bekommt den Platz.
   Wichtig: die Spaltenzahl an die sichtbaren Elemente anpassen, sonst rutscht
   die Zeichenfläche in eine 0-Spalte und verschwindet. */
body.hide-toolbar .toolbar { display: none; }
body.hide-toolbar .workspace { grid-template-columns: minmax(0, 1fr) min(var(--inspector-w), 44vw); }
body.hide-inspector .inspector { display: none; }
body.hide-inspector .workspace { grid-template-columns: var(--toolbar-w) minmax(0, 1fr); }
body.hide-toolbar.hide-inspector .workspace { grid-template-columns: minmax(0, 1fr); }

/* Ziehgriff zum Verbreitern der Eigenschaften-Leiste */
.inspector { position: relative; }
.inspector__resize {
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 20;
}
.inspector__resize::after {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px;
  background: transparent;
}
.inspector__resize:hover::after,
body.resizing-inspector .inspector__resize::after { background: var(--c-accent); }
body.resizing-inspector { cursor: col-resize; user-select: none; }

.topbar__burger svg { pointer-events: none; }