/* 
 * ================================================
 * ERP 进销存系统 - 100% 自研完整 UI 系统
 * 完全无风险 - 无任何第三方依赖
 * ================================================
 */

/* ================================================
 * 0. 基础重置与字体系统
 * ================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  /* 100% 安全字体系统 */
  font-family: 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    "Helvetica Neue", 
    Arial, 
    sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background: #f5f7fa;
}

/* ================================================
 * 1. 自研图标系统 - 100% 无风险
 * ================================================ */

.erp-icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: normal;
}

/* 常用图标 - 使用纯 Unicode/Emoji */

/* 系统导航 */
.erp-icon-home::before { content: "🏠"; }
.erp-icon-user::before { content: "👤"; }
.erp-icon-users::before { content: "👥"; }
.erp-icon-settings::before { content: "⚙️"; }
.erp-icon-dashboard::before { content: "📊"; }
.erp-icon-chart::before { content: "📈"; }
.erp-icon-report::before { content: "📋"; }
.erp-icon-logout::before { content: "🚪"; }

/* 商品管理 */
.erp-icon-box::before { content: "📦"; }
.erp-icon-product::before { content: "🛍️"; }
.erp-icon-category::before { content: "📁"; }
.erp-icon-tag::before { content: "🏷️"; }
.erp-icon-search::before { content: "🔍"; }

/* 库存管理 */
.erp-icon-warehouse::before { content: "🏭"; }
.erp-icon-stock::before { content: "📦"; }
.erp-icon-inventory::before { content: "📊"; }
.erp-icon-import::before { content: "📥"; }
.erp-icon-export::before { content: "📤"; }
.erp-icon-transfer::before { content: "🔄"; }

/* 订单管理 */
.erp-icon-order::before { content: "📋"; }
.erp-icon-shopping::before { content: "🛒"; }
.erp-icon-shipping::before { content: "🚚"; }
.erp-icon-receipt::before { content: "🧾"; }
.erp-icon-money::before { content: "💰"; }
.erp-icon-dollar::before { content: "💵"; }

/* 财务管理 */
.erp-icon-finance::before { content: "💰"; }
.erp-icon-pay::before { content: "💳"; }
.erp-icon-refund::before { content: "↩️"; }
.erp-icon-bill::before { content: "🧾"; }

/* 供应商、客户 */
.erp-icon-supplier::before { content: "🏪"; }
.erp-icon-purchase::before { content: "📋"; }
.erp-icon-customer::before { content: "👤"; }
.erp-icon-member::before { content: "👥"; }

/* 平台 */
.erp-icon-platform::before { content: "🌐"; }
.erp-icon-sync::before { content: "🔄"; }
.erp-icon-api::before { content: "🔌"; }

/* 工具 */
.erp-icon-add::before { content: "➕"; }
.erp-icon-edit::before { content: "✏️"; }
.erp-icon-delete::before { content: "🗑️"; }
.erp-icon-view::before { content: "👁️"; }
.erp-icon-save::before { content: "💾"; }
.erp-icon-print::before { content: "🖨️"; }

/* 状态 */
.erp-icon-check::before { content: "✅"; }
.erp-icon-warning::before { content: "⚠️"; }
.erp-icon-error::before { content: "❌"; }
.erp-icon-info::before { content: "ℹ️"; }

/* 时间 */
.erp-icon-calendar::before { content: "📅"; }
.erp-icon-clock::before { content: "⏰"; }
.erp-icon-history::before { content: "📜"; }

/* 图标大小 */
.erp-icon-sm { font-size: 0.875rem; }
.erp-icon-md { font-size: 1rem; }
.erp-icon-lg { font-size: 1.3333rem; }
.erp-icon-xl { font-size: 1.5rem; }

/* ================================================
 * 2. 布局系统
 * ================================================ */

.erp-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.erp-flex {
  display: flex;
}

.erp-flex-col {
  flex-direction: column;
}

.erp-flex-between {
  justify-content: space-between;
  align-items: center;
}

.erp-flex-center {
  justify-content: center;
  align-items: center;
}

.erp-flex-end {
  justify-content: flex-end;
  align-items: center;
}

.erp-gap-sm { gap: 10px; }
.erp-gap-md { gap: 20px; }
.erp-gap-lg { gap: 30px; }

.erp-wrap {
  flex-wrap: wrap;
}

