/* ============================================================
   CountFlow - Warm Cream 主题 (v3 风格)
   ============================================================

   设计原则:
   - 配色: 暖米白 + 金棕 + 深咖
   - 字体: Palatino 衬线 (正文) + sans-serif (小标签)
   - 边框: 1-2px 细框 + 2-4px 圆角
   - 标签: 大写 + 字间距 2-3px + 字号 9-11px
   - 完全无 emoji, 用 SVG 图标 + 纯文字
   - 阴影极少, 靠边框分隔

   ============================================================ */

:root {
  /* 主色 */
  --wc-bg:        #ffffff;
  --wc-card:      #fffdf8;
  --wc-zebra:     #faf5ee;
  --wc-border:    #d4b896;
  --wc-line:      #f0e8d8;
  --wc-text:      #3d2b1f;
  --wc-text-2:    #7a5c3a;
  --wc-text-3:    #a07840;
  --wc-accent:    #8b6914;
  --wc-accent-2:  #6b4d0a;
  --wc-gold:      #c9a96e;

  /* 状态色 */
  --wc-success:   #4a6b1a;
  --wc-success-bg:#e8f0d8;
  --wc-error:     #a04030;
  --wc-error-bg:  #f5e0d8;
  --wc-warn:      #6b4d0a;
  --wc-warn-bg:   #f0e0c0;
  --wc-info:      #2874c4;
  --wc-info-bg:   #e8f4fd;

  /* 字体 */
  --wc-font-serif:    'Palatino Linotype', 'Book Antiqua', Palatino, 'STZhongsong', Georgia, serif;
  --wc-font-sans:     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* 间距 */
  --wc-radius:    3px;
  --wc-radius-lg: 4px;
  --wc-border-w:   1.5px;
}

/* ============== 基础重置 ============== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--wc-font-serif);
  background: var(--wc-bg);
  color: var(--wc-text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wc-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============== 排版 ============== */
h1, h2, h3, h4 {
  font-weight: normal;
  color: var(--wc-text);
  font-family: var(--wc-font-serif);
}

h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.3; }
h3 { font-size: 16px; }

p { margin: 8px 0; }

/* 大写小标签 (vintage 风格) */
.wc-eyebrow,
.wc-label,
.wc-tag {
  font-family: var(--wc-font-sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  color: var(--wc-text-3);
  font-weight: 500;
}

.wc-eyebrow-strong {
  font-family: var(--wc-font-sans);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11px;
  color: var(--wc-accent);
  font-weight: 600;
}

.wc-italic {
  font-style: italic;
  color: var(--wc-text-2);
}

/* ============== 卡片 ============== */
.wc-card {
  background: var(--wc-card);
  border: var(--wc-border-w) solid var(--wc-border);
  border-radius: var(--wc-radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

.wc-card-header {
  border-bottom: 1px solid var(--wc-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wc-card-header h2 {
  font-size: 13px;
  font-family: var(--wc-font-sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--wc-accent);
  font-weight: 600;
  margin: 0;
}

/* ============== 表格 ============== */
.wc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wc-table th {
  background: transparent;
  color: var(--wc-accent);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--wc-border);
  font-family: var(--wc-font-sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 9px;
  font-weight: 600;
}

.wc-table td {
  padding: 10px;
  border-bottom: 1px solid var(--wc-line);
  color: var(--wc-text);
}

.wc-table tr:nth-child(even) td {
  background: var(--wc-zebra);
}

.wc-table tr:hover td {
  background: var(--wc-card);
}

/* ============== 按钮 ============== */
.wc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wc-card);
  color: var(--wc-text);
  border: var(--wc-border-w) solid var(--wc-text);
  border-radius: var(--wc-radius);
  padding: 8px 16px;
  font-size: 13px;
  font-family: var(--wc-font-serif);
  cursor: pointer;
  transition: all 0.15s;
}

.wc-btn:hover {
  background: var(--wc-text);
  color: var(--wc-bg);
}

.wc-btn-primary {
  background: var(--wc-accent);
  color: #fff;
  border-color: var(--wc-accent);
}

.wc-btn-primary:hover {
  background: var(--wc-accent-2);
  border-color: var(--wc-accent-2);
  color: #fff;
}

.wc-btn-danger {
  background: var(--wc-card);
  color: var(--wc-error);
  border-color: var(--wc-error);
}

.wc-btn-danger:hover {
  background: var(--wc-error);
  color: #fff;
}

.wc-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* ============== 输入框 ============== */
.wc-input,
.wc-select {
  background: var(--wc-bg);
  color: var(--wc-text);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--wc-font-serif);
}

.wc-input:focus,
.wc-select:focus {
  outline: none;
  border-color: var(--wc-accent);
  box-shadow: 0 0 0 1px var(--wc-accent);
}

.wc-input::placeholder {
  color: var(--wc-text-3);
  font-style: italic;
}

/* ============== 状态标签 ============== */
.wc-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 10px;
  font-family: var(--wc-font-sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
}

.wc-status-active {
  background: var(--wc-success-bg);
  color: var(--wc-success);
  border-color: var(--wc-success);
}
.wc-status-inactive {
  background: var(--wc-card);
  color: var(--wc-text-3);
  border-color: var(--wc-border);
}
.wc-status-success {
  background: var(--wc-success-bg);
  color: var(--wc-success);
  border-color: var(--wc-success);
}
.wc-status-error {
  background: var(--wc-error-bg);
  color: var(--wc-error);
  border-color: var(--wc-error);
}
.wc-status-warn {
  background: var(--wc-warn-bg);
  color: var(--wc-warn);
  border-color: var(--wc-warn);
}
.wc-status-pending {
  background: var(--wc-warn-bg);
  color: var(--wc-warn);
  border-color: var(--wc-warn);
}

/* ============== 容器 ============== */
.wc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* ============== KPI 卡片 ============== */
.wc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.wc-kpi {
  background: var(--wc-card);
  border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius);
  padding: 18px 16px;
  text-align: center;
}

.wc-kpi .value {
  font-size: 32px;
  color: var(--wc-accent);
  font-weight: normal;
  line-height: 1.1;
}

.wc-kpi .label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wc-text-3);
  margin-top: 6px;
  font-family: var(--wc-font-sans);
}

