/**
 * ╔════════════════════════════════════════════════════════════════╗
 * ║     讯度主题 - 侧边栏 & 顶栏 终极视觉版 V6.5                  ║
 * ╠════════════════════════════════════════════════════════════════╣
 * ║  🎨 设计师：UIUX 萌神 (Kawaii Architect)                        ║
 * ║  ✨ 核心：大气 Logo, 纯净子菜单, 高对比度激活态, 零 !important ║
 * ║  🚫 追求极致的品牌感与交互细节，打造如工艺品般的 UI              ║
 * ╚════════════════════════════════════════════════════════════════╝
 */

:root {
  --sw: 260px;
  --sc: 88px;
  --th: 70px;
  --gbg: rgba(255, 255, 255, 0.35);
  --gbd: rgba(255, 255, 255, 0.5);
  --cbg: rgba(255, 255, 255, 0.95);
  --acc: #6366f1;
}

/* ========== 1. 结构布局 ========== */
/* 🌸 萌神注释：侧边栏样式已迁移到 menu.tpl 的 Tailwind */
/* 🌸 萌神注释：顶部栏样式已迁移到 header.tpl 的 Tailwind */

/* ========== 2. Logo 区域 (大气进化) ========== */
.vertical-menu .navbar-brand-box {
  height: var(--th);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 铺满：移除内边距 */
  background: transparent;
}

.vertical-menu .logo {
  width: 100%;
  height: 100%;
  /* 高度对齐：铺满父容器 (70px) */
  background: #ffffff;
  border-radius: 0;
  /* 铺满：移除圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  /* 移除悬浮阴影，改为底部边框 */
  border: none;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  /* 统一边框风格 */
  transition: all 0.3s ease;
}

.vertical-menu .logo img {
  max-height: 42px;
  /* 显著放大 Logo */
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.1));
}

/* ========== 3. 菜单项风格 (展开态终极白化) ========== */
#sidebar-menu ul li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 6px 16px;
  color: #54667a;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.12);
  /* 淡紫色边框 */
  border-radius: 14px;
  box-shadow:
    0 2px 10px rgba(99, 102, 241, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* 内部高光 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 选中项：圣光化修复 (超高权重确保纯白) */
html body #sidebar-menu ul li.mm-active>a,
html body #sidebar-menu ul li a.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}

/* 🎯 选中态图标强制白色 (萌神终极修复 V4 - 魔法盾版) */
/* 覆盖所有 Boxicons 类型，并使用 !important 对抗系统默认样式 */
html body .vertical-menu #sidebar-menu>ul>li.mm-active>a>i,
html body .vertical-menu #sidebar-menu>ul>li.mm-active>a>span,
html body .vertical-menu #sidebar-menu ul li.mm-active>a i,
html body .vertical-menu #sidebar-menu ul li.mm-active>a span,
html body .vertical-menu #sidebar-menu ul li a.active i,
html body .vertical-menu #sidebar-menu ul li a.active span,
html body .vertical-menu #sidebar-menu ul li.mm-active>a i[class^="bx"],
html body .vertical-menu #sidebar-menu ul li.mm-active>a i[class*=" bx"],
html body #sidebar-menu ul li.mm-active>a i.bx,
html body #sidebar-menu ul li.mm-active>a i.bxs,
html body #sidebar-menu ul li.mm-active>a i[class^="bxs-"],
html body #sidebar-menu ul li.mm-active>a i[class*=" bxs-"],
html body #sidebar-menu ul li.mm-active>a i[class^="bx-"],
html body #sidebar-menu ul li.mm-active>a i[class*=" bx-"] {
  color: #ffffff !important;
  opacity: 1 !important;
  transform: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  -webkit-text-fill-color: #ffffff !important;
  /* 针对某些 webkit 内核的强制填充 */
}

/* 箭头图标也要白色哦~ */
html body .vertical-menu #sidebar-menu ul li.mm-active>a.has-arrow::after {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ========== 4. 子菜单美化 (萌神 V10 优雅版 - 零 !important) ========== */
/* 🚀 V10.0 更新于 2025-01-23 - 纯净优雅，无强制覆盖 */

/* 容器样式 - 使用高权重选择器替代 !important */
html body .vertical-menu #sidebar-menu ul ul.sub-menu {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 8px 0;
  margin: 0;
  position: relative;
}

/* 移除所有装饰线 */
html body #sidebar-menu ul ul.sub-menu::before,
html body #sidebar-menu ul ul.sub-menu::after {
  display: none;
  content: none;
}

/* 移除L型连接线 */
html body #sidebar-menu ul ul.sub-menu li::before {
  display: none;
  content: none;
}

/* 菜单链接样式 - 精致卡片风格 */
html body #sidebar-menu ul ul.sub-menu li a {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  margin: 3px 16px;
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.12);
  /* 淡紫色边框 */
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* 内部高光 */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* 清除伪元素 */
html body #sidebar-menu ul ul.sub-menu li a::before,
html body #sidebar-menu ul ul.sub-menu li a::after {
  content: none;
  display: none;
}

/* ✨ 悬停态：微上浮 + 光晕 */
html body #sidebar-menu ul ul.sub-menu li a:hover {
  color: var(--acc);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(99, 102, 241, 0.15);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
  transform: translateY(-1px);
}

/* 🌟 激活态：晶莹紫光卡片 */
html body #sidebar-menu ul ul.sub-menu li.mm-active>a {
  color: #6366f1;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 激活态左侧指示条 */
