@procedure-prefix: pisell-procedure;
@pisell-layout-prefix: pisell-layout;

// 断点
@breakpoint-xl: 1366px;
@breakpoint-lg: 1133px;
@breakpoint-md: 960px;
@breakpoint-sm: 744px;

// 信息区宽度（根据屏幕断点）
@sidebar-width-xl: 405px;  // ≥1133px
@sidebar-width-md: 376px;  // 960px-1133px
@sidebar-width-sm: 290px;  // 744px-960px
@sidebar-width-880: 344px;  // 880px-960px

// 间距
@gap-default: 16px;
@padding-default: 16px;

// footer 高度预估（包含 padding）
@footer-height: 61px;

// 颜色
@color-bg-header: #fff;
@color-bg-body: #f5f5f5;
@color-bg-content: #fff;
@color-bg-sidebar: #fff;
@color-bg-footer: #ececec;
@color-border: #e8e8e8;

// ========== 主容器 ==========
.@{procedure-prefix} {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  // 最外层 Layout
  > .pisell-lowcode-layout,
  > .ant-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  // ========== 头部区域 ==========
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px @padding-default;
    background-color: @color-bg-header;
    border-bottom: 1px solid @color-border;
    flex-shrink: 0;
    height: auto !important;
    line-height: normal !important;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: @gap-default;

    // 左侧区域
    &__left {
      flex-shrink: 0;
      z-index: 1;
      cursor: pointer;
    }

    // 中间步骤条区域
    &__center {
      flex: 1;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    // 右侧区域
    &__right {
      flex-shrink: 0;
      z-index: 1;
      cursor: pointer;
    }
  }

  // ========== 主体区域 ==========
  &-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    // 主体区域内部的 Layout
    > .pisell-lowcode-layout,
    > .ant-layout {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: stretch; // 让子元素拉伸填满高度
      background-color: @color-bg-body;
      gap: @gap-default;
      padding: @gap-default;
    }

    // ========== 布局模式：比例布局 ==========
    &--ratio {
      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
        @media (max-width: calc(@breakpoint-sm - 1px)) {
          > .pisell-lowcode-layout,
          > .ant-layout {
            .@{procedure-prefix}-sidebar {
              display: none !important;
            }

            .@{procedure-prefix}-content {
              flex: 1 !important;
              max-width: 100% !important;
            }
          }
        }
      }
    }
  }

  // 内容区 - 高度 flex:1 填满主体区域
  &-content {
    flex: 1;
    min-width: 0;
    padding: 12px @padding-default;
    background-color: @color-bg-content;
    border-radius: 4px;

    // 纵向排列时的样式
    .@{procedure-prefix}-body--vertical & {
      width: 100% !important;
      flex: 1 1 auto;
    }
  }

  // 信息区 - 高度自适应内容，sticky 定位
  &-sidebar {
    width: auto !important;
    max-width: initial !important;
    min-width: initial !important;
    flex: 0 0 auto !important;
    background-color: @color-bg-sidebar;
    border-radius: 4px;
    position: sticky!important;
    overflow-y: auto;
    align-self: flex-start; // 不拉伸高度
    background: transparent !important;
    height: 100% !important;

    .@{pisell-layout-prefix}-sider-content{
      overflow: hidden !important;
      display: flex;
      flex-direction: column;

      .@{procedure-prefix}-footer{
        flex-shrink: 0;
      }
    }

    // ≥1133px: 固定宽度 405px
    @media (min-width: @breakpoint-xl) {
      width: @sidebar-width-xl;
    }
    // 960px <= viewportWidth < 1133px: 376px ~ 405px
    @media (min-width: @breakpoint-md) and (max-width: calc(@breakpoint-lg - 1px)) {
      max-width: @sidebar-width-xl;
      min-width: @sidebar-width-md;
    }

    // 744px <= viewportWidth < 960px: 290px ~ 376px
    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
      max-width: @sidebar-width-md;
      min-width: @sidebar-width-sm;
    }

    // viewportWidth < 744px: slider区域隐藏  
    @media (max-width: calc(@breakpoint-sm - 1px)) {
        display: none;
    }

    // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
    &--ratio {
      // 比例模式下，使用 CSS 变量的宽度值覆盖固定宽度
      width: var(--sidebar-ratio-width) !important;
      max-width: var(--sidebar-ratio-max-width) !important;
      min-width: 0 !important;
      flex: var(--sidebar-ratio-flex) !important;
    }
  }

  .@{procedure-prefix}-sider-content-top{
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
  }

  // 纵向排列时的样式
  .@{procedure-prefix}-body--vertical & {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: relative;
    top: auto;

    .@{procedure-prefix}-sider-content-top{
      height: 100%;
    }
  }

  .@{procedure-prefix}--modal & {
    background: red;
    &-sidebar {
      // >= 880px: 固定宽度 344px
    @media (min-width: 880px) {
      width: @sidebar-width-880 !important;
    }

    // 744px <= viewportWidth < 880px: 290px ~ 344px
    @media (min-width: @breakpoint-sm) and (max-width: calc(880px - 1px)) {
      max-width: @sidebar-width-880 !important;
      min-width: @sidebar-width-sm !important;
    }

    // viewportWidth < 744px: 290px
    @media (max-width: calc(@breakpoint-sm - 1px)) {
      width: @sidebar-width-sm !important;
      display: block !important;
    }
    }
  }

  // ========== 底部区域基础样式 ==========
  &-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: @gap-default;
    padding: 12px @padding-default;
    background-color: @color-bg-footer;
    border-top: 1px solid @color-border;
    flex-shrink: 0;
    height: auto !important;
    z-index: 100;
    overflow: hidden; // 防止内容溢出

    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
    &__summary {
      flex-shrink: 0;
      margin-right: auto;
      // 默认隐藏（PC 端）
      display: none;
      cursor: pointer;

      // 移动端显示（仅页面模式）
      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
        @media (max-width: calc(@breakpoint-sm - 1px)) {
          display: block;
        }
      }
    }

    // 主要内容容器（左侧插槽 + 右侧操作按钮）
    &__content {
      display: flex;
      align-items: center;
      gap: @gap-default;
      flex: 1;
      min-width: 0;
      justify-content: space-between;
    }

    // 左侧插槽区域
    &__left {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: @gap-default;
    }

    // 右侧操作按钮区域
    &__actions {
      display: flex;
      align-items: center;
      gap: @gap-default;
      flex: 1;
      min-width: 0; // 关键：允许 flex 子元素收缩
      justify-content: flex-end;
      overflow: hidden; // 防止内容溢出
    }

    // ========== Footer 位置模式样式 ==========
    
    // 固定在整体底部 - 跟随页面滚动，始终在底部
    &--fixed-bottom {
      position: relative;
      bottom: auto;
      flex-shrink: 0;
      margin-top: auto;
    }

    // 内嵌在 content 区域底部 - 紧贴内容底部
    &--fixed-content-bottom {
      position: relative;
      margin-top: auto;
      border-radius: 0 0 4px 4px;
    }

    // 内嵌在 sidebar 区域底部 - 紧贴 sidebar 底部
    &--fixed-sidebar-bottom {
      position: relative;
      margin-top: auto;
      border-radius: 0 0 4px 4px;
    }

    // 悬浮在整体区域 - 固定在视口底部，有阴影
    &--float-all {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 0;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    // 悬浮在 content 区域 - 绝对定位在 content 底部
    &--float-content {
      border-radius: 8px;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
      // 具体定位在容器调整中设置
    }

    // 悬浮在 sidebar 区域（设计默认）- sticky 在 sidebar 底部
    &--float-sidebar {
      border-radius: 8px;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
      // 具体定位在容器调整中设置
    }
  }

  // ========== Footer 位置模式的容器调整 ==========
  
  // 悬浮在整体区域 - 需要给内容区域预留 footer 高度
  &--footer-float-all {
    // 给内容区域预留空间，避免内容被遮挡
    .@{procedure-prefix}-content {
      padding-bottom: calc(@footer-height);
    }
  }

  // 当 footer 内嵌在 content 区域底部时
  &--footer-fixed-content-bottom {
    .@{procedure-prefix}-content {
      display: flex;
      flex-direction: column;
      
      // 内容包装器
      > *:not(.@{procedure-prefix}-footer) {
        flex: 1;
      }
    }
  }

  // 当 footer 悬浮在 content 区域时
  &--footer-float-content {
    // 让整个页面滚动，不是 content 内部滚动
    .@{procedure-prefix}-body {
      overflow: visible;
      
      > .pisell-lowcode-layout,
      > .ant-layout {
        overflow: visible;
        padding-bottom: 0;
      }
    }
    
    .@{procedure-prefix}-content {
      // 不设置 overflow，让内容自然撑开
      overflow: visible;
      padding-bottom: 0;
      
      // footer 使用 sticky 定位，随页面滚动保持在底部
      .@{procedure-prefix}-footer--float-content {
        position: sticky;
        bottom: 0;
        margin: 0 -@padding-default;
        margin-top: auto;
      }
    }
  }

  // 当 footer 内嵌在 sidebar 区域底部时
  &--footer-fixed-sidebar-bottom {
    .@{procedure-prefix}-sidebar {
      display: flex;
      flex-direction: column;
      max-height: 100%; // 限制最大高度
      overflow: hidden;
      
      .ant-layout-sider-children {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        
        // sidebar 内容区（可滚动）
        > *:not(.@{procedure-prefix}-footer) {
          flex: 1;
          overflow-y: auto;
        }
        
        // footer 固定在底部
        .@{procedure-prefix}-footer--fixed-sidebar-bottom {
          flex-shrink: 0;
        }
      }
    }
  }

  // 当 footer 悬浮在 sidebar 区域时
  &--footer-float-sidebar {
    .@{procedure-prefix}-sidebar {
      display: flex;
      flex-direction: column;
      max-height: 100%; // 限制最大高度
      overflow: hidden;
      
      .ant-layout-sider-children {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        
        // sidebar 内容区（可滚动）
        > *:not(.@{procedure-prefix}-footer) {
          flex: 1;
          overflow-y: auto;
        }
        
        // footer 悬浮在底部
        .@{procedure-prefix}-footer--float-sidebar {
          flex-shrink: 0;
          position: sticky;
          bottom: 0;
          margin: 0;
        }
      }
    }
  }

  // ========== 小屏适配（744px-960px）：头部两行显示（仅页面模式） ==========
  &:not(&--modal) {
    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
      .@{procedure-prefix}-header {
        flex-wrap: wrap;
        min-height: auto;
        padding: 12px @padding-default;

        // 第一行：返回按钮
        .@{procedure-prefix}-header__left {
          order: 1;
          flex: 0 0 auto;
        }

        // 第一行：关闭按钮，推到右边
        .@{procedure-prefix}-header__right {
          order: 2;
          flex: 0 0 auto;
          margin-left: auto;
        }

        // 第二行：步骤条独占一行
        .@{procedure-prefix}-header__center {
          order: 3;
          width: 100%;
          flex: 0 0 100%;
          padding: 0;
          justify-content: flex-start;
          overflow-x: auto;
        }
      }
    }

    // ========== 移动端适配（<744px）：头部一行显示 ==========
    @media (max-width: calc(@breakpoint-sm - 1px)) {
      .@{procedure-prefix}-header {
        flex-wrap: nowrap;
        min-height: auto;
        padding: 12px @padding-default;

        // 左侧：返回按钮
        .@{procedure-prefix}-header__left {
          flex: 0 0 auto;
        }

        // 中间：步骤条（简化显示当前步骤）
        .@{procedure-prefix}-header__center {
          flex: 1;
          padding: 0 @gap-default;
          overflow: hidden;
        }

        // 右侧：关闭按钮
        .@{procedure-prefix}-header__right {
          flex: 0 0 auto;
        }
      }

      // 主体区域移动端
      .@{procedure-prefix}-body {
        > .pisell-lowcode-layout,
        > .ant-layout {
          padding: @gap-default;
        }
      }

      // 内容区占满
      .@{procedure-prefix}-content {
        width: 100% !important;
      }
    }
  }
}