/* ============================================================
   app-styles.css — 公用样式类（从内联样式抽取）
   版本: 2026-06-26 (已清理重复定义和冲突)
   ============================================================ */

/* ----- 文本颜色 -----
   注意：text-primary/success/warning/danger/muted/secondary 由 style.css 使用 CSS 变量统一定义，
   此处仅定义 style.css 未覆盖的颜色类 */
.text-tertiary            { color: #999; }
.text-red                 { color: #f44336; }
.text-danger-dark         { color: #b5544a; }
.text-danger-darker       { color: #c62828; }
.text-destructive         { color: #d32f2f; }
.text-brand               { color: #e8967a; }
.text-warning-dark        { color: #e65100; }
.text-success-dark        { color: #5a7a4a; }
.text-success-darker      { color: #2e7d32; }
.text-white               { color: #fff; }

/* ----- 财务状态颜色 ----- */
.text-profit    { color: #52c41a; }
.text-loss      { color: #f5222d; }
.text-alert     { color: #c62828; }
.text-normal    { color: #666; }

/* ----- 仪表盘数值颜色 ----- */
.text-danger-ight       { color: #ef4444; }
.text-success-ight       { color: #22c55e; }
.text-default            { color: #333; }
.text-orange             { color: #ea580c; }

/* ----- 逾期警告颜色 ----- */
.text-overdue { color: #d32f2f; }

/* ----- 反馈类型指示器 ----- */
.feedback-type-indicator {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

/* ----- 通知框样式 ----- */
.notice-box {
  padding: 8px;
  border-radius: 4px;
}

/* ----- 背景色 ----- */
.bg-danger-light   { background: #ffebee; }
.bg-danger-medium { background: #fce8e6; }
.bg-danger-ight   { background: #fef2f2; }
.bg-warning-light  { background: #fff3e0; }
.bg-warning-lighter{ background: #fff7ed; }
.bg-info-light     { background: #e3f2fd; }
.bg-success-light  { background: #e8f5e9; }
.bg-success-ight   { background: #f0fdf4; }
.bg-success-lighter{ background: #f8fafc; }
.bg-white          { background: #fff; }
.bg-gray-50        { background: #fafafa; }
.bg-gray-100       { background: #f5f5f5; }
.bg-primary-light  { background: var(--primary-light, #fdf2f0); }

/* ----- 字号 ----- */
.text-10  { font-size: 10px; }
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12px; }
.text-base { font-size: 13px; }
.text-md   { font-size: 14px; }
.text-lg   { font-size: 16px; }
.text-2xl  { font-size: 26px; }

/* ----- 字重 ----- */
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 600; }
.font-bolder  { font-weight: 700; }

/* ----- 文本对齐 ----- */
/* text-center 和 text-right 由 style.css 统一定义，此处仅保留 text-left */
.text-left   { text-align: left; }

/* ----- 行高 ----- */
.leading-2 { line-height: 2; }

/* ----- 间距：margin-bottom ----- */
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

/* ----- 间距：margin-top ----- */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: 4px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-15 { margin-top: 15px; }
.mt-16 { margin-top: 16px; }

/* ----- 间距：margin ----- */
.m-0    { margin: 0; }
.ml-4   { margin-left: 4px; }
.ml-8   { margin-left: 8px; }
.mr-4   { margin-right: 4px; }
.mr-8   { margin-right: 8px; }

/* ----- 间距：padding ----- */
.p-0    { padding: 0; }
.p-3    { padding: 3px; }
.p-4    { padding: 4px; }
.p-6    { padding: 6px; }
.p-8    { padding: 8px; }
.p-12   { padding: 12px; }
.p-40   { padding: 40px; }
.px-8   { padding-left: 8px; padding-right: 8px; }
.px-12  { padding-left: 12px; padding-right: 12px; }
.py-4   { padding-top: 4px; padding-bottom: 4px; }
.py-6   { padding-top: 6px; padding-bottom: 6px; }

/* ----- 布局 ----- */
.d-none      { display: none; }
.d-flex      { display: flex; }
.d-grid     { display: grid; }
.d-inline    { display: inline; }
.d-inline-block { display: inline-block; }
.flex-1      { flex: 1; }

/* ----- 尺寸：宽度 ----- */
.w-28    { width: 28px; }
.w-60    { width: 60px; }
.w-80    { width: 80px; }
.w-100   { width: 100px; }
.w-120   { width: 120px; }
.w-full  { width: 100%; }
.max-w-600 { max-width: 600px; }

/* ----- 尺寸：高度 ----- */
.h-full  { height: 100%; }

.text-nowrap    { white-space: nowrap; }
.overflow-x-auto{ overflow-x: auto; }
.overflow-y-auto{ overflow-y: auto; }

/* ----- 表单控件 ----- */
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-top: 4px;
  font-size: 13px;
}

/* ----- 筛选栏（行内布局） ----- */
.filter-bar {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-bar .form-input,
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar select {
  width: auto;
  min-width: 130px;
  max-width: 200px;
  margin-top: 0;
  flex-shrink: 0;
}
.filter-bar input[type="text"] {
  min-width: 200px;
}
.filter-bar .btn {
  flex-shrink: 0;
}

/* ----- 卡片 ----- */
.card-default {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ----- 边框容器 ----- */
.border-card {
  border: 1px solid #e5d6ca;
  border-radius: 8px;
  padding: 14px;
}

/* ============================================================
   响应式网格辅助（用于 grid-template-columns 内联样式替换）
   ============================================================ */
.grid-2col   { display: grid; grid-template-columns: 1fr 1fr; }
.grid-auto   { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ----- Flex 对齐辅助 ----- */
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.gap-4           { gap: 4px; }
.gap-8           { gap: 8px; }
.gap-12          { gap: 12px; }

/* ----- 网格辅助 ----- */
.grid-full       { grid-column: 1 / -1; }

/* ----- 其他 ----- */
.opacity-85      { opacity: 0.85; }
.d-block         { display: block; }
.bg-gray-light   { background: #f8f9fa; border-radius: 8px; padding: 16px; }
.bg-brand        { background: #D4A574; color: #fff; }
.form-select     { padding: 7px 10px; border: 1px solid #E8E0D8; border-radius: 8px; font-size: 12px; background: #fff; color: #5A4A42; }

/* ----- Flex 方向 ----- */
.flex-col        { flex-direction: column; }

/* ----- 按钮/标签辅助 ----- */
.btn-xs          { border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.text-brand-dark { color: #5a4a42; }
.mt-22           { margin-top: 22px; }
.text-pink       { color: #c77da2; }
.bg-light        { background: #f0f0f0; border-radius: 6px; padding: 10px; }
.card-sm         { border-radius: 6px; padding: 10px; }

/* ----- 最小尺寸 ----- */
.min-w-0   { min-width: 0; }
.min-w-140 { min-width: 140px; }

/* ----- 最大尺寸 ----- */
.max-h-400 { max-height: 400px; }

/* ----- 边框辅助 ----- */
.border-b       { border-bottom: 1px solid #eee; }
.border-collapse { border-collapse: collapse; }

/* ----- 财务卡片 ----- */
.financial-card {
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.financial-card-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.financial-card-value {
  font-size: 24px;
  font-weight: 800;
}

.financial-card-value-sm {
  font-size: 20px;
  font-weight: 800;
}

/* ----- 仪表盘卡片 ----- */
.dashboard-card {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 7px;
}

.dashboard-card-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.dashboard-card-value {
  font-size: 16px;
  font-weight: 600;
}

/* ----- 表格单元格颜色 ----- */
.text-excess     { color: #f44336; }
.text-low-stock  { color: #ff9800; font-weight: 600; }

/* ----- 统计卡片项目 ----- */
.stat-card-item {
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

/* ----- 统计数值样式 ----- */
.stat-value {
  font-size: 20px;
  font-weight: 700;
}

/* ----- 紧凑统计卡片 ----- */
.stat-card-compact {
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
}

/* ----- 自定义颜色辅助 ----- */
.text-custom-f44336 { color: #f44336; }
.text-custom-333    { color: #333; }
.text-success-custom { color: #4caf50; }
.text-danger-custom  { color: #f44336; }
.text-custom-e65100  { color: #e65100; }
.bg-danger-lighter   { background: #fff2f0; }
.bg-success-lighter2 { background: #f6ffed; }