/* ============================================================
   FlashBuy 共用样式（三端）— 设计 token + 公共组件
   ------------------------------------------------------------
   层次：base.css（本文件）→ admin.css / seller.css / shop.css（各端布局与密度）→ 页面内联（仅本页独有）
   规则：
     1. 颜色、字体、圆角、阴影只在这里定义一次，页面里用 var(--xxx) 引用；
     2. 按钮 / 表单 / 表格 / 卡片 / 徽标 / 弹窗 / 分页 的基础样式在这里，
        三端只通过“密度 token”（--btn-pad、--input-pad、--td-pad …）调整大小，不重写组件；
     3. 页面模板里只保留该页独有的样式。
   ============================================================ */

/* ---------- 1. 设计 token ---------- */
:root{
  /* 品牌色 */
  --accent:#2563eb; --accent2:#1d4ed8; --accent-mid:#bfcffe; --accent-soft:#eff4ff;
  --red:#ef4444; --amber:#f59e0b; --green:#10b981; --purple:#7c3aed;
  /* 中性色（默认 = 前台/卖家端；后台在 admin.css 里微调） */
  --bg:#f6f7fa; --surface:#fff; --surface2:#f0f2f7;
  --border:#e2e5ee; --border2:#cdd1de;
  --text-1:#111827; --text-2:#4b5563; --text-3:#9ca3af;
  /* 标签色（状态徽标） */
  --tag-green:#dcfce7; --tag-green-t:#166534;
  --tag-amber:#fef9c3; --tag-amber-t:#854d0e;
  --tag-red:#fee2e2;   --tag-red-t:#991b1b;
  --tag-blue:#e0eaff;  --tag-blue-t:#3b51b5;
  --tag-gray:#f3f4f6;  --tag-gray-t:#374151;
  --tag-purple:#ede9fe; --tag-purple-t:#5b21b6;
  /* 圆角 / 阴影 / 动效 */
  --radius:8px; --radius-lg:12px; --radius-xl:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07); --shadow:0 4px 16px rgba(0,0,0,.08);
  --t:.18s ease; --transition:.18s ease;
  /* 字体（--font 与 --font-head 相同，历史上两个名字都在用） */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  /* 密度 token（默认 = 舒适；admin.css 覆盖为紧凑） */
  --btn-pad:9px 20px; --btn-fs:14px; --btn-sm-pad:6px 16px; --btn-sm-fs:13px;
  --input-pad:9px 13px; --input-fs:14px; --label-fs:13px; --label-mb:5px; --group-mb:.9rem;
  --th-pad:10px 14px; --th-fs:12px; --td-pad:12px 14px; --td-fs:13.5px;
  --card-pad:1.5rem; --card-radius:var(--radius-xl); --card-mb:0;
  --card-title-fs:15px; --card-title-mb:1.1rem;
}

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

/* ---------- 3. 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:var(--btn-pad);border-radius:50px;font-size:var(--btn-fs);font-weight:500;cursor:pointer;font-family:var(--font);border:1.5px solid transparent;transition:all var(--t);text-decoration:none}
.btn:disabled,.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:var(--btn-sm-pad);font-size:var(--btn-sm-fs)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2)}
.btn-outline{background:var(--surface);color:var(--text-2);border-color:var(--border)}
.btn-outline:hover{border-color:var(--border2);background:var(--surface2)}
.btn-danger{background:var(--surface);color:var(--red);border-color:#fecaca}
.btn-danger:hover{background:var(--tag-red)}

/* ---------- 4. 表单 ---------- */
.form-group{margin-bottom:var(--group-mb)}
.form-label{display:block;font-size:var(--label-fs);font-weight:600;color:var(--text-2);margin-bottom:var(--label-mb)}
.form-input{width:100%;padding:var(--input-pad);border:1.5px solid var(--border);border-radius:var(--radius);font-size:var(--input-fs);font-family:var(--font);color:var(--text-1);background:var(--surface);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.form-select{width:100%;padding:var(--input-pad);border:1.5px solid var(--border);border-radius:var(--radius);font-size:var(--input-fs);font-family:var(--font);color:var(--text-1);background:var(--surface);outline:none;cursor:pointer}
.form-textarea{width:100%;padding:var(--input-pad);border:1.5px solid var(--border);border-radius:var(--radius);font-size:var(--input-fs);font-family:var(--font);color:var(--text-1);background:var(--surface);outline:none;transition:border-color var(--t);resize:vertical;min-height:120px;line-height:1.7}
.form-input:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-select:focus{border-color:var(--accent)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.toggle{width:40px;height:22px;border-radius:11px;background:var(--border2);cursor:pointer;position:relative;transition:background var(--t);flex-shrink:0}
.toggle.on{background:var(--accent)}
.toggle::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform var(--t)}
.toggle.on::after{transform:translateX(18px)}

/* ---------- 5. 表格 ---------- */
table{width:100%;border-collapse:collapse}
th{padding:var(--th-pad);font-size:var(--th-fs);font-weight:600;color:var(--text-3);text-align:left;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
td{padding:var(--td-pad);font-size:var(--td-fs);border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbff}
.table-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--card-radius);overflow:hidden}

