@tailwind base;
@tailwind components;
@tailwind utilities;

/* 重置浏览器默认 margin/padding */
html,
body {
  margin: 0;
  padding: 0;
}
/** 全局样式 */
@style-entry-file: as-needed;
@import './@{style-entry-file}.less';
@import './transition/index.less';
@import "./component.less";

// 侧边栏菜单高亮颜色（深红棕色）
@menu-dark-item-active-bg: #6b2d2d;
@menu-dark-selected-item-text-color: #fff;

// 主题（AntDv4 使用 CSS-in-JS token 体系，不再需要 Less 动态主题）

// 覆盖 ant-design-vue 深色菜单选中高亮样式
// 使用更柔和的半透明背景 + 圆角
:where(.ele-admin-layout) {
  // 侧边栏深色菜单选中样式
  .ant-menu-dark.ant-menu-root {
    // 选中项：半透明深红棕背景 + 8px圆角 + 宽度减少5px
    .ant-menu-item-selected,
    .ant-menu-item-active {
      background-color: rgba(107, 45, 45, 0.5) !important;
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.9) !important;
    }

    // 悬停效果
    .ant-menu-item:hover {
      background-color: rgba(107, 45, 45, 0.3) !important;
      border-radius: 8px;
    }

    // 子菜单选中项
    .ant-menu-submenu-selected > .ant-menu-submenu-title {
      background-color: rgba(107, 45, 45, 0.5) !important;
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }
}

:root {
  // 灰色主题
  --grey-1: #1b1b1b;
  --grey-2: #363636;
  --grey-3: #4d4d4d;
  --grey-4: #737373;
  --grey-5: #a6a6a6;
  --grey-6: #d9d9d9;
  --grey-7: #e6e6e6;
  --grey-8: #f2f2f2;
  --grey-9: #f7f7f7;
  --grey-10: #fafafa;
}

.ele-admin-theme-dark {
  // 灰色主题
  --grey-1: #fafafa;
  --grey-2: #f7f7f7;
  --grey-3: #f2f2f2;
  --grey-4: #e6e6e6;
  --grey-5: #d9d9d9;
  --grey-6: #a6a6a6;
  --grey-7: #737373;
  --grey-8: #4d4d4d;
  --grey-9: #363636;
  --grey-10: #1b1b1b;
}
