/* ═══════════════════════════════════════
   WORKBENCH WORLDS — the world page's surfaces: Layout (WorkbenchWorldLayout.js),
   Spawn pool (WorkbenchWorldPool.js) and Encounters (WorkbenchWorldEncounters.js)
   ═══════════════════════════════════════ */

/* The Layout sub-tab: a heading, one summary line, then the grid filling the
   rest of the slot. It never scrolls as a whole — the grid's canvas and the
   map list scroll on their own, so the heading stays put. */
.wbw-layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

/* The grid's heading with the Open map button beside it. */
.wbw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wbw-editor-slot {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ── The region → map grid (WorkbenchWorldLayoutSurface.js) ── */
/* Maps on the left, the world's regions on the right. */
.wbw-editor {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.wbw-maps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.wbw-find {
  width: 100%;
  box-sizing: border-box;
}

.wbw-map-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
}

/* One draggable map. Dragging it onto a region's cell fills that region. */
.wbw-map {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
}

.wbw-map:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.wbw-map.dragging {
  opacity: 0.5;
}

.wbw-map-name {
  overflow-wrap: anywhere;
  font-weight: 600;
}

/* The Phaser canvas fills this; it is positioned so the drop catcher can
   cover it exactly. */
.wbw-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Over the canvas while a map is being dragged: a canvas is one element, so
   the drag events need a DOM layer of their own to land on. */
.wbw-drop {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.wbw-drop[hidden] {
  display: none;
}

/* The list row's Open map button stays on one line. */
.wb-table [data-wb-row-act] {
  white-space: nowrap;
}

/* ── Spawn pool sub-tab (WorkbenchWorldPool.js) ── */
/* The entry being edited in the side card. */
.wbwp-row.on td {
  background: var(--wb-selected);
}

.wbwp-acts {
  white-space: nowrap;
  text-align: right;
}

.wbwp-acts .wb-btn + .wb-btn {
  margin-left: 6px;
}

.wbwp-npc {
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
}

.wbwp-npc:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* The side card is narrow: its fields stack. */
.wbwp-fields {
  grid-template-columns: minmax(0, 1fr);
}

.wbwp-editor-acts {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ═══════════════════════════════════════
   The world page's Encounters sub-tab (WorkbenchWorldEncounters.js)
   ═══════════════════════════════════════ */

/* ── The surface fills its slot and scrolls inside it ── */
.wbwe-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* ── The encounter editor's title, with Save and Cancel beside it ── */
.wbwe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── A list row's buttons, side by side ── */
.wbwe-acts {
  white-space: nowrap;
  text-align: right;
}

.wbwe-acts .wb-btn + .wb-btn {
  margin-left: 6px;
}

/* ── The editor's body: a fieldset only so a read-only encounter, a
   read-only tier or a save in flight disables every input at once ── */
.wbwe-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── "From the quest …": where a quest's encounter is edited ── */
.wbwe-from {
  margin: 12px 0 16px;
  color: var(--text-secondary);
}

/* ── A quest's name that opens its page ── */
.wbwe-quest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.wbwe-quest:hover span {
  text-decoration: underline;
}