/* ---------- 6. 卡片 / 筛选条 ---------- */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--card-radius);padding:var(--card-pad);margin-bottom:var(--card-mb)}
.card-title{font-size:var(--card-title-fs);font-weight:600;color:var(--text-1);margin-bottom:var(--card-title-mb);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-title svg{width:15px;height:15px;color:var(--accent)}
.filter-bar{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:.75rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ftab.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-mid)}
.ftab:hover{background:var(--surface2)}
.search-mini:focus-within{border-color:var(--accent)}
.act-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.field-row:last-child{border-bottom:none}

/* ---------- 7. 徽标 / 状态 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:50px;font-size:11px;font-weight:600;white-space:nowrap}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:50px;font-size:11.5px;font-weight:600;white-space:nowrap}
.status-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.b-green,.s-green{background:var(--tag-green);color:var(--tag-green-t)}
.b-amber,.s-amber{background:var(--tag-amber);color:var(--tag-amber-t)}
.b-red,.s-red{background:var(--tag-red);color:var(--tag-red-t)}
.b-blue,.s-blue{background:var(--tag-blue);color:var(--tag-blue-t)}
.b-gray,.s-gray{background:var(--tag-gray);color:var(--tag-gray-t)}
.b-purple,.s-purple{background:var(--tag-purple);color:var(--tag-purple-t)}
.delta-up{color:var(--green)}
.delta-down{color:var(--red)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent-mid);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--accent)}

/* ---------- 8. 提示 / 弹窗 / 分页 / 空状态 ---------- */
.alert{display:none;padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;align-items:center;gap:7px}
.alert.show{display:flex}
.alert-error{background:var(--tag-red);color:var(--tag-red-t);border:1px solid #fecaca}
.alert-success{background:var(--tag-green);color:var(--tag-green-t);border:1px solid #bbf7d0}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:5000;align-items:center;justify-content:center}
.modal-overlay.open,.modal-overlay.show{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-xl);padding:1.5rem;width:480px;max-width:94vw;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:0 .25rem}
.empty,.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-3)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);margin-bottom:1.25rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text-3);text-decoration:none;transition:color var(--t)}
.breadcrumb a:hover{color:var(--accent)}

/* ---------- 9. 响应式（通用） ---------- */
@media (max-width:768px){
  .card{padding:1rem}
  .two-col,.grid-2{grid-template-columns:1fr}
  .three-col,.grid-3{grid-template-columns:1fr 1fr}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px;font-size:.75rem}
}

/* ---------- 10. 其余三端共用规则（由 refactor_views.py 从模板抽取） ---------- */
:root{--shadow-lg:0 8px 32px rgba(0,0,0,.12)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media (max-width: 768px){
  .main{padding:.75rem}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width: 480px){
  .main{padding:.5rem}
}
@media (max-width: 768px){
  .card{padding:1rem}
  .two-col{grid-template-columns:1fr}
  table{min-width:500px;font-size:.75rem}
}