/* ===== 纯CSS助手类（不依赖Tailwind编译） ===== */

/* 侧边栏工具类 */
.sidebar-width { width: 200px; }
.sidebar-width-collapsed { width: 60px; }
.transition-sidebar { transition: all 0.3s ease; }

/* 自定义按钮轮廓变体 */
.btn-outline-primary {
  border: 1px solid #1677ff;
  color: #1677ff;
  background: #f7f8fa;
}
.btn-outline-primary:hover {
  background: #e6f0ff;
}

.btn-outline-secondary {
  border: 1px solid #e5e6eb;
  color: #4e5969;
  background: #f7f8fa;
}
.btn-outline-secondary:hover {
  background: #f2f3f5;
}

.btn-outline-success {
  border: 1px solid #00b96b;
  color: #00b96b;
  background: #f7f8fa;
}
.btn-outline-success:hover {
  background: #e8f8f0;
}

.btn-outline-warning {
  border: 1px solid #f58220;
  color: #f58220;
  background: #f7f8fa;
}
.btn-outline-warning:hover {
  background: #fff7ed;
}

.btn-outline-danger {
  border: 1px solid #f53f3f;
  color: #f53f3f;
  background: #f7f8fa;
}
.btn-outline-danger:hover {
  background: #fff2f0;
}

.btn-outline-info {
  border: 1px solid #1677ff;
  color: #1677ff;
  background: #f7f8fa;
}
.btn-outline-info:hover {
  background: #e6f0ff;
}

/* 基础元素 */
body {
  background: #f5f7fa;
  color: #1d2129;
  font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: #1677ff; text-decoration: none; }
a:hover { color: #4096ff; }

code {
  padding: 2px 6px;
  background: #f7f8fa;
  color: #1677ff;
  font-size: 0.875rem;
  border-radius: 4px;
}

/* 卡片 */
.card {
  background: #ffffff;
  border: 1px solid #f2f3f5;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 16px; }

/* 表单 */
.form-control {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
}
.form-control:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22,119,255,0.2);
}

.form-select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  transition: all 0.2s;
}
.form-select:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 3px rgba(22,119,255,0.2);
}

.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #1d2129; margin-bottom: 8px; }

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}
.badge-primary { background: #1677ff; color: #ffffff; }
.badge-secondary { background: #f7f8fa; color: #4e5969; }
.badge-success { background: #00b96b; color: #ffffff; }
.badge-warning { background: #f58220; color: #ffffff; }
.badge-danger { background: #f53f3f; color: #ffffff; }
.badge-info { background: #e6f0ff; color: #1677ff; }

/* 输入组 */
.input-group { display: flex; align-items: center; }
.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* 弹窗（自定义版本，用于兼容旧代码） */
.btn-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #86909c;
  transition: all 0.2s;
}
.btn-close:hover { background: #f7f8fa; color: #1d2129; }

/* 表格 */
.table { width: 100%; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f2f3f5; }
.table th { background: #f7f8fa; font-weight: 500; color: #4e5969; }
.table tr:hover { background: rgba(247,248,250,0.5); }

/* 文字工具类 */
.text-muted { color: #86909c; }
.fw-bold { font-weight: 600; }
.text-break { word-break: break-all; }
.text-danger { color: #f53f3f; }
.text-primary { color: #1677ff; }
.text-info { color: #1677ff; }
.small { font-size: 0.875rem; }

/* 弹性布局 */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-grow-1 { flex: 1 1 0; }
.flex-wrap { flex-wrap: wrap; }

/* 间距 */
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.w-100 { width: 100%; }

/* 文本对齐 */
.text-center { text-align: center; }

/* 响应式可见性 */
.d-none { display: none; }

@media (min-width: 768px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
}

@media (max-width: 767px) {
  .d-md-none { display: block; }
  .d-md-block { display: none; }
}