/* Tile-painter — /map/tile-painter. Blank dark paint canvas + crisp
 * pixel-art overlays + the scrollable atlas palette. */

.tp-flush-shell {
  position: fixed;
  top: var(--app-shell-header-offset, 56px);
  left: var(--app-shell-navbar-offset, 0px);
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--mantine-color-body);
  border-top: 1px solid var(--mantine-color-default-border);
  border-left: 1px solid var(--mantine-color-default-border);
  overflow: hidden;
}

/* DashFlexLayout fills its host. */
.tp-flush-shell > .flexlayout__layout,
.tp-flush-shell > div {
  height: 100%;
  width: 100%;
}

/* The map is a blank design surface — no basemap. Dark in both schemes
 * so pixel art reads against it. */
.tp-canvas-map,
.tp-canvas-map .leaflet-container {
  background:
    light-dark(#11161f, #0b1220);
}

/* ImageOverlays draped per painted cell — keep pixel art crisp. */
.tp-cell-overlay,
.tp-ghost-overlay {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tp-hover-rect,
.tp-canvas-guide {
  pointer-events: none;
}

/* Edit/View toggle EasyButton — active (Edit) state mirrors the
 * dl2-tile-selector-btn "active" look so the mode is unmistakable. */
.tp-edit-easybtn.tp-edit-active,
.tp-edit-easybtn.tp-edit-active button,
.tp-edit-active.leaflet-bar a {
  background: var(--mantine-color-blue-6);
  color: #fff;
}

/* Palette — the uploaded/bundled atlas rendered as one scrollable image
 * with a click-to-pick highlight box over the selected cell. */
.tp-palette-scroll {
  position: relative;
  overflow: auto;
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-md);
  background:
    light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
  min-height: 120px;
}

#tp-palette-img {
  display: block;
}

#tp-palette-highlight {
  position: absolute;
  border: 2px solid #4dabf7;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  display: none;
  z-index: 5;
}

/* Object-slicing overlay — light boxes over the palette showing how the
 * atlas is sectioned into the catalog objects the AI can place. Clicking a
 * box selects that whole object as the brush. */
#tp-palette-objects { z-index: 4; }
.tp-object-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(77, 171, 247, 0.7);
  background: rgba(77, 171, 247, 0.10);
  cursor: pointer;
}
.tp-object-box:hover {
  background: rgba(77, 171, 247, 0.30);
  border-color: #fff;
}