/* 蜀粮供应商大屏 · 仓库绿金主题（覆盖平台蓝主题） */
:root {
  --bg-deep: #021208;
  --bg-panel: rgba(6, 40, 24, 0.78);
  --cyan: #34d399;
  --cyan-dim: #059669;
  --blue-glow: rgba(16, 185, 129, 0.45);
  --border-glow: rgba(52, 211, 153, 0.32);
  --text-dim: #86efac;
  --accent-orange: #fbbf24;
  --accent-green: #4ade80;
}

/* ── 系统内嵌布局 ── */
body.supplier-bigscreen-mode {
  background: #021208 !important;
}
body.supplier-bigscreen-mode .main {
  background: #021208;
  overflow-x: hidden;
}
body.supplier-bigscreen-mode .sidebar {
  z-index: 200;
}
body.supplier-bigscreen-mode .topbar {
  background: #0a1a10 !important;
  border-color: #1a4a30 !important;
  color: #86efac !important;
  flex-shrink: 0;
}
body.supplier-bigscreen-mode .breadcrumb { color: #86efac !important; }
body.supplier-bigscreen-mode .topbar .user { color: #86efac; }
body.supplier-bigscreen-mode .topbar .avatar {
  background: linear-gradient(135deg, #34d399, #047857) !important;
}
body.supplier-bigscreen-mode .content { padding: 0 !important; }
body.supplier-bigscreen-mode .bigscreen-embed-wrap {
  margin: 0 !important;
  min-height: calc(100vh - var(--header-height, 56px));
  padding: 0 !important;
}

body.supplier-bigscreen-mode.demo-immersive .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.supplier-bigscreen-mode.demo-immersive .main {
  margin-left: 0 !important;
  transition: margin-left 0.25s ease;
}
body.supplier-bigscreen-mode.demo-immersive .topbar { display: none !important; }
body.supplier-bigscreen-mode.demo-immersive .bigscreen,
body.supplier-bigscreen-mode.demo-immersive .bigscreen-embed-wrap {
  min-height: 100vh;
}

body.supplier-bigscreen-mode .screen-header {
  background: linear-gradient(180deg, rgba(6, 40, 24, 0.55) 0%, transparent 100%);
  border-bottom-color: rgba(52, 211, 153, 0.22);
}
body.supplier-bigscreen-mode:not(.demo-immersive) .screen-header { padding: 10px 14px; }
body.supplier-bigscreen-mode:not(.demo-immersive) .screen-title {
  font-size: 21px;
  letter-spacing: 4px;
}
body.supplier-bigscreen-mode:not(.demo-immersive) .header-meta {
  min-width: 110px;
  font-size: 11px;
}
body.supplier-bigscreen-mode .header-meta.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.screen-title.supplier-title {
  background: linear-gradient(90deg, #fff, #34d399, #fbbf24, #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── KPI 卡片 ── */
body.supplier-bigscreen-mode .kpi-row {
  gap: 14px;
  padding: 12px 12px 6px;
  flex-wrap: wrap;
  justify-content: center;
}
body.supplier-bigscreen-mode .hex-card {
  width: 128px;
  padding: 16px 10px 12px;
  animation: none;
}
body.supplier-bigscreen-mode .hex-card::before {
  background: linear-gradient(135deg, #34d399, transparent, #059669);
}
body.supplier-bigscreen-mode .hex-value {
  font-size: 22px;
  color: #34d399;
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.4);
}
body.supplier-bigscreen-mode .kpi-row-sub {
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
}
body.supplier-bigscreen-mode .kpi-row-sub .hex-card.hex-sm {
  width: auto;
  flex: 1 1 calc(16.66% - 8px);
  min-width: 84px;
  max-width: 108px;
  height: 66px;
  padding: 10px 6px;
}
body.supplier-bigscreen-mode .kpi-row-sub .hex-value { font-size: 15px; }
.hex-card.hex-gold .hex-value { color: var(--accent-orange); }
.hex-card.hex-profit .hex-value { color: var(--accent-green); }

/* ── 三栏 / 底栏网格 ── */
body.supplier-bigscreen-mode:not(.demo-immersive) .screen-body {
  grid-template-columns: minmax(210px, 25%) minmax(220px, 1fr) minmax(210px, 25%);
  gap: 10px;
  padding: 6px 10px 8px;
  min-height: 460px;
}
body.supplier-bigscreen-mode:not(.demo-immersive) .screen-bottom {
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px;
  padding: 0 10px 14px;
}
body.supplier-bigscreen-mode .col-left,
body.supplier-bigscreen-mode .col-right,
body.supplier-bigscreen-mode .col-center {
  gap: 8px;
}
body.supplier-bigscreen-mode .panel {
  background: var(--bg-panel);
  border-color: var(--border-glow);
  box-shadow: 0 0 12px rgba(16, 120, 70, 0.18), inset 0 1px 0 rgba(52, 211, 153, 0.08);
}
body.supplier-bigscreen-mode .panel-head {
  padding: 8px 12px;
  font-size: 13px;
  color: #34d399;
  border-bottom-color: rgba(52, 211, 153, 0.22);
}
body.supplier-bigscreen-mode .panel-head::before {
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
body.supplier-bigscreen-mode .panel-body { padding: 10px 12px; }
body.supplier-bigscreen-mode .panel-scroll { max-height: 168px; }

/* ── 绿主题组件覆盖 ── */
body.supplier-bigscreen-mode .mini-stat {
  background: rgba(6, 60, 36, 0.45);
  border-color: rgba(52, 211, 153, 0.18);
}
body.supplier-bigscreen-mode .mini-stat strong { color: #34d399; }
body.supplier-bigscreen-mode .chart-bar-col .bar {
  background: linear-gradient(180deg, #34d399, rgba(5, 150, 105, 0.35));
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.35);
}
body.supplier-bigscreen-mode .cat-bar-wrap { background: rgba(6, 60, 36, 0.55); }
body.supplier-bigscreen-mode .pay-cell {
  background: rgba(6, 60, 36, 0.45);
  border-color: rgba(52, 211, 153, 0.18);
}
body.supplier-bigscreen-mode .pay-num { color: #34d399; }
body.supplier-bigscreen-mode .pay-line strong { color: #d1fae5; }
body.supplier-bigscreen-mode .cs-item {
  background: rgba(6, 50, 30, 0.55);
  border-color: rgba(52, 211, 153, 0.14);
}
body.supplier-bigscreen-mode .hour-bar {
  background: linear-gradient(180deg, #34d399, rgba(5, 150, 105, 0.25));
}
body.supplier-bigscreen-mode .hour-col.peak .hour-bar {
  background: linear-gradient(180deg, #fbbf24, rgba(251, 191, 36, 0.3));
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.35);
}
body.supplier-bigscreen-mode .rank-no {
  background: rgba(52, 211, 153, 0.22);
  color: #34d399;
}
body.supplier-bigscreen-mode .rank-bar-wrap { background: rgba(6, 60, 36, 0.55); }
body.supplier-bigscreen-mode .rank-bar {
  background: linear-gradient(90deg, #059669, #34d399);
}
body.supplier-bigscreen-mode .return-box {
  background: rgba(6, 60, 36, 0.45);
  border-color: rgba(52, 211, 153, 0.2);
}
body.supplier-bigscreen-mode .sup-title { color: #34d399; }
body.supplier-bigscreen-mode .sup-row strong { color: #d1fae5; }
body.supplier-bigscreen-mode .supply-block { border-bottom-color: rgba(52, 211, 153, 0.12); }
body.supplier-bigscreen-mode .ticker-item {
  grid-template-columns: 58px 64px minmax(80px, 1fr) 48px 52px;
  background: rgba(6, 50, 30, 0.45);
}
body.supplier-bigscreen-mode .bs-table th { border-bottom-color: rgba(52, 211, 153, 0.15); }
body.supplier-bigscreen-mode .bs-table td { border-bottom-color: rgba(52, 211, 153, 0.06); color: #d1fae5; }
body.supplier-bigscreen-mode .gauge-text { color: #34d399; }
body.supplier-bigscreen-mode .leg-sales { color: #34d399; }
body.supplier-bigscreen-mode .orbit-ring { border-color: rgba(52, 211, 153, 0.22); }
body.supplier-bigscreen-mode .dot-pulse {
  background: #34d399;
  box-shadow: 0 0 12px #34d399;
}
body.supplier-bigscreen-mode .dot-label {
  color: #34d399;
  background: rgba(2, 18, 8, 0.82);
}

/* ── 背景 ── */
.bg-layer.supplier-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, rgba(16, 120, 70, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #021208 0%, #051a0e 50%, #021208 100%);
}

/* ── 中心仓库 ── */
.warehouse-core {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warehouse-core .wh-icon {
  font-size: 56px;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.6));
  animation: whPulse 2.5s ease-in-out infinite;
}
@keyframes whPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.warehouse-core .globe-label {
  position: absolute;
  bottom: -6px;
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--blue-glow);
}
body.supplier-bigscreen-mode .map-stage { min-height: 180px; }
body.supplier-bigscreen-mode .orbit-ring.r1 { width: 240px; height: 240px; }
body.supplier-bigscreen-mode .orbit-ring.r2 { width: 170px; height: 170px; }
body.supplier-bigscreen-mode .orbit-ring.r3 { width: 100px; height: 100px; }

/* ── 流程管道 ── */
.flow-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  font-size: 10px;
}
.flow-pipeline span {
  padding: 3px 8px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  color: var(--text-dim);
  white-space: nowrap;
}
.flow-pipeline .arrow { background: none; border: none; color: var(--accent-orange); padding: 0 2px; }

/* ── 扫码徽章 / 设备 ── */
.scan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid var(--border-glow);
  white-space: nowrap;
}
.scan-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  animation: blink 1.5s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.scanner-grid { display: grid; gap: 8px; }
.scanner-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  font-size: 11px;
}
.scanner-card.online { border-left: 3px solid var(--accent-green); }
.scanner-card.idle { border-left: 3px solid #64748b; opacity: 0.75; }
.scanner-card .scans { color: var(--accent-orange); font-weight: 700; font-size: 12px; }

.ticker-item .tk-op-in { color: #34d399; font-weight: 600; }
.ticker-item .tk-op-out { color: #fbbf24; font-weight: 600; }
.ticker-item .tk-op-ship { color: #38bdf8; font-weight: 600; }
.ticker-item .tk-op-pick { color: #a78bfa; font-weight: 600; }

.erp-sync-bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.erp-sync-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #34d399);
  border-radius: 3px;
}

.dual-bar.inbound { background: linear-gradient(180deg, #34d399, #059669) !important; }
.dual-bar.outbound { background: linear-gradient(180deg, #fbbf24, #d97706) !important; }

@media (max-width: 1280px) {
  body.supplier-bigscreen-mode:not(.demo-immersive) .screen-body,
  body.supplier-bigscreen-mode:not(.demo-immersive) .screen-bottom {
    grid-template-columns: 1fr 1fr;
  }
  body.supplier-bigscreen-mode:not(.demo-immersive) .col-center {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 900px) {
  body.supplier-bigscreen-mode:not(.demo-immersive) .screen-body,
  body.supplier-bigscreen-mode:not(.demo-immersive) .screen-bottom {
    grid-template-columns: 1fr;
  }
  body.supplier-bigscreen-mode .kpi-row-sub .hex-card.hex-sm {
    flex: 1 1 calc(33% - 8px);
    max-width: none;
  }
}