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

/* ===== CSS Variables ===== */
:root {
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 64px;
  --header-height: 64px;

  /* Rose 主色 - 对齐原型 */
  --color-primary: #f43f5e;
  --color-primary-light: #ffe4e6;
  --color-primary-lighter: #fff1f2;

  --color-bg: #f8fafc;
  --color-border: #f1f5f9;
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;

  /* 兼容旧变量 */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #f43f5e;
  --color-info: #64748b;
}

/* ===== Element Plus 主题覆盖 - Rose ===== */
:root {
  --el-color-primary: #f43f5e;
  --el-color-primary-light-3: #f97090;
  --el-color-primary-light-5: #fba3b2;
  --el-color-primary-light-7: #fecdd3;
  --el-color-primary-light-8: #ffe4e6;
  --el-color-primary-light-9: #fff1f2;
  --el-color-primary-dark-2: #e11d48;
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
}

/* ===== Global Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: #e11d48; }

/* 隐藏滚动条 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 细滚动条 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ===== NProgress ===== */
#nprogress .bar { background: #f43f5e !important; }
#nprogress .peg { box-shadow: 0 0 10px #f43f5e, 0 0 5px #f43f5e !important; }

/* ===== Element Plus 组件定制 ===== */

/* Table */
.el-table {
  --el-table-border-color: #f1f5f9;
  --el-table-header-bg-color: #f8fafc;
  --el-table-tr-bg-color: #ffffff;
  --el-table-row-hover-bg-color: #fff1f2;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.el-table th.el-table__cell {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f8fafc !important;
}
.el-table__inner-wrapper::before { display: none; }
.el-table td.el-table__cell { border-bottom-color: #f1f5f9; }
.el-table .el-table__row td { font-size: 13px; color: #374151; }

/* Button */
.el-button { border-radius: 10px !important; font-weight: 500; }
.el-button--primary {
  background-color: #f43f5e !important;
  border-color: #f43f5e !important;
}
.el-button--primary:hover, .el-button--primary:focus {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
}

/* Input */
.el-input__wrapper {
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #e2e8f0 inset !important;
}
.el-input__wrapper:hover { box-shadow: 0 0 0 1px #f43f5e inset !important; }
.el-input__wrapper.is-focus { box-shadow: 0 0 0 1px #f43f5e inset !important; }
.el-select .el-input__wrapper { border-radius: 10px !important; }
.el-textarea__inner { border-radius: 10px !important; box-shadow: 0 0 0 1px #e2e8f0 inset !important; }
.el-textarea__inner:focus { box-shadow: 0 0 0 1px #f43f5e inset !important; }

/* Dialog */
.el-dialog {
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important;
}
.el-dialog__header { padding: 24px 24px 16px; font-weight: 700; }
.el-dialog__body { padding: 8px 24px 24px; }

/* Tag */
.el-tag {
  border-radius: 6px !important;
  font-weight: 500;
  font-size: 11px;
}
.el-tag--success { background-color: #f0fdf4 !important; color: #16a34a !important; border-color: #bbf7d0 !important; }
.el-tag--warning { background-color: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; }
.el-tag--danger  { background-color: #fff1f2 !important; color: #f43f5e !important; border-color: #fecdd3 !important; }
.el-tag--info    { background-color: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; }

/* Pagination */
.el-pagination { margin-top: 16px; justify-content: flex-end; }
.el-pagination.is-background .el-pager li.is-active { background-color: #f43f5e !important; }
.el-pagination.is-background .el-pager li:hover { color: #f43f5e !important; }

/* Form */
.el-form-item__label { font-weight: 500; color: #374151; font-size: 13px; }

/* ===== Layout utilities ===== */
.page-container {
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  background: #f8fafc;
}

/* 旧版兼容 */
.card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.table-container {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
