/**
 * Vuexy Enterprise Design System & Responsive Layout Framework
 * 经典企业级 SaaS Vuexy 主题规范与全响应式布局库 (支持全局最大化与全局固定居中)
 */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── 核心调色板 (Vuexy Palette) ── */
  --vuexy-primary: #7367f0;
  --vuexy-primary-hover: #655ac8;
  --vuexy-primary-rgb: 115, 103, 240;
  --vuexy-primary-soft: rgba(115, 103, 240, 0.12);
  --vuexy-primary-contrast: #ffffff;

  --vuexy-secondary: #a8aaae;
  --vuexy-secondary-soft: rgba(168, 170, 174, 0.12);

  --vuexy-success: #28c76f;
  --vuexy-success-soft: rgba(40, 199, 111, 0.12);

  --vuexy-danger: #ea5455;
  --vuexy-danger-soft: rgba(234, 84, 85, 0.12);

  --vuexy-warning: #ff9f43;
  --vuexy-warning-soft: rgba(255, 159, 67, 0.12);

  --vuexy-info: #00cfe8;
  --vuexy-info-soft: rgba(0, 207, 232, 0.12);

  /* ── 界面背景与表面体系 ── */
  --vuexy-bg: #f8f7fa;
  --vuexy-surface: #ffffff;
  --vuexy-surface-alt: #fcfcfd;
  --vuexy-border: #dbdade;
  --vuexy-border-subtle: #ebe9f1;

  /* ── 文字与排版色彩 ── */
  --vuexy-text-heading: #4b465c;
  --vuexy-text-body: #5d596c;
  --vuexy-text-muted: #82808b;
  --vuexy-text-light: #a5a3ae;

  /* ── 阴影体系 (Soft Elevation) ── */
  --vuexy-shadow-xs: 0 1px 3px rgba(165, 163, 174, 0.12);
  --vuexy-shadow-sm: 0 2px 6px 0 rgba(165, 163, 174, 0.16);
  --vuexy-shadow-md: 0 4px 18px 0 rgba(165, 163, 174, 0.22);
  --vuexy-shadow-lg: 0 8px 24px 0 rgba(165, 163, 174, 0.28);
  --vuexy-shadow-card-hover: 0 10px 28px 0 rgba(115, 103, 240, 0.14);

  /* ── 圆角体系 ── */
  --vuexy-radius-xs: 4px;
  --vuexy-radius-sm: 6px;
  --vuexy-radius-md: 10px;
  --vuexy-radius-lg: 14px;
  --vuexy-radius-pill: 9999px;

  /* ── 布局参数 ── */
  --vuexy-header-height: 64px;
  --vuexy-sidebar-width: 280px;
  --vuexy-gutter-fluid: clamp(20px, 3.2vw, 56px);
  --vuexy-max-width-boxed: 1440px;
}

/* 基础重置 */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--vuexy-bg);
  color: var(--vuexy-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   响应式布局系统 (Layout Engine: Fluid Max vs Boxed Fixed)
   ========================================================================== */

/* 1. 默认：全局自适应宽屏 (Fluid Responsive with Ultra-Wide Safety Cap) */
body.layout-fluid .vuexy-layout-container,
.layout-fluid .vuexy-layout-container {
  width: 100%;
  max-width: 1680px; /* 2K / 4K 视觉安全上限，防止两极无限拉扯 */
  padding-left: var(--vuexy-gutter-fluid);
  padding-right: var(--vuexy-gutter-fluid);
  margin-left: auto;
  margin-right: auto;
}

/* 2. 可选：全局固定居中 (Boxed Fixed Layout) */
body.layout-boxed .vuexy-layout-container,
.layout-boxed .vuexy-layout-container {
  width: 100%;
  max-width: var(--vuexy-max-width-boxed);
  padding-left: clamp(16px, 2.5vw, 32px);
  padding-right: clamp(16px, 2.5vw, 32px);
  margin-left: auto;
  margin-right: auto;
}

/* ── 4K / 2K 超清超宽屏响应式强化 (Ultra-HD & 2K Displays) ── */
@media (min-width: 2560px) {
  :root {
    --vuexy-gutter-fluid: clamp(32px, 4vw, 88px);
    --vuexy-max-width-boxed: 1680px;
  }
  body.layout-fluid .vuexy-layout-container,
  .layout-fluid .vuexy-layout-container {
    max-width: 1840px;
  }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --vuexy-gutter-fluid: clamp(28px, 3.5vw, 64px);
    --vuexy-max-width-boxed: 1520px;
  }
  body.layout-fluid .vuexy-layout-container,
  .layout-fluid .vuexy-layout-container {
    max-width: 1680px;
  }
}

