/**
 * Bootstrap 主题定制 - "旭雄沃"设计体系
 * Bootstrap Theme Customization - "旭雄沃" Design System
 * 
 * 风格定位：现代科技、专业可靠、简洁高效
 * Style: Modern Technology, Professional & Reliable, Simple & Efficient
 * 
 * 使用方法：
 * 1. 在 HTML 中引入：<link rel="stylesheet" href="/src/styles/bootstrap-theme.css">
 * 2. 或在 main.ts 中引入：import '@/styles/bootstrap-theme.css'
 */

/* ========== CSS 变量定义 ========== */
:root {
  /* 主色调 - 基于"旭雄沃"的科技蓝主题 */
  --bs-primary: #1890ff;
  --bs-primary-hover: #40a9ff;
  --bs-primary-active: #096dd9;
  --bs-primary-light: #e6f7ff;
  --bs-primary-lighter: #f0f9ff;

  /* 辅助色 */
  --bs-secondary: #52c41a;
  --bs-success: #52c41a;
  --bs-info: #1890ff;
  --bs-warning: #faad14;
  --bs-danger: #ff4d4f;

  /* 中性色 */
  --bs-white: #ffffff;
  --bs-gray-50: #fafafa;
  --bs-gray-100: #f5f5f5;
  --bs-gray-200: #f0f0f0;
  --bs-gray-300: #d9d9d9;
  --bs-gray-400: #bfbfbf;
  --bs-gray-500: #8c8c8c;
  --bs-gray-600: #595959;
  --bs-gray-700: #434343;
  --bs-gray-800: #262626;
  --bs-gray-900: #1f1f1f;
  --bs-black: #000000;

  /* 文字颜色 */
  --bs-body-color: #262626;
  --bs-text-muted: #595959;
  --bs-text-secondary: #8c8c8c;

  /* 背景颜色 */
  --bs-body-bg: #fafafa;
  --bs-bg-light: #f5f5f5;
  --bs-bg-lighter: #fafafa;

  /* 边框颜色 */
  --bs-border-color: #d9d9d9;
  --bs-border-color-light: #f0f0f0;

  /* 链接颜色 */
  --bs-link-color: #1890ff;
  --bs-link-hover-color: #40a9ff;

  /* 字体大小 */
  --bs-font-size-base: 0.875rem;      /* 14px */
  --bs-font-size-sm: 0.75rem;         /* 12px */
  --bs-font-size-lg: 1rem;            /* 16px */

  /* 标题字体大小 */
  --bs-h1-font-size: 2rem;            /* 32px */
  --bs-h2-font-size: 1.5rem;          /* 24px */
  --bs-h3-font-size: 1.25rem;         /* 20px */
  --bs-h4-font-size: 1.125rem;        /* 18px */
  --bs-h5-font-size: 1rem;            /* 16px */
  --bs-h6-font-size: 0.875rem;        /* 14px */

  /* 字重 */
  --bs-font-weight-light: 300;
  --bs-font-weight-normal: 400;
  --bs-font-weight-medium: 500;
  --bs-font-weight-bold: 600;
  --bs-font-weight-bolder: 700;

  /* 行高 */
  --bs-line-height-base: 1.5715;
  --bs-line-height-sm: 1.66;
  --bs-line-height-lg: 1.5;

  /* 间距 */
  --bs-spacer: 1rem;                  /* 16px */
  --bs-spacer-1: 0.25rem;             /* 4px */
  --bs-spacer-2: 0.5rem;              /* 8px */
  --bs-spacer-3: 1rem;                /* 16px */
  --bs-spacer-4: 1.5rem;              /* 24px */
  --bs-spacer-5: 2rem;                /* 32px */
  --bs-spacer-6: 3rem;                /* 48px */

  /* 圆角 */
  --bs-border-radius: 0.25rem;        /* 4px */
  --bs-border-radius-sm: 0.125rem;    /* 2px */
  --bs-border-radius-lg: 0.5rem;      /* 8px */
  --bs-border-radius-xl: 0.75rem;     /* 12px */

  /* 阴影 */
  --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --bs-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --bs-box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* 过渡动画 */
  --bs-transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  --bs-transition-fast: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  --bs-transition-slow: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ========== 全局样式 ========== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-size: var(--bs-font-size-base);
  line-height: var(--bs-line-height-base);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 标题样式 ========== */
h1, .h1 {
  font-size: var(--bs-h1-font-size);
  font-weight: var(--bs-font-weight-bold);
  line-height: 1.2;
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-4);
}

h2, .h2 {
  font-size: var(--bs-h2-font-size);
  font-weight: var(--bs-font-weight-bold);
  line-height: 1.3;
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-3);
}