.wc-kpi .sub {
  font-size: 10px;
  color: var(--wc-text-3);
  margin-top: 4px;
  font-family: var(--wc-font-sans);
  font-style: italic;
}

/* ============== 警告框 ============== */
.wc-alert {
  background: var(--wc-warn-bg);
  border: 1px solid var(--wc-warn);
  color: var(--wc-warn);
  padding: 10px 14px;
  border-radius: var(--wc-radius);
  font-size: 13px;
  margin-bottom: 12px;
}

.wc-alert-error {
  background: var(--wc-error-bg);
  border-color: var(--wc-error);
  color: var(--wc-error);
}

.wc-alert-info {
  background: var(--wc-info-bg);
  border-color: var(--wc-info);
  color: var(--wc-info);
}

/* ============== 模态框 ============== */
.wc-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 31, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.wc-modal-bg.show { display: flex; }

.wc-modal {
  background: var(--wc-card);
  border: 2px solid var(--wc-text);
  border-radius: var(--wc-radius-lg);
  width: 90%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}

.wc-modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--wc-border);
  font-size: 14px;
  font-family: var(--wc-font-sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--wc-accent);
  font-weight: 600;
}

.wc-modal-body { padding: 18px 20px; }

.wc-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--wc-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ============== Logo 字号体系 ============== */
.wc-logo-big {
  font-size: 56px;
  color: var(--wc-text);
  letter-spacing: 3px;
  line-height: 1;
  font-weight: normal;
}

.wc-logo-md {
  font-size: 32px;
  color: var(--wc-text);
  letter-spacing: 2px;
  line-height: 1;
}

.wc-logo-sm {
  font-size: 18px;
  color: var(--wc-text);
  letter-spacing: 1.5px;
  line-height: 1;
}

/* 登录页大 logo */
.wc-login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.wc-login-logo .cf {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
}

.wc-login-logo .cf-text {
  font-size: 48px;
  color: var(--wc-text);
  letter-spacing: 2px;
}

.wc-login-logo .name {
  font-size: 18px;
  color: var(--wc-text-2);
  letter-spacing: 1px;
  font-style: italic;
}

.wc-login-logo .tagline {
  font-size: 11px;
  color: var(--wc-accent);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 10px;
  font-family: var(--wc-font-sans);
}

.wc-login-logo .cn {
  font-size: 13px;
  color: var(--wc-text-2);
  margin-top: 4px;
}

/* ============== 顶栏 (common.js 渲染) ============== */
.wc-topbar {
  background: linear-gradient(135deg, var(--wc-accent) 0%, var(--wc-accent-2) 100%);
  color: #fff;
  border-bottom: 1px solid var(--wc-accent-2);
}

/* P哥 6/12 10:38 — mobile 端 sticky 锁死顶栏 (common.js 根据 body.sticky-topbar 同步加 is-sticky)
 *  admin 端不加 (P哥 9:52 决策: admin 默认不改)
 *  padding-top 需各页面手动给 body 预留 46px (顶栏实际高度)
 */
