/**
 * 全览（All）视图：把所有启用画布的图元渲染在主 TransformWrapper 内的同一张
 * 大画布里，每个画布占据各自的区域。仅用细边框区分区域，无背景色 / 网格。
 *
 * 视觉规则：
 * - 大画布自身没有背景（沿用外层 map-area 背景）；
 * - 每个区域只有一条细边框 + 圆角；
 * - 标题条在画布边框外（上方），装箱时为标题带预留高度；
 * - 区内资源图元与标题分层，标题不拦截交互。
 */

.pisell-floor-map-layout-overview {
  &-area-block {
    box-sizing: border-box;
  }

  &--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }

  &-area {
    /**
     * 区域边框：浅色外观深色描边，深色外观浅色描边；
     * 都用 2px 粗描边，避免在大画布远缩放时被吃成 1 个亚像素而看不见。
     * 自身不响应平移/缩放（由主 TransformWrapper 接管），仅作为区域边框；
     * 内部 ItemLayer 的图元仍可点击/hover。
     */
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    box-sizing: border-box;

    /**
     * 深色外观下深色描边几乎贴近背景，区域分割不可见——切换到浅色描边。
     * 选择器命中 PisellFloorMapLayout 根容器上的 `data-appearance-mode="dark"`，
     * 该属性来源于外层 ResourceWallViewportToolbar 浅/深切换按钮。
     */
    [data-appearance-mode='dark'] & {
      border-color: rgba(255, 255, 255, 0.32);
    }
  }

  /**
   * 外置标题带：占布局预留高度，标签在带内底对齐，与下方画布边框留出间距。
   */
  &-area-title {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 8px;
    pointer-events: none;
    overflow: visible;
  }

  &-area-title-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 12px 4px 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 3px solid var(--fmap-primary, #1677ff);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
    line-height: 1.35;
    box-sizing: border-box;

    [data-appearance-mode='dark'] & {
      background: rgba(28, 28, 30, 0.94);
      border-color: rgba(255, 255, 255, 0.18);
      border-left-color: var(--fmap-primary, #1677ff);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
  }

  &-area-title-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fmap-primary, #1677ff);
    background: color-mix(
      in srgb,
      var(--fmap-primary, #1677ff) 14%,
      #fff
    );
    border-radius: 4px;

    [data-appearance-mode='dark'] & {
      background: color-mix(
        in srgb,
        var(--fmap-primary, #1677ff) 22%,
        rgba(28, 28, 30, 1)
      );
    }
  }

  &-area-title-text {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    [data-appearance-mode='dark'] & {
      color: #f5f5f5;
    }
  }
}
