/* ==========================================================================
   RobotERP · UI 通用组件（2026-09-27）
   把散落在各页面的「彩色实心按钮 / 实心徽章 / 原生复选框」统一成同一套外观。

   ★ 本文件只**新增** class，绝不覆盖任何既有选择器 —— 其余页面零影响。
   ★ 纯视觉层，不含任何 HTML / JS 逻辑。
   ★ 原型：
       .ui-line-btn   = 数据看板·OZON类目分析 的「上一页 / 下一页」(.cate-pager-btn /
                        .ops-pager-btn 同族)：线框 + 悬浮变主题色。
       .ui-status-btn = 待铺商品卡片上的「数据已有点击上架」。
   ========================================================================== */

/* ---------- 1. 通用线框按钮 ----------
   文字颜色通过 --ub 传入：
     传了  → 常态/悬浮都用这个颜色（用于「保留原按钮颜色」的场景）
     不传  → 常态跟主题(var(--text-secondary))、悬浮用主题主色（用于「颜色跟主题走」的场景） */
.ui-line-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:30px;padding:0 16px;box-sizing:border-box;
  border:1px solid var(--border-color);border-radius:6px;
  background:var(--bg-card);
  color:var(--ub,var(--text-secondary));
  font-family:inherit;font-size:12px;font-weight:600;line-height:1;
  letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,transform .12s ease,opacity .15s ease;
}
.ui-line-btn:hover:not(:disabled){
  border-color:var(--ub,var(--primary-color));
  color:var(--ub,var(--primary-color));
}
.ui-line-btn:active:not(:disabled){transform:translateY(1px);}
.ui-line-btn:disabled{opacity:.35;cursor:not-allowed;}
/* 小一号：表格行内 / 紧凑工具栏用 */
.ui-line-btn.ui-line-btn-sm{height:26px;padding:0 12px;font-size:11px;}
/* 更小一号：表格表头 / 单元格行内的小按钮（如「翻译」「批量设置」「找货寻价」） */
.ui-line-btn.ui-line-btn-xs{height:20px;padding:0 8px;font-size:10px;}

/* ---------- 2. 「数据已有点击上架」同款状态按钮 ----------
   描边 + 浅底都由 currentColor 派生 → 颜色语义写在行内 style 的 color 上即可。 */
.ui-status-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;padding:0 8px;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, currentColor 40%, transparent);
  background:color-mix(in srgb, currentColor 12%, transparent);
  font-family:inherit;font-size:10.5px;font-weight:600;line-height:1;
  letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background-color .18s ease;
}
.ui-status-btn:hover:not(:disabled){background:color-mix(in srgb, currentColor 24%, transparent);}
.ui-status-btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- 3. 圆点复选框 ----------
   选中：只有圆圈里的勾上色（整圈填充主色 + 白勾）；
   常态**不画任何边线/外环**，只有鼠标悬浮才给一圈淡淡的主题色外环。 */
.ui-round-check{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin:0;flex:0 0 auto;
  border:0;border-radius:50%;
  background-color:color-mix(in srgb, var(--text-muted) 40%, transparent);
  background-repeat:no-repeat;background-position:center;background-size:9px 9px;
  cursor:pointer;
  transition:background-color .18s ease,box-shadow .18s ease;
}
.ui-round-check:hover{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.ui-round-check:checked{
  background-color:var(--primary-color);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ui-round-check:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- 4. 智能跟卖卡片：统一排版 ----------
   所有字段同一个深色（#333，「黑色但不要太黑」）、同一套字体；
   同一行出现两个字段时用 .ss-card-sep（|）隔开。
   ★ 只作用于「待编辑跟卖商品」的卡片网格 —— .sourcing-product-card 被
     1688选品铺货 / 待铺商品 两个页面共用，不加这个前缀会连带改掉它们。 */
/* 卡片改纵向 flex：网格默认同行等高、卡片撑满行高 → .spc-info 用 flex:1 吃满剩余高度，
   底部操作条再 margin-top:auto → 无论卡片内容多少，三个按钮都齐平贴底。 */
#smartSelectCardsGrid .sourcing-product-card{display:flex;flex-direction:column;}
#smartSelectCardsGrid .sourcing-product-card > img{flex:0 0 auto;}
#smartSelectCardsGrid .sourcing-product-card .spc-info{
  /* Times New Roman 没有中文字形 → 中文自动回落到微软雅黑；俄文/拉丁走 Times New Roman */
  font-family:"Times New Roman","Microsoft YaHei",sans-serif;
  color:#333;
  flex:1 1 auto;
  display:flex;flex-direction:column;   /* 让底部操作条能用 margin-top:auto 贴底 */
}
#smartSelectCardsGrid .sourcing-product-card .spc-title{color:#333;font-weight:600;margin-bottom:1px;}
#smartSelectCardsGrid .sourcing-product-card .spc-price{
  display:flex;align-items:center;font-size:13px;font-weight:700;
  color:var(--danger-color);            /* 价格改红色 */
}
#smartSelectCardsGrid .sourcing-product-card .ss-card-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:10px;line-height:1.55;color:#333;
}
#smartSelectCardsGrid .sourcing-product-card .ss-card-sep{color:var(--text-muted);}

