/* CSS 主题变量 - 工业模型软件管理平台 */

/* 导入变量配置 */
@import './variables.css';

:root {
  /* ===== 基础颜色常量 ===== */

  /* 核心调色板 - 基础颜色值 */
  --color-primary-base: 42, 92, 170;     /* #2A5CAA */
  --color-primary-light-base: 77, 148, 255;  /* #4d94ff */
  --color-primary-dark-base: 30, 74, 140;    /* #1e4a8c */
  --color-success-base: 76, 175, 80;     /* #4CAF50 */
  --color-warning-base: 255, 152, 0;     /* #FF9800 */
  --color-error-base: 244, 67, 54;       /* #F44336 */
  --color-info-base: 33, 150, 243;       /* #2196F3 */
  --color-bg-primary-base: 30, 30, 30;   /* #1E1E1E */
  --color-bg-secondary-base: 42, 42, 42; /* #2A2A2A */
  --color-bg-tertiary-base: 26, 26, 26;  /* #1A1A1A */
  --color-white-base: 255, 255, 255;     /* #ffffff */
  --color-black-base: 0, 0, 0;           /* #000000 */

  /* ===== 语义化颜色系统 ===== */

  /* 主色调 */
  --color-primary: rgb(var(--color-primary-base));
  --color-primary-light: rgb(var(--color-primary-light-base));
  --color-primary-dark: rgb(var(--color-primary-dark-base));
  --color-primary-gradient: linear-gradient(135deg, rgb(var(--color-primary-base)) 0%, rgb(var(--color-primary-light-base)) 100%);
  --color-primary-gradient-hover: linear-gradient(135deg, rgb(var(--color-primary-dark-base)) 0%, rgb(var(--color-primary-base)) 100%);

  /* 状态色 */
  --color-success: rgb(var(--color-success-base));
  --color-warning: rgb(var(--color-warning-base));
  --color-error: rgb(var(--color-error-base));
  --color-info: rgb(var(--color-info-base));
  
  /* 背景状态色 */
  --color-bg-error: rgba(var(--color-error-base), 0.1);
  --color-bg-success: rgba(var(--color-success-base), 0.1);
  --color-bg-warning: rgba(var(--color-warning-base), 0.1);
  --color-bg-info: rgba(var(--color-info-base), 0.1);

  /* 背景色 */
  --color-bg-primary: rgb(var(--color-bg-primary-base));
  --color-bg-secondary: rgb(var(--color-bg-secondary-base));
  --color-bg-tertiary: rgb(var(--color-bg-tertiary-base));
  --color-bg-quaternary: rgb(37, 37, 37);
  --color-bg-card: rgba(var(--color-bg-secondary-base), 0.8);
  --color-bg-hover: rgba(var(--color-white-base), 0.05);
  --color-bg-active: rgba(var(--color-primary-base), 0.1);
  --color-bg-input: rgba(var(--color-white-base), 0.05);

  /* 渐变背景 */
  --color-bg-gradient-main: linear-gradient(135deg, rgb(var(--color-bg-primary-base)) 0%, rgb(var(--color-bg-secondary-base)) 100%);
  --color-bg-gradient-sidebar: linear-gradient(135deg, rgb(var(--color-bg-tertiary-base)) 0%, rgb(37, 37, 37) 100%);
  --color-bg-gradient-header: linear-gradient(135deg, rgb(var(--color-bg-tertiary-base)) 0%, rgb(37, 37, 37) 100%);
  --color-bg-gradient-brand: var(--color-primary-gradient);
  --color-bg-gradient-brand-hover: var(--color-primary-gradient-hover);

  /* 边框色 */
  --color-border-primary: rgba(var(--color-white-base), 0.1);
  --color-border-secondary: rgba(var(--color-white-base), 0.2);
  --color-border-active: var(--color-primary);
  --color-border-error: var(--color-error);
  
  /* 文字色 */
  --color-text-primary: rgb(var(--color-white-base));
  --color-text-secondary: rgb(204, 204, 204);
  --color-text-tertiary: rgb(136, 136, 136);
  --color-text-quaternary: rgb(102, 102, 102);
  --color-text-disabled: rgb(153, 153, 153);
  --color-text-error: var(--color-error);

  /* 特殊文字色 */
  --color-text-orange: rgb(255, 107, 53);
  --color-text-red: rgb(255, 0, 0);
  --color-text-blue: rgb(0, 100, 200);

  /* 几何复杂度分析主题色 */
  --color-complexity-base: 255, 140, 0;     /* #FF8C00 */
  --color-complexity: rgb(var(--color-complexity-base));
  --color-complexity-bg-1: rgba(var(--color-complexity-base), 0.05);
  --color-complexity-bg-2: rgba(var(--color-complexity-base), 0.08);
  --color-complexity-bg-3: rgba(var(--color-complexity-base), 0.1);
  --color-complexity-border-1: rgba(var(--color-complexity-base), 0.1);
  --color-complexity-border-2: rgba(var(--color-complexity-base), 0.2);
  --color-complexity-border-3: rgba(var(--color-complexity-base), 0.3);
  --color-complexity-border-15: rgba(var(--color-complexity-base), 0.15);

  /* ===== 优化透明度层级系统 ===== */

  /* 主色调透明度变体 */
  --color-primary-rgb: rgba(var(--color-primary-base), 0.1);
  --color-primary-rgb-3: rgba(var(--color-primary-base), 0.3);
  --color-primary-rgb-4: rgba(var(--color-primary-base), 0.4);

  /* 状态色透明度变体 */
  --color-error-rgb-1: rgba(var(--color-error-base), 0.1);
  --color-error-rgb-3: rgba(var(--color-error-base), 0.3);

  /* 白色透明度变体（标准5级层级）*/
  --color-white-rgb-05: rgba(var(--color-white-base), 0.05);
  --color-white-rgb-1: rgba(var(--color-white-base), 0.1);
  --color-white-rgb-15: rgba(var(--color-white-base), 0.15);
  --color-white-rgb-2: rgba(var(--color-white-base), 0.2);
  --color-white-rgb-3: rgba(var(--color-white-base), 0.3);

  /* 渐变背景 */
  --color-gradient-brand-bg: linear-gradient(135deg, rgba(var(--color-primary-base), 0.1) 0%, rgba(var(--color-primary-light-base), 0.05) 100%);
  --color-gradient-brand-bg-2: linear-gradient(135deg, rgba(var(--color-primary-base), 0.2) 0%, rgba(var(--color-primary-light-base), 0.1) 100%);
  --color-gradient-success: linear-gradient(135deg, rgba(var(--color-success-base), 0.1) 0%, rgba(var(--color-success-base), 0.05) 100%);
  --color-gradient-info: linear-gradient(135deg, rgba(var(--color-info-base), 0.1) 0%, rgba(var(--color-info-base), 0.05) 100%);
  --color-gradient-warning: linear-gradient(135deg, rgba(var(--color-warning-base), 0.1) 0%, rgba(var(--color-warning-base), 0.05) 100%);

  /* 阴影色 - 指向已有变量避免重复 */
  --color-shadow-primary: var(--color-primary-rgb-3);
  --color-shadow-hover: var(--color-primary-rgb-4);
  --color-shadow-card: 0 20px 40px rgba(var(--color-black-base), 0.3);

  /* 滚动条 */
  --color-scrollbar-thumb: var(--color-white-rgb-2);
  --color-scrollbar-thumb-hover: var(--color-white-rgb-3);
  --color-scrollbar-track: transparent;
  
  /* ===== 尺寸系统 ===== */
  
  /* 屏幕尺寸 */
  --size-screen-height: 100vh;
  --size-screen-width: 100vw;
  
  /* 布局尺寸 */
  --size-header-height: 60px;
  --size-sidebar-width: 350px;
  --size-sidebar-width-mobile: 320px;
  --size-border-radius: 8px;
  --size-border-radius-card: 12px;
  --size-border-radius-button: 6px;

  /* 连接组件尺寸 */
  --size-connection-dot: 8px;
  --size-connection-card-min-height: 120px;
  --size-connection-test-btn: 24px;
  --size-connection-test-btn-small: 20px;
  
  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;

  /* 组件特定间距 */
  --spacing-connection-dot: 8px;
  --spacing-card-padding: 15px;
  --spacing-card-padding-small: 10px;
  --spacing-grid-gap: 10px;
  --spacing-form-gap: 8px;
  
  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;

  /* 组件特定字体大小 */
  --font-size-icon: 24px;
  --font-size-icon-small: 10px;
  --font-size-connection-name: 12px;
  
  /* 字体权重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Z-Index层级 */
  --z-index-header: 1000;
  --z-index-sidebar: 1000;
  --z-index-modal: 1000;
  --z-index-overlay: 999;
  --z-index-dropdown: 998;

  /* ===== 动画系统 ===== */
  --transition-duration: 0.3s;
  --transition-timing: ease;

  /* ===== 组件尺寸常量 ===== */
  /* 模型查看器常量 */
  --model-viewer-padding: 20px;
  --model-viewer-border-radius: 8px;
  --model-viewer-min-height: 500px;
  --model-viewer-header-gap: 12px;
  --model-viewer-section-margin: 24px;
  --model-viewer-section-padding: 16px;

  /* 通知持续时间常量 */
  --notification-duration-success: 2000ms;
  --notification-duration-error: 3000ms;
}