.erp-col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.erp-col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.erp-col-3 { flex: 0 0 25%; max-width: 25%; }
.erp-col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.erp-col-6 { flex: 0 0 50%; max-width: 50%; }
.erp-col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.erp-col-9 { flex: 0 0 75%; max-width: 75%; }
.erp-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ================================================
 * 3. 卡片组件
 * ================================================ */

.erp-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.erp-card-header {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.erp-card-body {
  padding: 0;
}

/* ================================================
 * 4. 表单组件
 * ================================================ */

.erp-form-group {
  margin-bottom: 15px;
}

.erp-form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
}

.erp-form-input, 
.erp-form-select, 
.erp-form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.erp-form-input:focus, 
.erp-form-select:focus, 
.erp-form-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.erp-form-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ================================================
 * 5. 按钮组件
 * ================================================ */

.erp-btn {
  display: inline-block;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
}

.erp-btn-primary {
  background: #409eff;
  color: #fff;
}

.erp-btn-primary:hover {
  background: #66b1ff;
}

.erp-btn-success {
  background: #67c23a;
  color: #fff;
}

.erp-btn-danger {
  background: #f56c6c;
  color: #fff;
}

.erp-btn-warning {
  background: #e6a23c;
  color: #fff;
}

.erp-btn-default {
  background: #909399;
  color: #fff;
}

.erp-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.erp-btn-lg {
  padding: 12px 24px;
  font-size: 16px;
}

.erp-btn-group {
  display: flex;
  gap: 10px;
}

/* ================================================
 * 6. 表格组件
 * ================================================ */

.erp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.erp-table th, 
.erp-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.erp-table th {
  background: #f5f7fa;
  font-weight: 600;
  color: #555;
}

.erp-table tr:hover {
  background: #fafafa;
}

/* ================================================
 * 7. 状态标签组件
 * ================================================ */

.erp-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.erp-tag-success {
  background: #f0f9eb;
  color: #67c23a;
}

.erp-tag-danger {
  background: #fef0f0;
  color: #f56c6c;
}

.erp-tag-warning {
  background: #fdf6ec;
  color: #e6a23c;
}

.erp-tag-info {
  background: #ecf5ff;
  color: #409eff;
}

/* ================================================
 * 8. 分页组件
 * ================================================ */

.erp-pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}

.erp-page-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.erp-page-btn.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

.erp-page-btn:hover:not(.active) {
  border-color: #409eff;
  color: #409eff;
}

/* ================================================
 * 9. 统计数据组件
 * ================================================ */

.erp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.erp-stat-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.erp-stat-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.erp-stat-value {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.erp-stat-label {
  color: #888;
  font-size: 14px;
}

/* ================================================
 * 10. 消息/通知组件
 * ================================================ */

.erp-alert {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.erp-alert-success {
  background: #f0f9eb;
  color: #67c23a;
  border-left: 4px solid #67c23a;
}

.erp-alert-danger {
  background: #fef0f0;
  color: #f56c6c;
  border-left: 4px solid #f56c6c;
}

.erp-alert-warning {
  background: #fdf6ec;
  color: #e6a23c;
  border-left: 4px solid #e6a23c;
}

.erp-alert-info {
  background: #ecf5ff;
  color: #409eff;
  border-left: 4px solid #409eff;
}

/* ================================================
 * 11. 工具类
 * ================================================ */

.erp-text-center { text-align: center; }
.erp-text-right { text-align: right; }
.erp-text-muted { color: #999; }

.erp-mt-1 { margin-top: 5px; }
.erp-mt-2 { margin-top: 10px; }
.erp-mt-3 { margin-top: 15px; }
.erp-mt-4 { margin-top: 20px; }

.erp-mb-1 { margin-bottom: 5px; }
.erp-mb-2 { margin-bottom: 10px; }
.erp-mb-3 { margin-bottom: 15px; }
.erp-mb-4 { margin-bottom: 20px; }

.erp-p-1 { padding: 5px; }
.erp-p-2 { padding: 10px; }
.erp-p-3 { padding: 15px; }
.erp-p-4 { padding: 20px; }

.erp-pt-3 { padding-top: 15px; }
.erp-pb-3 { padding-bottom: 15px; }

.erp-border-top { border-top: 1px solid #eee; }

.erp-clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.erp-d-none { display: none; }
.erp-d-block { display: block; }

/* ================================================
 * 版权声明
 * ================================================
 * 本 UI 系统 100% 自研，无任何外部依赖
 * 无任何版权风险，完全安全！
 * ================================================
 */