/* ============================================
   /portal/assets/css/mobile_mega_menu.css
   手机端——双栏抽屉菜单（阿里云风格）
============================================ */
@media (max-width: 768px) {
  /* =============================================
   Mobile 双栏 Mega Menu（阿里云）
   ============================================== */
  .portal-mobile-mega {
      display: none;
      background: #fff;
      flex-direction: row;
      height: 100%;        /* ⭐ 吃满 portal-mobile-body */
      overflow: hidden;    /* ⭐ 防止外层滚动 */
  }

  body.portal-menu-open .portal-mobile-mega {
      display: flex;
  }

  /* 左栏 */
  .mobile-l1-column {
      width: 35%;
      background: #f3f4f6;
      border-right: 1px solid #e5e7eb;
      overflow-y: auto;
  }

  .mobile-l1-item {
      padding: 14px 16px;
      font-size: 15px;
      cursor: pointer;
  }

  .mobile-l1-item.active {
      background: #e0e7ff;
      color: #1d4ed8;
      font-weight: 500;
  }
  
  /* 一级菜单文字 + 箭头布局 */
  .mobile-l1-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  /* 默认箭头（朝下） */
  .mobile-l1-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280; /* 灰色箭头 */
      transition: transform 0.2s ease;
  }

  /* 展开时箭头朝上 */
  .mobile-l1-item.active .mobile-l1-arrow {
      transform: rotate(180deg);
  }

  /* 左栏：一级下的二级组（有三级时才显示） */
.mobile-l1-group {
    display: none;
    border-top: 1px solid #e5e7eb;
}

.mobile-l1-group.active {
    display: block;
}

/* 左栏二级菜单（有三级时） */
.mobile-l2-item-left {
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

/* ⭐ 一级 + 二级整体容器（用于整块高亮） */
.mobile-l1-block {
    background: transparent;
}

/* ⭐ 展开时整块变蓝（一级 + 二级一起高亮） */
.mobile-l1-block.active {
    background: #e0e7ff;
}

/* ⭐ 一级菜单背景透明（避免双层蓝色） */
.mobile-l1-item {
    background: transparent !important;
}

/* ⭐ 二级菜单背景透明（让整块背景生效） */
.mobile-l2-item-left {
    background: transparent !important;
}

/* ⭐ 二级菜单 active 时只改变文字颜色，不改变背景 */
.mobile-l2-item-left.active {
    color: #1d4ed8;
    font-weight: 500;
}

  /* 右栏 */
  .mobile-l2-column {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
  }

  /* 三级菜单 */
  .mobile-l3-panel {
      display: none;
      padding-left: 12px;
      border-left: 2px solid #e5e7eb;
      margin-bottom: 10px;
  }

  .mobile-l3-panel.active {
      display: block;
  }

  .mobile-l3-link {
      display: block;
      padding: 8px 0;
      font-size: 14px;
      color: #374151;
  }
  
    /* 二级面板（无三级时使用） */
  .mobile-l2-panel {
      display: none;
  }

  .mobile-l2-panel.active {
      display: block;
  }

  .mobile-l2-link {
      display: block;
      padding: 10px 0;
      font-size: 15px;
      color: #111827;
  }

  .mobile-l2-link:hover {
      color: #1d4ed8;
  }
  
  /* ⭐ 左栏、右栏都必须允许滚动 */
  .mobile-l1-column,
  .mobile-l2-column {
      min-height: 0;   /* ⭐ 关键中的关键 */
      overflow-y: auto;
  }

  /* ⭐ 左栏内部的二级组也要允许滚动 */
  .mobile-l1-group {
      max-height: 100%;
      min-height: 0;
      overflow-y: auto;
  }
  
  /* ⭐ 右侧栏顶部标题（大厂风格） */
  .mobile-panel-title {
      font-size: 16px;     /* ⭐ 字体大小 */
      font-weight: 550;   /* ⭐ 字体粗细 */
      color: #111827;     /* ⭐ 字体颜色 */
      padding: 4px 0 10px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #e5e7eb; /* ⭐ 分隔线 */
  }
  
    /* ⭐⭐⭐ 手机端四级菜单（新增） ⭐⭐⭐ */

  /* 三级标题 + 箭头 */
  .mobile-l3-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
  }

  /* 三级箭头 */
  .mobile-l3-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280;
      transition: transform 0.2s ease;
  }

  /* 展开时箭头旋转 */
  .mobile-l3-item.active .mobile-l3-arrow {
      transform: rotate(180deg);
  }

  /* 四级菜单容器（默认隐藏） */
  .mobile-l4-panel {
      display: none;
      padding-left: 16px;
      border-left: 2px solid #e5e7eb;
      margin-bottom: 8px;
  }

  /* 四级菜单项 */
  .mobile-l4-link {
      display: block;
      padding: 6px 0;
      font-size: 14px;
      color: #374151;
  }

}  /* ← 这里是 @media 的结束 */
  
 /* ------------------双栏抽屉菜单代码到此结束----------------------*/