/* ============================================================
 * Shell layout — Phase 1 of the UI redesign.
 *
 * 4 fixed zones overlaying the game canvas:
 *
 *   ┌─────────────────────────────────────────────────────────┐
 *   │  Top Strip (64h)                                        │
 *   ├──────────┬──────────────────────────────────────────────┤
 *   │          │                                              │
 *   │ Outliner │            (canvas)                          │
 *   │  240w    │                                              │
 *   │          ├────────────────────────────┬─────────────────┤
 *   │          │  Selection Band (248h)     │  Minimap        │
 *   │          │                            │  (280×248)      │
 *   └──────────┴────────────────────────────┴─────────────────┘
 *
 * Phase 1 ships only the empty zones + a debug-overlay flag
 * (?layout-debug=1). Atom components mount into these in Phase
 * 2; existing legacy panels migrate into them in Phase 4.
 * ============================================================ */

#kethran-shell {
  position: fixed;
  inset: 0;
  pointer-events: none; /* zones re-enable for their own children */
  z-index: 30; /* above the 3D canvas, below modals */
}

#kethran-shell > .zone {
  position: absolute;
  pointer-events: auto;
  display: flex;
}

/* Split top into two clusters so the strip doesn't have to span
 * the full viewport. Left holds empire mark / energy / pills /
 * chips. Right holds status / alerts / theme cog. Each is its own
 * floating panel — the canvas between them stays clickable. */
#shell-top {
  /* Legacy single zone — kept hidden so the old game.js template
   * still parses, but the new template writes top-left + top-right
   * directly. */
  display: none;
}
#shell-top-left {
  top: 12px;
  left: 12px;
  height: 64px;
  max-width: calc(100vw - 24px);
}
#shell-top-right {
  top: 12px;
  right: 12px;
  height: 64px;
  display: flex;
  align-items: center;
}

#shell-outliner {
  top: 88px;
  left: 12px;
  width: 280px;
  /* Content-sized; caps before colliding with the bottom shell.
   * 88 (top) + 248 (shell-bottom h) + 12 (gap) + 32 (buffer). */
  max-height: calc(100vh - 380px);
  flex-direction: column;
  /* Clip anything that would otherwise overlap the bottom shell —
   * EntityListPanel's own inline maxHeight is bigger than this cap,
   * so without the clip the list would visibly bleed below. */
  overflow: hidden;
}
#shell-outliner > .kethran-zone-child {
  height: auto !important;
  /* !important beats the panel's inline style.maxHeight that
   * EntityListPanel sets at construction (calc(100vh - 120px)). */
  max-height: 100% !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* The list / resource scrollers inside also carry an inline
 * style="max-height: calc(100vh - 200px)" — clamp them to the
 * zone too so the scrollbar sits inside the panel instead of
 * extending past it. */
#shell-outliner #entity-list-items,
#shell-outliner #entity-list-resources {
  max-height: none !important;
  flex: 1;
  min-height: 0;
}

#shell-bottom {
  left: 12px;
  right: 304px;
  bottom: 12px;
  height: 248px;
}

#shell-minimap {
  right: 12px;
  bottom: 12px;
  width: 280px;
  height: 248px;
}

/* Debug overlay — append ?layout-debug=1 to the URL to see the
 * four zone outlines. Cyan dashed border + zone label centred. */
body[data-layout-debug="true"] #shell-top,
body[data-layout-debug="true"] #shell-outliner,
body[data-layout-debug="true"] #shell-bottom,
body[data-layout-debug="true"] #shell-minimap {
  border: 1px dashed var(--accent);
  background: var(--accent-dim);
}
body[data-layout-debug="true"] .zone-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
}
body:not([data-layout-debug="true"]) .zone-label {
  display: none;
}

/* ── Empty-state placeholders — visible in debug mode only.
 *    Atoms (Phase 2) and migrated panels (Phase 4) replace these
 *    when their zone gets populated. ─────────────────────────── */
.shell-stub {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-faint);
  text-transform: uppercase;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

/* Phase 4 migration helpers — when a panel has been moved from
 * document.body into a shell zone, it should NOT also keep its
 * old fixed-position styles. The .kethran-zone-child class
 * normalises this. */
.kethran-zone-child {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
}