/* 亮色主题（可选） */
[data-theme="light"] {
  --color-bg-primary: rgb(var(--color-white-base));
  --color-bg-secondary: rgb(245, 245, 245);
  --color-bg-tertiary: rgb(250, 250, 250);
  --color-bg-quaternary: rgb(238, 238, 238);
  --color-bg-card: rgba(var(--color-white-base), 0.9);
  --color-bg-hover: rgba(var(--color-black-base), 0.05);
  --color-bg-active: rgba(var(--color-primary-base), 0.1);
  --color-bg-input: rgba(var(--color-black-base), 0.02);

  --color-border-primary: rgba(var(--color-black-base), 0.1);
  --color-border-secondary: rgba(var(--color-black-base), 0.2);

  --color-text-primary: rgb(26, 26, 26);
  --color-text-secondary: rgb(51, 51, 51);
  --color-text-tertiary: rgb(102, 102, 102);
  --color-text-quaternary: rgb(153, 153, 153);
  --color-text-disabled: rgb(136, 136, 136);

  --color-shadow-card: 0 20px 40px rgba(var(--color-black-base), 0.1);
}

/* 全局基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

#app {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 通用工具类 */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-error { color: var(--color-text-error); }

.bg-primary { background: var(--color-bg-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-card { background: var(--color-bg-card); }
.bg-hover:hover { background: var(--color-bg-hover); }

.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }
.border-active { border-color: var(--color-border-active); }

/* 按钮基础样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--size-border-radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  text-decoration: none;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary-gradient);
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: 0 4px 15px var(--color-shadow-primary);
}

.btn-primary:hover {
  background: var(--color-primary-gradient-hover);
  box-shadow: 0 6px 20px var(--color-shadow-hover);
}

.btn-secondary {
  background: var(--color-bg-hover);
  border-color: var(--color-border-secondary);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-white-rgb-15);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.btn-error {
  background: var(--color-error-rgb-1);
  border-color: var(--color-error-rgb-3);
  color: var(--color-error);
}

.btn-error:hover {
  background: var(--color-error-rgb-1);
  border-color: var(--color-error-rgb-3);
}

/* 输入框基础样式 */
.form-input {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--color-bg-input);
  border: var(--input-border-width) solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-duration) var(--transition-timing);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 var(--input-focus-border-width) var(--color-primary-rgb);
  background: var(--color-white-rgb-05);
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
}