/* 卡片底部操作条：三个按钮等宽，合计铺满卡片整宽，永远贴在卡片底部 */
#smartSelectCardsGrid .sourcing-product-card .ss-card-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  margin-top:auto;padding-top:6px;
}
.ss-card-foot-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:24px;padding:0 4px;box-sizing:border-box;
  border:1px solid var(--border-color);border-radius:var(--radius-sm);
  background:var(--bg-popover,var(--bg-card));
  font-family:inherit;font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .12s ease,opacity .15s ease;
}
.ss-card-foot-btn:hover:not(:disabled){
  border-color:currentColor;
  background:color-mix(in srgb, currentColor 10%, transparent);
  transform:translateY(-1px);
}
.ss-card-foot-btn:disabled{opacity:.45;cursor:not-allowed;}
/* 「找货询盘」：默认蓝字（JS 渲染时也会写行内 color:#3b82f6，这里只是兜底） */
.ss-card-foot-btn.ss-inquiry-btn{color:#3b82f6;}

/* 卡片左上角「参与全自动上架」圆点复选框：全局 .ui-round-check 未勾选时用的是
   --text-muted 的 40%（≈#C3C6CB，太淡），这里**只对本页卡片**加深到 85%，
   未勾选也一眼看得清；勾选态仍走全局的 --primary-color（蓝）。
   ⚠ 必须写 :not(:checked) —— 否则本选择器权重比 `.ui-round-check:checked` 高，
      会把勾选态的蓝色背景一起盖掉。 */
#smartSelectCardsGrid .sourcing-product-card input.ui-round-check.ss-card-select:not(:checked){
  background-color:color-mix(in srgb, var(--text-muted) 85%, transparent);
}
#smartSelectCardsGrid .sourcing-product-card input.ui-round-check.ss-card-select:not(:checked):hover{
  background-color:var(--text-muted);
}

/* ---------- 5. 编辑跟卖商品页：其余按钮的悬浮反馈 ----------
   （这些按钮大多由 JS 拼行内样式生成，原来鼠标移上去没有任何反应） */
#smartSelectEditPanel button:not(:disabled){
  transition:box-shadow .15s ease,filter .15s ease,transform .12s ease;
}
#smartSelectEditPanel button:not(:disabled):hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 2px 8px -2px color-mix(in srgb, var(--primary-color) 55%, transparent);
}
#smartSelectEditPanel button:not(:disabled):active{transform:translateY(1px);filter:brightness(.96);}

/* ---------- 6. OZON 上架记录：操作列按钮固定两行 ----------
   5 个按钮（查看/上架/归档/库存/删除）：限宽 + 换行 → 恰好 3 + 2 两行，
   左右都还有空余，不再被挤压成 3~4 行。 */
.ozon-hist-ops{
  display:flex;flex-wrap:wrap;gap:4px;
  width:158px;          /* 容得下 3 个两字按钮（含 gap），第 4 个必然换行 */
  max-width:158px;
}
.ozon-hist-ops .btn{margin:0;}

/* ---------- 7. 「商品详情」弹窗：线框化之后的悬浮反馈 ----------
   按钮的底色/边框/文字色是 JS 写在行内 style 上的（见 _aoixiaUnifyDetailButtons），
   所以这里必须用 !important 才能盖住行内值。 */
.aoixia-detail-line-btn:hover:not(:disabled){
  border-color:currentColor !important;
  background:color-mix(in srgb, currentColor 10%, transparent) !important;
}
.aoixia-detail-line-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- 8. 「智能识别本地商品」弹窗：彩色按钮 → 边框线按钮（文字保留原色） ---------- */
#localImportModal .btn-primary{
  background:var(--bg-popover);border:1px solid var(--border-color);
  color:var(--primary-color);box-shadow:none;
}
#localImportModal .btn-primary:hover{
  filter:none;box-shadow:none;border-color:var(--primary-color);color:var(--primary-color);
}

/* ---------- 9. OZON 功能区：所有「纯色块按钮」→ 边框线按钮（文字用它自己原来的色） ----------
   .btn-primary 蓝紫渐变、.btn-success/.btn-danger/.btn-info/.btn-warning 实色 ——
   例如「商品管理」的查询 / 刷新。.btn-secondary 本来就已经是白底+描边，不在此列。 */
#workspace-ozon .btn-primary,
#workspace-ozon .btn-success,
#workspace-ozon .btn-danger,
#workspace-ozon .btn-info,
#workspace-ozon .btn-warning{
  background:var(--bg-popover);border:1px solid var(--border-color);box-shadow:none;
}
#workspace-ozon .btn-primary{color:var(--primary-color);}
#workspace-ozon .btn-success{color:var(--success-color);}
#workspace-ozon .btn-danger{color:var(--danger-color);}
#workspace-ozon .btn-info{color:var(--info-color);}
#workspace-ozon .btn-warning{color:var(--warning-color);}
#workspace-ozon .btn-primary:hover,
#workspace-ozon .btn-success:hover,
#workspace-ozon .btn-danger:hover,
#workspace-ozon .btn-info:hover,
#workspace-ozon .btn-warning:hover{
  filter:none;box-shadow:none;border-color:currentColor;
  background:color-mix(in srgb, currentColor 10%, transparent);
}
#workspace-ozon .btn-primary:disabled,
#workspace-ozon .btn-success:disabled,
#workspace-ozon .btn-danger:disabled,
#workspace-ozon .btn-info:disabled,
#workspace-ozon .btn-warning:disabled{opacity:.45;background:var(--bg-popover);color:var(--text-muted);}