@import '../../style/variables.less';
@import '../components/Layout/index.less';
@import '../components/ProCollapse/style/index.less';
@import '../components/ProFooter/style/index.less';
@import '../components/ProHeader/style/index.less';
@import '../components/TabsManager/style/index.less';

.pro-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f7f9fd;
  position: relative;

  // 背景图层：固定在顶部，延伸到可视区域下方，z-index低于header和content让内容显示在背景之上
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background-image: var(--header-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1;
  }

  .pro-layout-menu-open {
    .pro-layout-open-menu-lv1 {
      h2 {
        font-weight: bold;
      }
    }
  }

  // pro-collapse折叠调整
  .pro-collapse {
    border-radius: var(--zaui-border-radius, 8px);
    &.@{ant-prefix}-collapse-borderless {
      background: #fff;
    }
    &.pro-collapse-no-title {
      .pro-collapse-content {
        border-radius: var(--zaui-border-radius, 8px) !important;
        padding: var(--zaui-space-size-md, 16px);
      }
      .pro-header-no-describe {
        padding: 0 !important;
      }
    }
    .@{ant-prefix}-collapse-item-active {
      &.pro-collapse-panel {
        & > .@{ant-prefix}-collapse-header {
          border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0 !important;
        }
      }
    }

    .pro-collapse-content {
      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
      padding: var(--zaui-space-size-md, 16px);

      .pro-form {
        margin-bottom: 0;
      }
    }
    &.pro-collapse-level2 {
      .pro-collapse-panel .@{ant-prefix}-collapse-header {
        background: #fff;
      }
      .pro-collapse-content {
        padding-bottom: var(--zaui-space-size-sm, 8px);
      }
    }

    .pro-collapse-panel {
      .@{ant-prefix}-collapse-header {
        border-radius: var(--zaui-border-radius, 8px) !important;
        background: #e4f2fe;
      }
      .pro-collapse-level2-collapse {
        .@{ant-prefix}-collapse-header {
          border-radius: 0 !important;
        }
      }
    }
  }

  // pro-header调整
  .pro-header {
    &.pro-header-no-describe {
      padding: 10px var(--zaui-space-size-md, 16px) !important;
      .pro-header-top {
        padding-bottom: 0;
      }
    }
    &.pro-header-has-describe {
      .pro-header-nav-open {
        border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
      }
    }
    border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
  }

  .pro-layout-menu-open,
  .pro-layout-menu {
    box-shadow: none;
  }

  .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
    position: relative;
    z-index: 1;
    color: var(--zaui-text, #343434);
  }
  .pro-layout-menu-fold {
    background: #f7f9fd;

    .pro-layout-menu-fold-list {
      background: #f7f9fd;
      border-right: none;
      li {
        position: relative;
        background: #f7f9fd;

        & > div {
          position: relative;
          z-index: 1;
        }

        &.active {
          background: transparent;
          border-radius: var(--zaui-border-radius, 8px);

          div .pro-layout-icon {
            color: #fff;
          }

          &::before {
            position: absolute;
            top: 4px;
            left: 5px;
            width: calc(100% - 10px);
            height: 38px;
            background-color: var(--zaui-brand, #006aff);
            border-radius: var(--zaui-border-radius, 8px);
            opacity: 1 !important;
            content: '';
          }
        }

        &:hover {
          background: transparent;

          &::before {
            position: absolute;
            top: 4px;
            left: 5px;
            width: calc(100% - 10px);
            height: 38px;
            background-color: var(--zaui-brand, #006aff);
            border-radius: var(--zaui-border-radius, 8px);
            opacity: 0.08;
            content: '';
          }
        }

        div .pro-layout-icon {
          color: var(--zaui-text, #343434);
        }
      }
    }
  }

  .pro-layout-menu-collapsed {
    background: #f7f9fd;
    border-right: none;
    &:hover {
      background: transparent !important;
    }
    &:hover::after {
      position: absolute;
      top: 5px;
      left: 5px;
      width: calc(100% - 10px);
      height: 40px;
      background-color: var(--zaui-brand, #006aff);
      border-radius: var(--zaui-border-radius, 8px);
      opacity: 0.08;
      content: '';
    }

    &::before {
      position: absolute;
      top: 0;
      left: var(--zaui-space-size-sm, 8px);
      width: calc(100% - 16px);
      height: 1px;
      background: #dee0e3;
      content: '';
    }
  }

  .pro-layout-row {
    .pro-layout-arrow {
      border-color: var(--zaui-text, #343434);
    }
  }
  .@{ant-prefix}-menu-root {
    overflow-x: hidden !important;
    border: none !important;
  }

  .anticon-caret-down {
    color: #999 !important;
    inset-inline-end: 8px;
  }

  .pro-layout-row .pro-layout-menu {
    background: #f7f9fd;
  }

  // 所有 Menu 相关的背景色统一为 #F7F9FD
  .pro-layout-open-menu {
    background: #f7f9fd;

    .@{ant-prefix}-menu {
      background: #f7f9fd;
    }

    .@{ant-prefix}-menu-root {
      background: #f7f9fd;
    }

    .@{ant-prefix}-menu-sub {
      background: #f7f9fd !important;
    }
  }

  .pro-layout-open-menu
    .@{ant-prefix}-menu-root
    > .@{ant-prefix}-menu-submenu
    .@{ant-prefix}-menu-sub {
    background: #f7f9fd;
  }

  .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
    color: var(--zaui-text, #343434);
    padding-right: 26px;
  }
  .@{ant-prefix}-menu-item-only-child {
    .@{ant-prefix}-menu-title-content div h2 {
      padding-right: 16px;
    }
  }

  .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
  .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover,
  .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
    position: relative;
    background-color: transparent !important;

    &:before {
      position: absolute;
      left: var(--zaui-space-size-sm, 8px);
      width: calc(100% - 8px);
      min-height: 38px;
      height: 80%;
      background-color: var(--zaui-brand, #006aff);
      border-radius: var(--zaui-border-radius, 8px);
      opacity: 0.08;
      content: '';
    }
  }

  .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
    &::after {
      display: none;
    }

    background: transparent !important;

    h2 {
      color: var(--zaui-brand, #006aff) !important;
    }
  }

  /** Tab 栏 Portal 挂载点（位于 header 渐变区，内容区之上） */
  .pro-layout-tabs-bar-wrapper {
    // 与 pro-layout-content 对齐：同样的左右边距，无内边距让 tab 从左侧直接对齐
    margin-right: var(--zaui-space-size-md, 16px);
    margin-left: 48px;
    padding: 0;
    // 滚动时固定在 header 正下方
    position: sticky;
    top: var(--pro-layout-header-height, 64px);
    z-index: 89;
    // 与 ::before 渐变层像素级对齐：滚动时遮住上滚的白色内容，同时保持渐变背景可见
    // background-color 作为实体打底，防止渐变图片浅色区域透出白色内容
    background-color: #f7f9fd;
    background-image: var(--header-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-attachment: fixed;
    // 高度动画：CSS Grid 技巧，支持不定高度平滑过渡
    display: grid;
    grid-template-rows: 0fr;
    transition: margin-left 0.3s cubic-bezier(0.2, 0, 0, 1), grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    // 菜单展开时与内容区同步右移
    &.tabs-menu-open {
      margin-left: 220px;
    }

    // Tab 存在时展开
    &.tabs-visible {
      grid-template-rows: 1fr;
    }

    // Grid 子元素需要 overflow: hidden 才能实现 0fr 收起
    > * {
      overflow: hidden;
      min-height: 0;
    }
  }

  /** 内容区 */
  .pro-layout-content {
    position: relative;
    z-index: 10;
    flex: 1;
    margin-top: 0;
    margin-right: var(--zaui-space-size-md, 16px);
    margin-bottom: 0;
    margin-left: 48px;
    padding: 0 var(--zaui-space-size-md, 16px);
    background: #ffffff;
    border-top: 1px solid rgb(235 236 238);
    border-right: 1px solid rgb(235 236 238);
    border-left: 1px solid rgb(235 236 238);
    border-bottom: none;
    border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
    transition: all 0.24s ease;

    // Tab 存在时：顶部边框透明（不用 none，避免 transition:all 产生黑色闪烁）、移除顶部圆角，与 Tab 栏无缝衔接；补上顶部 padding
    &-has-tabs {
      border-top-color: transparent;
      border-radius: 0;
      padding-top: var(--zaui-space-size-md, 16px);
      border-top-right-radius: var(--zaui-border-radius, 8px);
    }
  }

  // 纯净模式：隐藏背景图
  &.pro-layout-pure {
    &::before {
      display: none;
    }
  }

  .pro-layout-row-pure {
    .pro-layout-content {
      margin: 0 !important;
      background: #fff;
      border: none;
    }
  }

  .pro-layout-row-top-pure {
    .pro-layout-content {
      margin-top: 0 !important;
    }
  }

  .pro-layout-row-left-pure {
    .pro-layout-content {
      margin-left: 0 !important;
    }
  }

  .pro-layout-header-pure + .pro-layout-row {
    .pro-layout-sider-new-nav {
      top: 0 !important;
    }
  }
}