/* ============================================
   /portal/assets/css/portal.mobile.css
   ============================================ */
/* ============================================
   手机端适配（核心）
   ============================================ */
@media (max-width: 768px) {

  /* ⭐ 抽屉整体：挂在导航下方，高度 40vh，浅灰背景 */
  .portal-mobile-menu-wrapper {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--portal-nav-height));
    background: #e5eaf3;          /* ⭐ 让背景色柔和但明显，和白色卡片区分 */
    padding: 0;        /* ← 关键：去掉左右 padding */
    z-index: 2000;
    flex-direction: column;
  }

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

  /* ⭐ 顶部固定悬浮层（你的 footer）视觉样式 */
  .portal-mobile-footer {
      padding: 6px 16px;   /* 上下 8，左右 16 —— 作为统一“内边距基准线” */
      background: #ffffff;        /* 白色背景 */
      border-bottom: 1px solid #e5e7eb;  /* ⭐ 顶部悬浮层的分割线（你要的） */
      box-shadow: 0 1px 2px rgba(0,0,0,0.06); /* ⭐ 轻微阴影（可选） */
      display: flex;
      flex-direction: column;     /* 整体仍然纵向 */
      gap: 12px;
  }

  /* ⭐ 登录/注册按钮保持同一行（放这里最合适） */
  #portal-login-row-mobile {
      display: flex;
	  flex-direction: row;
	  gap: 10px;
	  align-items: center;
  }
  
  /* ⭐ 登录后用户区：头像 + 昵称 + 后台 + 退出 全部一行 */
  #portal-user-row-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;              /* 按钮与头像之间的间距 */
      padding: 6px 0;      /* ⭐ 只保留上下 8，左右用 footer 的 16px */
      background: #ffffff;
  }

  /* ⭐ 头像 + 昵称 */
  #portal-user-info-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
  }
  
  /* ⭐ 后台 + 退出按钮（同一行） */
  #portal-user-actions-mobile {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-left: auto;      /* ⭐ 让按钮组靠右 */
  }
  
  /* 手机端昵称最多显示 4 个汉字宽度 */
  #portal-user-name-mobile {
    max-width: 4em;        /* ⭐ 关键：限制为 4 个汉字宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;      /* ⭐ 关键：让昵称宽度固定为 4em，不被 flex 挤压 */
  }

  /* 手机端导航栏左右留白 + 左右对齐 */
  .portal-nav-inner {
    padding: 0 16px;
    justify-content: space-between;
  }

  /* 隐藏 PC 菜单 */
  .portal-nav-left > .portal-nav-menu {
    display: none;
  }

  /* 显示汉堡按钮 */
  .portal-nav-toggle {
    display: block;
    margin-left: 12px;
  }

  /* 隐藏 PC 登录/注册 */
  #portal-btn-login,
  #portal-btn-register {
    display: none;
  }

  /* 退出登录按钮靠左 */
  #portal-btn-logout-mobile {
    margin-left: 0 !important;   /* 保持靠左 */
    align-self: flex-start;      /* ⭐ 内容宽度，不拉满整行 */
    width: auto !important;      /* ⭐ 强制恢复按钮原本宽度 */
  }

  /* 二级菜单改为纵向 */
  body.portal-menu-open .portal-submenu {
    display: none;
    position: static;
    flex-direction: column;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  body.portal-menu-open .portal-nav-item-with-children {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  body.portal-menu-open .portal-nav-link.has-children {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  /* 删除导致按钮错位的 margin-top */
  body.portal-menu-open #portal-btn-logout-mobile {
    margin-top: 0 !important;
  }

  /* mobile 通用按钮基类 */
  .portal-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
  }

  /* mobile 登录后按钮样式 */
  #portal-btn-dashboard-mobile,
  #portal-btn-logout-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
	
	border: none;      /* ⭐ 去掉默认边框 */
    outline: none;     /* ⭐ 去掉点击外轮廓 */
    box-shadow: none;  /* ⭐ 确保没有阴影边框 */
  }

  /* 灰色按钮 */
  #portal-btn-dashboard-mobile {
    background: #e5e7eb;
    color: #111827;
  }

  /* 红色按钮 */
  #portal-btn-logout-mobile {
    background: #ef4444;
    color: #ffffff;
  }
  
  /* 移除 mobile 菜单所有链接的下划线 */
  .portal-mobile-mega a {
      text-decoration: none;
  }
 
  /* ============================
   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; /* ⭐ 分隔线 */
  }
}

/* ⭐ 遮罩层（默认隐藏） */
.portal-mobile-overlay {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);   /* ⭐ 半透明黑色，和亚马逊一致 */
    z-index: 1500;                  /* ⭐ 在抽屉下面一层 */
}

/* ⭐ 当菜单打开时显示遮罩 */
body.portal-menu-open .portal-mobile-overlay {
    display: block;
}