h3, .h3 {
  font-size: var(--bs-h3-font-size);
  font-weight: var(--bs-font-weight-bold);
  line-height: 1.4;
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-3);
}

h4, .h4 {
  font-size: var(--bs-h4-font-size);
  font-weight: var(--bs-font-weight-medium);
  line-height: var(--bs-line-height-base);
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-2);
}

h5, .h5 {
  font-size: var(--bs-h5-font-size);
  font-weight: var(--bs-font-weight-medium);
  line-height: var(--bs-line-height-base);
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-2);
}

h6, .h6 {
  font-size: var(--bs-h6-font-size);
  font-weight: var(--bs-font-weight-medium);
  line-height: var(--bs-line-height-base);
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-2);
}

/* ========== 背景色工具类 ========== */
.bg-primary-light {
  background-color: var(--bs-primary-light) !important;
}

.bg-primary-lighter {
  background-color: var(--bs-primary-lighter) !important;
}

.bg-gray-50 {
  background-color: var(--bs-gray-50) !important;
}

.bg-gray-100 {
  background-color: var(--bs-gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--bs-gray-200) !important;
}

/* ========== 文字颜色工具类 ========== */
.text-primary-dark {
  color: var(--bs-primary-active) !important;
}

.text-gray-600 {
  color: var(--bs-gray-600) !important;
}

.text-gray-500 {
  color: var(--bs-gray-500) !important;
}

.text-gray-400 {
  color: var(--bs-gray-400) !important;
}

/* ========== 边框工具类 ========== */
.border-light {
  border-color: var(--bs-border-color-light) !important;
}

.border-gray-300 {
  border-color: var(--bs-gray-300) !important;
}

/* ========== 阴影工具类 ========== */
.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* ========== 卡片样式 ========== */
.card {
  background-color: var(--bs-white);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
  transition: var(--bs-transition-base);
  border: 1px solid var(--bs-border-color-light);
}

.card:hover {
  box-shadow: var(--bs-box-shadow);
}

.card-header {
  background-color: var(--bs-gray-50);
  border-bottom: 1px solid var(--bs-border-color-light);
  font-weight: var(--bs-font-weight-medium);
  padding: var(--bs-spacer-3);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.card-body {
  padding: var(--bs-spacer-4);
}

.card-footer {
  background-color: var(--bs-gray-50);
  border-top: 1px solid var(--bs-border-color-light);
  padding: var(--bs-spacer-3);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

/* ========== 按钮样式扩展 ========== */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
  transition: var(--bs-transition-base);
}

.btn-primary:hover {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  color: var(--bs-white);
}

.btn-primary:active,
.btn-primary:focus {
  background-color: var(--bs-primary-active);
  border-color: var(--bs-primary-active);
  color: var(--bs-white);
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-color: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: var(--bs-white);
}

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bs-white);
}

.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white);
}

/* ========== 表格样式 ========== */
.table {
  background-color: var(--bs-white);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.table thead th {
  background-color: var(--bs-gray-50);
  font-weight: var(--bs-font-weight-medium);
  border-bottom: 2px solid var(--bs-border-color);
  color: var(--bs-body-color);
  padding: var(--bs-spacer-2) var(--bs-spacer-3);
}

.table tbody tr {
  transition: var(--bs-transition-base);
  border-bottom: 1px solid var(--bs-border-color-light);
}

.table tbody tr:hover {
  background-color: var(--bs-gray-50);
}

.table tbody td {
  padding: var(--bs-spacer-2) var(--bs-spacer-3);
  color: var(--bs-body-color);
}

/* ========== 表单样式 ========== */
.form-control {
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: var(--bs-transition-base);
}

.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem var(--bs-primary-lighter);
}

.form-label {
  font-weight: var(--bs-font-weight-medium);
  color: var(--bs-body-color);
  margin-bottom: var(--bs-spacer-2);
}

/* ========== 链接样式 ========== */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: var(--bs-transition-base);
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* ========== 容器样式 ========== */
.container {
  background-color: var(--bs-body-bg);
}

.container-fluid {
  background-color: var(--bs-body-bg);
}

/* ========== 响应式调整 ========== */
@media (max-width: 768px) {
  :root {
    --bs-h1-font-size: 1.75rem;        /* 28px */
    --bs-h2-font-size: 1.375rem;       /* 22px */
    --bs-h3-font-size: 1.125rem;       /* 18px */
  }
}

@media (max-width: 576px) {
  :root {
    --bs-h1-font-size: 1.5rem;         /* 24px */
    --bs-h2-font-size: 1.25rem;        /* 20px */
    --bs-h3-font-size: 1rem;           /* 16px */
  }
  
  .card-body {
    padding: var(--bs-spacer-3);
  }
}