.wc-topbar.is-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* P哥 6/12 12:50 — sticky 顶栏动态预留位置 (由 common.js 根据 topbar 实际高度设置 --topbar-h)
 *  解决: mobile 端链接 flex-wrap 换行后, 顶栏高度 100+px, 写死 46px 不够
 */
body.sticky-topbar { padding-top: var(--topbar-h, 46px) !important; }

.wc-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1400px;
  margin: 0 auto;
}

.wc-topbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.wc-topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wc-topbar-logo .cf-text {
  font-size: 18px;
  color: #fff;
  letter-spacing: 1.5px;
}

.wc-topbar-logo .name {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  letter-spacing: 1px;
}

.wc-topbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.wc-topbar-nav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--wc-radius);
  font-size: 12px;
  font-family: var(--wc-font-sans);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.wc-topbar-nav a:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  text-decoration: none;
}

.wc-topbar-nav svg { flex-shrink: 0; }

.wc-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.wc-topbar-user {
  font-size: 12px;
  color: rgba(255,255,255,0.95);
  font-family: var(--wc-font-sans);
  padding: 4px 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wc-topbar-user .role {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wc-topbar-logout {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--wc-radius);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--wc-font-sans);
  letter-spacing: 1px;
  transition: background 0.15s;
}

.wc-topbar-logout:hover {
  background: rgba(255,255,255,0.3);
}

/* 移动端顶栏 */
@media (max-width: 768px) {
  .wc-topbar-inner { padding: 8px 12px; }
  .wc-topbar-logo .name { display: none; }
  .wc-topbar-nav a { padding: 4px 8px; font-size: 11px; }
  .wc-topbar-user .role { display: none; }
  .wc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============== 通用 ============== */
.wc-divider {
  border: none;
  border-top: 1px solid var(--wc-border);
  margin: 16px 0;
}

.wc-divider-thin {
  border: none;
  border-top: 1px solid var(--wc-line);
  margin: 12px 0;
}

.wc-link {
  color: var(--wc-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wc-link:hover { border-bottom-color: var(--wc-accent); }

.wc-text-2 { color: var(--wc-text-2); }
.wc-text-3 { color: var(--wc-text-3); }
.wc-accent { color: var(--wc-accent); }
.wc-mt-1 { margin-top: 8px; }
.wc-mt-2 { margin-top: 16px; }
.wc-mb-1 { margin-bottom: 8px; }
.wc-mb-2 { margin-bottom: 16px; }

/* 工具栏 (筛选行) */
.wc-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.wc-toolbar .counter {
  margin-left: auto;
  color: var(--wc-text-3);
  font-size: 12px;
  font-style: italic;
}

/* 加载中 */
.wc-loading {
  text-align: center;
  padding: 40px;
  color: var(--wc-text-3);
  font-style: italic;
  font-size: 13px;
}

/* ============== P哥 6/11 V4.0 — 截止时间 banner ============== */
.deadline-banner {
  padding: 10px 16px;
  margin: 0 0 12px 0;
  border-radius: var(--wc-radius, 4px);
  font-size: 13px;
  font-family: var(--wc-font-sans);
  font-weight: 500;
  text-align: center;
  border: 1px solid;
}
.banner-warning {
  background: #fff8e1;
  color: #8b5a00;
  border-color: #fbe7c6;
}
.banner-critical {
  background: #fde2e2;
  color: #8b0000;
  border-color: #f5c6c6;
  animation: pulse 2s ease-in-out infinite;
}
.banner-late {
  background: #f5c6c6;
  color: #5a0000;
  border-color: #8b0000;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============== P哥 6/11 V4.0 — 卡片计时 ============== */
.sku-timing {
  font-size: 10px;
  color: var(--wc-accent);
  font-family: var(--wc-font-sans);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* ============== P哥 6/11 V4.0 — 库位锁定 ============== */
.sku-bin.locked {
  background: var(--wc-zebra, #f5f0e8);
  color: var(--wc-text-3, #999);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============== P哥 6/11 V4.0 — 补盘标记 ============== */
.sku-card.late-submit {
  border-left: 3px solid #8b0000;
}
.sku-card.late-submit::after {
  content: '补盘';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  background: #8b0000;
  color: #fff;
  padding: 2px 6px;
  border-radius: 8px;
  font-family: var(--wc-font-sans);
}

/* ============== P哥 6/11 18:32 — 顶栏 iOS 角标 ============== */
.wc-nav-with-badge {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.wc-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  line-height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  border-radius: 8px;
  text-align: center;
  font-family: var(--wc-font-sans);
  margin-left: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1.5px var(--wc-bg, #fdfaf3);
}