.form-input.error {
  border-color: var(--color-border-error);
}

/* 卡片基础样式 */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.card-header {
  padding: var(--spacing-2xl);
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

.card-body {
  padding: var(--card-padding);
  flex: 1;
  overflow-y: auto;
}

.card-footer {
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

/* 布局工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.h-full { height: 100%; }
.w-full { width: 100%; }
.h-screen { height: 100vh; }
.w-screen { width: 100vw; }

.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 间距工具类 */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* 动画 */
.transition-all {
  transition: all var(--transition-duration) var(--transition-timing);
}

.transition-colors {
  transition: background-color var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}

/* 阴影 */
.shadow-card { box-shadow: var(--color-shadow-card); }
.shadow-hover:hover { box-shadow: var(--color-shadow-hover); }

/* 圆角 */
.rounded { border-radius: var(--size-border-radius); }
.rounded-card { border-radius: var(--size-border-radius-card); }
.rounded-button { border-radius: var(--size-border-radius-button); }

/* 玻璃态效果 */
.glass {
  background: var(--color-white-rgb-05);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-rgb-1);
}

.glass-hover:hover {
  background: var(--color-white-rgb-05);
  border-color: var(--color-white-rgb-15);
}

/* ===== 自定义Loading样式 ===== */
.custom-loading .el-loading-text {
  color: rgba(var(--color-white-base), 0.9) !important;
}