manage/src/styles/main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');


:root {
  --primary-color: #1677ff;
  --primary-gradient: linear-gradient(45deg, #1677ff, #36cff0);
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
}

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}

// Layout styles
.app-layout {
  min-height: 100vh;
}

.app-header {
  @apply flex items-center justify-between px-6 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;
  height: 64px;
}

.app-sidebar {
  @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;

  .ant-menu {
    @apply border-0;

    .ant-menu-item {
      @apply rounded-lg;
      height: 44px;
      line-height: 44px;
      margin-bottom: 8px;

      .ant-menu-item-icon+span {
        opacity: 1;
        transition: opacity 0.2s;
      }

      &:hover {
        @apply bg-gray-100 dark:bg-gray-700;
      }

      &.ant-menu-item-selected {
        background: var(--primary-color);
        color: #fff;
      }
    }

    &.ant-menu-inline-collapsed {

      .ant-menu-item,
      .ant-menu-submenu .ant-menu-submenu-title {
        padding: 0 !important;
        text-align: center;

        .ant-menu-item-icon {
          line-height: 44px;
          margin: 0;
        }

        .ant-menu-title-content {
          opacity: 0;
          display: none;
        }
      }
    }

    .ant-menu-submenu {
      .ant-menu-submenu-title {
        @apply rounded-lg;
        height: 44px;
        line-height: 44px;

        &:hover {
          @apply bg-gray-100 dark:bg-gray-700;
        }
      }

      &.ant-menu-submenu-open {
        >.ant-menu-submenu-title {
          color: var(--primary-color);
        }
      }
    }
  }
}

// Logo styles
.logo {
  @apply flex items-center justify-center h-16 border-b border-gray-200 dark:border-gray-700;

  h1 {
    @apply text-lg font-semibold m-0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

// Dark mode styles
.dark {
  @apply bg-gray-900;

  .ant-card {
    background: #1f1f1f;

    .ant-card-head {
      color: rgba(255, 255, 255, 0.85);
      border-bottom-color: #303030;
    }
  }

  .ant-table {
    background: #1f1f1f;

    .ant-table-thead>tr>th {
      background: #141414;
      color: rgba(255, 255, 255, 0.85);
    }

    .ant-table-tbody>tr>td {
      border-bottom: 1px solid #303030;
    }
  }
}

// Statistics card styles
.stat-card {
  @apply rounded-lg border border-gray-100 dark:border-gray-800 p-6;

  .stat-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center mb-4;
  }

  .stat-title {
    @apply text-gray-600 dark:text-gray-400 text-sm font-medium;
  }

  .stat-value {
    @apply text-2xl font-semibold mt-2;
  }
}

/* 滚动条基础样式 */
::-webkit-scrollbar {
  width: 8px;
  /* 垂直滚动条宽度 */
  height: 8px;
  /* 水平滚动条高度 */
}

/* 亮色模式滚动条样式 */
::-webkit-scrollbar-track {
  @apply bg-gray-100;
  /* 轨道背景色 */
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors;
  /* 滑块样式 */
}

/* 暗色模式滚动条样式 */
.dark {
  ::-webkit-scrollbar-track {
    @apply bg-gray-800;
    /* 暗色模式轨道背景 */
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-600 hover:bg-gray-500;
    /* 暗色模式滑块样式 */
  }
}

/* Firefox 滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
}

.dark * {
  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
}



::view-transition-new(root),
::view-transition-old(root) {
  animation: none;
}

html.dark::view-transition-old(root) {
  z-index: 9999;
}

.ant-menu-root {
  height: 100%;
  border: none !important;
  background-color: transparent !important;

}

.ant-layout-sider {
  @apply rounded-r-xl dark:!bg-black/80
}

.ant-layout-header{
  @apply rounded-b-sm ml-2
}