/* JCS ERP 公共样式 */

/* ===== Reset 重置 ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family: "Microsoft Yahei", sans-serif; }
html, body { height:100%; overflow:hidden; }
body { background:#f5f7fa; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; }
input, textarea, select { outline:none; }

/* ===== 问号注释提示组件（公共） =====
   输出函数：includes/help_tip.php 的 help_tip('提示文字')
   结构：<span class="help-tip"><span class="help-icon">?</span><span class="help-bubble">文字</span></span> */
.help-tip { display:inline-flex; align-items:center; position:relative; vertical-align:middle; }
.help-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#e5e6eb; color:#86909c; font-size:10px; line-height:1; cursor:pointer; user-select:none; flex-shrink:0; transition:background .15s, color .15s; }
.help-tip:hover .help-icon { background:#165dff; color:#fff; }
.help-bubble { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#fff; color:#4e5969; font-size:11px; line-height:1.5; padding:6px 10px; border-radius:6px; width:160px; z-index:1000; white-space:normal; border:1px solid #e5e6eb; box-shadow:0 4px 12px rgba(0,0,0,0.1); opacity:0; visibility:hidden; transition:opacity .15s; pointer-events:none; }
.help-tip:hover .help-bubble { opacity:1; visibility:visible; }
/* 箭头指向问号：上方气泡 → 底部向下箭头（灰描边 + 白色内芯） */
.help-bubble::before { content:''; position:absolute; bottom:-7px; left:50%; margin-left:-7px; border:7px solid transparent; border-top:7px solid #e5e6eb; border-bottom:none; }
.help-bubble::after { content:''; position:absolute; bottom:-6px; left:50%; margin-left:-6px; border:6px solid transparent; border-top:6px solid #fff; border-bottom:none; }
.help-bubble.help-below { bottom:auto; top:calc(100% + 8px); }
/* 下方气泡 → 顶部向上箭头指向问号 */
.help-bubble.help-below::before { bottom:auto; top:-7px; border:7px solid transparent; border-bottom:7px solid #e5e6eb; border-top:none; }
.help-bubble.help-below::after { bottom:auto; top:-6px; border:6px solid transparent; border-bottom:6px solid #fff; border-top:none; }
.help-bubble.help-right { left:auto; right:0; transform:none; }
.help-bubble.help-right::before { left:auto; right:6px; margin-left:0; }
.help-bubble.help-right::after { left:auto; right:7px; margin-left:0; }
/* 表头问号专用：脱离 overflow:hidden 容器，由 JS 插入 body 固定定位 */
.help-bubble.help-floating { opacity:1; visibility:visible; position:fixed; }

/* ===== 通用勾选框（浅灰边框，和搜索框一致；选中蓝色对勾） ===== */
input[type="checkbox"] {
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border:1px solid #e5e6eb;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  vertical-align:middle;
  position:relative;
  transition:border-color .15s, background .15s;
  margin:0;
  flex-shrink:0;
}
input[type="checkbox"]:hover { border-color:#165dff; }
input[type="checkbox"]:checked { background:#165dff; border-color:#165dff; }
input[type="checkbox"]:checked::after {
  content:'';
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:2px solid #fff;
  border-top:0;
  border-left:0;
  transform:rotate(45deg);
}

/* ===== 通用按钮 ===== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  border-radius:20px;
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s;
  border:none;
}
.btn-primary {
  background:#165dff;
  color:#fff;
}
.btn-primary:hover { background:#0e4bd6; }
.btn-outline {
  background:#fff;
  color:#165dff;
  border:1px solid #165dff;
}
.btn-outline:hover { background:#e8f3ff; }
.btn-text {
  background:none;
  color:#165dff;
  padding:0;
}
.btn-text:hover { text-decoration:underline; }

/* ===== 通用输入框 ===== */
.form-input {
  width:100%;
  padding:12px 16px;
  border:1px solid #e5e6eb;
  border-radius:8px;
  font-size:14px;
  color:#1d2129;
  outline:none;
  transition:border-color 0.2s;
  background:#fff;
}
.form-input::placeholder { color:#c9cdd4; }
.form-input:focus { border-color:#165dff; }
.form-input:disabled { background:#f5f7fa; cursor:not-allowed; }

/* ===== 通用表单项 ===== */
.form-item {
  position:relative;
  margin-bottom:16px;
}
.form-label {
  display:block;
  font-size:14px;
  color:#4e5969;
  margin-bottom:8px;
}
.required {
  color:#f53f3f;
  font-size:14px;
}

/* ===== 通用文字 ===== */
.text-primary { color:#165dff; }
.text-secondary { color:#86909c; }
.text-muted { color:#c9cdd4; }
.text-bold { font-weight:700; }

/* ===== 通用间距 ===== */
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }

/* ===== Toast 提示组件 ===== */
.toast-container {
  position:fixed;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:10003;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.toast {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);
  font-size:14px;
  color:#1d2129;
  animation: toastIn 0.3s ease;
}
.toast.success { border-left:3px solid #00b42a; }
.toast.error { border-left:3px solid #f53f3f; }
.toast-icon {
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#fff;
  flex-shrink:0;
}
.toast.success .toast-icon { background:#00b42a; }
.toast.error .toast-icon { background:#f53f3f; }
.toast.hide {
  animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes toastOut {
  from { opacity:1; transform:translateY(0); }
  to { opacity:0; transform:translateY(-20px); }
}

/* ===== 顶部导航栏（所有页面统一外观） ===== */
.top-nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:60px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  z-index:100;
}
.nav-left {
  display:flex;
  align-items:center;
  gap:36px;
}
.logo {
  font-size:32px;
  font-weight:800;
  color:#165dff;
  text-decoration:none;
  cursor:pointer;
}
.nav-item {
  font-size:14px;
  color:#333;
  cursor:pointer;
  text-decoration:none;
  transition:color 0.2s;
}
.nav-item:hover { color:#165dff; }
.nav-item.tag {
  border:1px solid #165dff;
  color:#165dff;
  padding:6px 12px;
  border-radius:16px;
  font-size:13px;
  display:inline-block;
  transition:all 0.2s;
}
.nav-item.tag:hover { background:#e8f3ff; }

/* ===== 下拉菜单 ===== */
.dropdown { position:relative; }
.dropdown::after {
  content:'';
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:12px;
}
.dropdown-toggle {
  font-size:14px;
  color:#333;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  transition:color 0.2s;
}
.dropdown:hover .dropdown-toggle { color:#165dff; }
.dropdown .arrow { font-size:10px; margin-left:2px; transition:transform 0.2s; }
.dropdown:hover .arrow { transform:rotate(180deg); }
.dropdown-menu {
  position:absolute;
  top:100%;
  left:0;
  margin-top:12px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  min-width:160px;
  padding:6px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all 0.2s ease;
  z-index:100;
}
.dropdown:hover .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-item {
  padding:14px 20px;
  font-size:15px;
  color:#333;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
  position:relative;
  z-index:1001;
}
.dropdown-item:hover { background:#e8f3ff; color:#165dff; }

/* ===== 会员中心/开通续费小按钮 ===== */
.btn-small {
  height:26px;
  padding:0 12px;
  border:none;
  border-radius:13px;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:2px;
  transition:all 0.2s;
  color:#fff;
}
.btn-member { background:#165dff; }
.btn-member:hover { background:#0e4ed1; }
.btn-renew { background:#ff7d00; }
.btn-renew:hover { background:#e66a00; }

/* ===== 用户头像 ===== */
.user-avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
}

/* ===== 用户下拉菜单 ===== */
.user-dropdown {
  display:none;
  position:absolute;
  top:40px;
  right:0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  width:320px;
  padding:16px;
  z-index:100;
}
.user-dropdown.show { display:block; }
.user-info {
  display:flex;
  gap:12px;
  margin-bottom:16px;
  padding:12px;
  background:#f7f8fa;
  border-radius:8px;
}
.user-info-avatar {
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}
.user-name {
  font-size:14px;
  font-weight:600;
  color:#1d2129;
}
.user-email {
  font-size:12px;
  color:#86909c;
  margin-top:4px;
}
.membership-progress {
  margin-bottom:16px;
}
.membership-progress-label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#4e5969;
  margin-bottom:8px;
}
.membership-progress-bar {
  width:100%;
  height:6px;
  background:#e5e6eb;
  border-radius:3px;
}
.membership-progress-fill {
  height:100%;
  background:#165dff;
  border-radius:3px;
}
.site-switch {
  margin-bottom:16px;
}
.site-switch-label {
  font-size:12px;
  color:#86909c;
  margin-bottom:8px;
}
.site-switch-buttons {
  display:flex;
  gap:8px;
}
.site-btn {
  padding:8px 16px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
}
.site-btn.active { background:#e8f3ff; color:#165dff; }
.site-btn.inactive { background:#f2f3f5; color:#4e5969; }
.user-menu-grid {
  border-top:1px solid #e5e6eb;
  padding-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.user-menu-item {
  padding:8px;
  font-size:13px;
  color:#4e5969;
  cursor:pointer;
  text-align:center;
}
.logout-btn {
  display:block;
  padding:10px;
  background:#fff;
  border:1px solid #165dff;
  border-radius:8px;
  font-size:13px;
  color:#165dff;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  margin-top:12px;
  border-top:1px solid #e5e6eb;
  padding-top:12px;
}

/* ===== 弹窗遮罩层 ===== */
.modal-mask {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:100;
  align-items:center;
  justify-content:center;
}
.modal-mask.show { display:flex !important; z-index:9999 !important; }

/* ===== 弹窗通用样式 ===== */
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}
.modal-title { font-size:20px; font-weight:700; color:#1d2129; margin:0; }
.modal-close {
  font-size:24px;
  color:#86909c;
  cursor:pointer;
  line-height:1;
  transition:color 0.2s;
}
.modal-close:hover { color:#1d2129; }

/* 密码框小眼睛 */
.toggle-pwd {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#86909c;
  cursor:pointer;
  user-select:none;
  line-height:1;
  z-index:10;
}
.toggle-pwd:hover { opacity:1; }
.form-item .pwd-input {
  padding-right:36px;
}

/* ===== OZON工作台公共样式 ===== */
.sidebar {
  position:fixed;
  top:60px;
  left:0;
  width:220px;
  height:calc(100vh - 60px);
  background:#fff;
  box-shadow:2px 0 4px rgba(0,0,0,0.05);
  padding:12px 0 12px 12px;
  overflow-y:auto;
  z-index:99;
}
.main-content {
  margin-top:60px;
  margin-left:220px;
  padding:24px 24px 24px 12px;
  height:calc(100vh - 60px);
  overflow-y:auto;
  box-sizing:border-box;
}
/* 内容区滚动条（替代浏览器整页滚动条，不再压住顶部导航） */
.main-content::-webkit-scrollbar { width:6px; }
.main-content::-webkit-scrollbar-track { background:transparent; }
.main-content::-webkit-scrollbar-thumb { background:#c9cdd4; border-radius:3px; }
.main-content::-webkit-scrollbar-thumb:hover { background:#a9aeb8; }
.page-header {
  margin-bottom:24px;
}
.page-title { font-size:24px; font-weight:700; color:#1d2129; }
.page-desc { font-size:14px; color:#86909c; margin-top:4px; }

/* 公共导航：会员VIP按钮流光动画 */
.member-vip-btn {
  overflow:hidden;
  position:relative;
}
.member-vip-btn::after {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shine 2s infinite;
}
@keyframes shine {
  0% { left:-100%; }
  100% { left:100%; }
}

/* 公共导航：创建OZON店铺按钮流光动画 */
.nav-create-ozon-btn {
  overflow:hidden;
  position:relative;
}
.nav-create-ozon-btn::after {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shine 2s infinite;
}

/* 公共导航：下载插件按钮hover效果 */
.download-plugin-btn {
  transition: all 0.2s;
}
.download-plugin-btn:hover {
  background: #e8f3ff !important;
  border-color: #0f4cdb !important;
  color: #0f4cdb !important;
}

/* 公共导航：下拉菜单显示和hover效果 */
#downloadDropdown.show, #memberDropdown.show { display: block !important; }
#memberDropdown div:hover { background: #e8f3ff; color: #165dff; }
/* 操作按钮hover效果（只变色，不位移） */
.btn-primary-hover {
  transition: background 0.2s;
}
.btn-primary-hover:hover {
  background: #0f4cd9 !important;
}.btn-blue {
  transition: background 0.2s;
}
.btn-blue:hover {
  background: #0f4cd9 !important;
}

/* ===== 公共表单与滚动条（从 ozon 各页面内联样式集中迁移，避免重复与漂移） ===== */

/* 通用筛选输入框：店铺/货号/SKU/关键词等查询框统一外观 */
.filter-input { height:36px; border:1px solid #e5e6eb; border-radius:6px; padding:0 12px; font-size:13px; color:#1d2129; outline:none; box-sizing:border-box; }
.filter-input::placeholder { color:#86909c; }
.filter-input:focus { border-color:#165dff; }

/* 通用下拉项：店铺下拉、操作下拉等列表项统一交互 */
.dd-item { display:block; padding:8px 16px; cursor:pointer; font-size:13px; color:#4e5969; text-decoration:none; }
.dd-item:hover { background:#e8f3ff; color:#165dff; }

/* 全局滚动条：默认浅色细条，悬停变深变粗 */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#f0f0f0; border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:#c9cdd4; border-radius:3px; }
* { scrollbar-width:thin; scrollbar-color:#f0f0f0 transparent; }

/* 小屏适配统一由 assets/js/responsive.js 整体等比缩放处理，此文件不再做媒体查询 */