/* ── 平板端响应式 (Tablet: 768px ~ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --vuexy-gutter-fluid: clamp(18px, 3vw, 32px);
  }
}

/* ── 手机端响应式 (Mobile: < 768px) ── */
@media (max-width: 768px) {
  :root {
    --vuexy-gutter-fluid: 16px;
    --vuexy-header-height: 58px;
  }
  body.layout-fluid .vuexy-layout-container,
  body.layout-boxed .vuexy-layout-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── 小屏手机适配 (Compact Mobile: < 480px) ── */
@media (max-width: 480px) {
  :root {
    --vuexy-gutter-fluid: 12px;
  }
  body.layout-fluid .vuexy-layout-container,
  body.layout-boxed .vuexy-layout-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 布局模式切换器控件 (Theme Layout Switcher) */
.vuexy-layout-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(115, 103, 240, 0.08);
  border: 1px solid rgba(115, 103, 240, 0.2);
  border-radius: var(--vuexy-radius-pill);
  padding: 3px;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}

.vuexy-switcher-btn {
  padding: 4px 12px;
  border-radius: var(--vuexy-radius-pill);
  border: none;
  background: transparent;
  color: var(--vuexy-text-body);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.vuexy-switcher-btn.active {
  background: var(--vuexy-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(115, 103, 240, 0.35);
}

.vuexy-switcher-btn:not(.active):hover {
  background: rgba(115, 103, 240, 0.12);
  color: var(--vuexy-primary);
}

/* ==========================================================================
   SaaS 双栏主工作区布局 (Responsive 2-Column Main Workspace)
   ========================================================================== */

.vuexy-main-grid {
  display: grid;
  grid-template-columns: var(--vuexy-sidebar-width) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  width: 100%;
}

/* 超大宽屏优化 (1920px+)：主工作区弹性自适应，给卡片最大展示空间 */
@media (min-width: 1920px) {
  .vuexy-main-grid {
    gap: 40px;
  }
}

/* 笔记本与小屏优化 */
@media (max-width: 1200px) {
  :root {
    --vuexy-sidebar-width: 250px;
  }
  .vuexy-main-grid {
    gap: 24px;
  }
}

/* 平板与手机端折叠 */
@media (max-width: 992px) {
  .vuexy-main-grid {
    grid-template-columns: 1fr;
  }
  .vuexy-sidebar {
    position: static !important;
    width: 100% !important;
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   自适应 Skill 卡片网格 (Fluid Responsive Auto-Fill Grid)
   ========================================================================== */

.vuexy-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  width: 100%;
}

/* 超大宽屏 (1920px+) 自动舒展为 3~4 列，杜绝任何两端留白空洞 */
@media (min-width: 1720px) {
  .vuexy-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 26px;
  }
}

/* 中等屏幕保持 2~3 列 */
@media (max-width: 768px) {
  .vuexy-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Vuexy UI 组件规范 (Components)
   ========================================================================== */

/* 1. Vuexy 卡片 */
.vuexy-card {
  background: var(--vuexy-surface);
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius-md);
  box-shadow: var(--vuexy-shadow-xs);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.vuexy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vuexy-shadow-card-hover);
  border-color: rgba(115, 103, 240, 0.4);
}

.vuexy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.vuexy-card:hover::before {
  background: linear-gradient(90deg, #7367f0, #9e95f5);
}

/* 2. Vuexy 侧边栏垂直菜单 */
.vuexy-sidebar-box {
  background: var(--vuexy-surface);
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius-md);
  padding: 20px;
  box-shadow: var(--vuexy-shadow-xs);
}

.vuexy-menu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vuexy-text-light);
  margin-bottom: 12px;
  padding-left: 8px;
}

.vuexy-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--vuexy-radius-sm);
  color: var(--vuexy-text-body);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 3px;
}

.vuexy-menu-item:hover {
  background: var(--vuexy-bg);
  color: var(--vuexy-primary);
  transform: translateX(3px);
}

.vuexy-menu-item.active {
  background: linear-gradient(72.47deg, #7367f0 22.16%, rgba(115, 103, 240, 0.75) 76.47%);
  color: #ffffff;
  box-shadow: 0 2px 6px 0 rgba(115, 103, 240, 0.48);
}

.vuexy-menu-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--vuexy-radius-pill);
  background: var(--vuexy-bg);
  color: var(--vuexy-text-muted);
}

.vuexy-menu-item.active .vuexy-menu-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 3. Vuexy 柔和标签徽章 (Soft Badges) */
.vuexy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--vuexy-radius-xs);
  line-height: 1.4;
}

.vuexy-badge-primary {
  background: var(--vuexy-primary-soft);
  color: var(--vuexy-primary);
  border: 1px solid rgba(115, 103, 240, 0.2);
}

.vuexy-badge-success {
  background: var(--vuexy-success-soft);
  color: var(--vuexy-success);
  border: 1px solid rgba(40, 199, 111, 0.2);
}

.vuexy-badge-warning {
  background: var(--vuexy-warning-soft);
  color: #d97706;
  border: 1px solid rgba(255, 159, 67, 0.2);
}

.vuexy-badge-danger {
  background: var(--vuexy-danger-soft);
  color: var(--vuexy-danger);
  border: 1px solid rgba(234, 84, 85, 0.2);
}

.vuexy-badge-info {
  background: var(--vuexy-info-soft);
  color: #0891b2;
  border: 1px solid rgba(0, 207, 232, 0.2);
}

/* 4. Vuexy 按钮体系 */
.btn-vuexy-primary {
  background: linear-gradient(72.47deg, #7367f0 22.16%, rgba(115, 103, 240, 0.85) 76.47%);
  color: #ffffff !important;
  border: none;
  padding: 9px 20px;
  border-radius: var(--vuexy-radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 6px 0 rgba(115, 103, 240, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-vuexy-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px 0 rgba(115, 103, 240, 0.5);
  background: linear-gradient(72.47deg, #655ac8 22.16%, #7367f0 76.47%);
}

.btn-vuexy-outline {
  background: transparent;
  color: var(--vuexy-primary) !important;
  border: 1px solid var(--vuexy-primary);
  padding: 8px 18px;
  border-radius: var(--vuexy-radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-vuexy-outline:hover {
  background: var(--vuexy-primary-soft);
  transform: translateY(-1px);
}