html body #sidebar-menu ul ul.sub-menu li.mm-active>a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 0 3px 3px 0;
}

/* ========== 5. 收缩状态修复 (萌神 V11 规范版 - 零 !important) ========== */
/* 🌸 萌神注释：收缩状态布局已迁移到 Tailwind 类切换 */

/* 收缩状态菜单项容器 */
html body.vertical-collpsed #sidebar-menu ul li a {
  width: 50px;
  height: 50px;
  margin: 12px auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

/* 🎯 收缩状态图标强制归位 */
html body.vertical-collpsed #sidebar-menu ul li a i {
  margin: 0;
  padding: 0;
  min-width: auto;
  font-size: 22px;
  transform: none;
  display: block;
  opacity: 1;
}

/* 🎯 收缩状态选中项：深紫背景 + 白图标 */
html body.vertical-collpsed #sidebar-menu ul li.mm-active>a,
html body.vertical-collpsed #sidebar-menu ul li a.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  color: #ffffff;
}

/* 确保选中态图标为白色 */
html body.vertical-collpsed #sidebar-menu ul li.mm-active>a i,
html body.vertical-collpsed #sidebar-menu ul li a.active i {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* 隐藏无关元素 */
body.vertical-collpsed .navbar-brand-box,
body.vertical-collpsed #sidebar-menu span,
body.vertical-collpsed .has-arrow::after,
body.vertical-collpsed .sidebar-promo-v6,
body.vertical-collpsed .promo-box,
body.vertical-collpsed div[class*="promo"] {
  display: none;
}

/* ========== 6. 交互细节 ========== */
/* 🌸 萌神注释：#vertical-menu-btn 样式已迁移到 header.tpl Tailwind */

#sidebar-menu {
  height: calc(100% - 90px);
  overflow-y: auto;
}

#sidebar-menu::-webkit-scrollbar {
  width: 0;
}

.simplebar-mask,
.simplebar-content-wrapper {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════
   7. 移动端响应式 (≤991px) — 萌神 2026-02-26
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* --- 侧边栏：默认滑出屏幕 (Tailwind sidebar) --- */
  #sidebar-menu-container {
    left: -260px !important;
    transform: translateX(0) !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10000 !important;
    box-shadow: none !important;
  }

  /* 兼容旧版 .vertical-menu */
  .vertical-menu {
    position: fixed !important;
    top: 0 !important;
    left: -260px !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 10000 !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
  }

  /* 侧边栏展开态 */
  body.sidebar-enable #sidebar-menu-container,
  body.sidebar-enable .vertical-menu {
    left: 0 !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15) !important;
  }



  /* --- 主内容区：移除左边距，占满宽度 --- */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* --- 顶部栏 --- */
  #page-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    z-index: 9998 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  /* 页面内容加上顶部间距 */
  .page-content {
    padding-top: 64px !important;
  }

  /* 搜索框在手机端隐藏 */
  .topbar-search-box,
  .app-search-v6 {
    display: none !important;
  }

  /* 用户名在手机端隐藏，只留头像 */
  .user-dropdown-trigger span {
    display: none !important;
  }

  .user-dropdown-trigger .bx-chevron-down {
    display: none !important;
  }

  /* --- Dashboard 内容优化 --- */
  /* 主容器减少 padding */
  .w-full.p-6 {
    padding: 12px !important;
  }

  .w-full.p-6 .space-y-6>*+* {
    margin-top: 16px !important;
  }

  /* 欢迎横幅紧凑 */
  .db-banner {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .db-banner h1 {
    font-size: 18px !important;
  }

  .db-banner p {
    font-size: 12px !important;
  }

  /* 用户信息 + 统计卡片单列堆叠 */
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* 用户信息卡内横向 flex 变纵向 — 居中（排除安全设置卡片的 sec-item-left） */
  .db-card .flex.items-center.gap-3:not(.sec-item-left) {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 用户组标签居中 */
  .db-card>.mb-2 {
    text-align: center !important;
  }

  /* 用户名区域也居中 */
  .db-card .flex-shrink-0 {
    text-align: center !important;
  }

  .db-card .flex-shrink-0 .flex.items-center {
    justify-content: center !important;
  }

  /* 财务数据区域居中排列 */
  .db-card .flex-1.flex.gap-3.justify-end {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    gap: 8px !important;
  }

  /* 财务卡片内容居中 */
  .db-finance-card-mini {
    text-align: center !important;
  }

  .db-finance-card-mini .flex.items-center.gap-1 {
    justify-content: center !important;
  }

  /* 统计卡片横向滚动或等分 */
  .db-card .flex.items-center.justify-around {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .db-stat-item {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: 100px !important;
  }

  /* 安全状态条 — 移动端纵向堆叠 */
  .db-card>.flex.items-center.gap-5 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* 安全项目区域：2x2 网格 + 按钮独立一行 */
  .db-card .flex-1.flex.items-center.justify-end.gap-6 {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 20px !important;
  }

  /* "提升安全" 按钮：居中独占一行 */
  .db-card .flex-1.flex.items-center.justify-end.gap-6>a {
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
  }

  /* 快捷功能区域自动换行 */
  .db-quick-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* 产品 & 公告列表区单列 */
  .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════
   8. 超小屏幕 (≤575px)
   ═══════════════════════════════ */
@media (max-width: 575.98px) {
  .db-quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .db-stat-item {
    flex: 0 0 calc(50% - 4px) !important;
  }

  .db-finance-card-mini {
    flex: 1 1 100% !important;
  }
}