/* ============================================================
 * 施必得数字大屏 - 样式表
 * ------------------------------------------------------------
 * 组织方式:
 *   1) 顶部 :root 集中定义 token (配色 / 核心尺寸 / 圆角 / 主字号)
 *   2) 之后按「切片(slice)」分区, 每个分区对应 views/ 中的一个
 *      data-slice 锚点, 完整对照关系见项目根目录 SLICES.md
 *
 * 改样式时的正确姿势:
 *   1. 查 SLICES.md 找到目标切片 -> 回到本文件同名分区修改
 *   2. 换主色/调间距, 优先改 :root 里的 token, 不要就地改数值
 *
 * 已知边界 (详见 SLICES.md):
 *   1. 半透明 rgba() 仅三种品牌色(cyan/gold/green)做了 token 化,
 *      其余 rgba() 保持原值 —— 避免 token 泛滥
 *   2. 部分颜色仍以内联 style / SVG 属性写死在 views/ 与地图 SVG 中,
 *      本次未收编, 改这些颜色需要同时改代码
 * ============================================================ */

/* ===== TOKENS ===== */
:root {
  /* --- 品牌色 (附带 rgb 三元组, 供 rgba() 使用) --- */
  --c-cyan:        #00e5ff;  --c-cyan-rgb:  0,229,255;
  --c-title:       #00ddff;
  --c-cyan-bright: #00d4ff;
  --c-cyan-deep:   #0066ff;
  --c-blue-deep:   #0044aa;
  --c-gold:        #ffd700;  --c-gold-rgb:  255,215,0;
  --c-green:       #00ff88;  --c-green-rgb: 0,255,136;
  --c-brand:       #0099cc;

  /* --- 背景 / 底色 --- */
  --c-bg:            #010a18;
  --c-header-from:   #061838;
  --c-header-to:     #041230;
  --c-header-border: #0c3880;
  --c-panel-from:    #061525;
  --c-panel-to:      #0a1e38;
  --c-panel-border:  #0e3468;
  --c-track:         #0a1830;
  --c-head-bg:       #05182e;

  /* --- 文字 --- */
  --c-text:        #c8deff;
  --c-text-dim:    #8899bb;
  --c-text-mute:   #5577aa;
  --c-text-sub:    #5588aa;
  --c-text-faint:  #3a5570;
  --c-placeholder: #3a6a99;
  --c-digit-name:  #aabbcc;
  --c-upc-text:    #cce0f0;
  --c-metric-label:#557799;
  --c-label:       #446688;
  --c-kpi-label:   #5588aa;

  /* --- 核心尺寸 --- */
  --screen-w:    1920px;
  --screen-h:    1080px;
  --header-h:    76px;
  --col-side-w:  350px;
  --prov-bar-h:  100px;
  --gap-screen:  7px;
  --gap-main:    10px;
  --gap-col:     7px;
  --panel-pad:   10px 12px;
  --scrollbar-size: 4px;

  /* --- 圆角 --- */
  --radius-panel: 8px;
  --radius-card:  6px;
  --radius-item:  5px;
  --radius-xs:    4px;
  --radius-pill:  50%;

  /* --- 主字号 --- */
  --fs-header-title: 34px;
  --fs-panel-title:  12px;
  --fs-base:         12px;
}

/* ===== 全局 / 页面骨架 ===== */
* { margin:0; padding:0; box-sizing: border-box; }
html, body {
  width: 100vw; height: 100vh; overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,180,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,180,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
}
.scale-wrapper {
  position: fixed; top: 0; left: 0;
  width: var(--screen-w); height: var(--screen-h);
  transform-origin: top left;
}
.screen {
  position: relative; z-index: 1;
  width: var(--screen-w); height: var(--screen-h);
  display: flex; flex-direction: column;
  padding: 8px 14px 6px; gap: var(--gap-screen);
}
.main { flex: 1; display: flex; gap: var(--gap-main); min-height: 0; overflow: hidden; }
.col-left   { width: var(--col-side-w); display: flex; flex-direction: column; gap: var(--gap-col); flex-shrink: 0; }
.col-center { flex: 1; display: flex; flex-direction: column; gap: var(--gap-col); min-width: 0; }
.col-right  { width: var(--col-side-w); display: flex; flex-direction: column; gap: var(--gap-col); flex-shrink: 0; }

/* ===== 通用面板 (被多个切片复用) ===== */
.panel {
  background: linear-gradient(160deg, var(--c-panel-from) 0%, var(--c-panel-to) 100%);
  border: 1px solid var(--c-panel-border); border-radius: var(--radius-panel);
  padding: var(--panel-pad); position: relative; overflow: hidden;
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,180,255,0.3), transparent);
}
.panel-title {
  font-size: var(--fs-panel-title); font-weight: bold; color: var(--c-title);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,160,255,0.15);
  display: flex; align-items: center; gap: 6px;
}
.panel-title::before {
  content: ''; display: inline-block; width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-blue-deep)); border-radius: 2px;
}

/* ============================================================
 * SLICE 1: header (顶栏)
 * 锚点: views/header.php  [data-slice="header"]
 * ============================================================ */
.header {
  height: var(--header-h); flex-shrink: 0;
  background: linear-gradient(180deg, var(--c-header-from) 0%, var(--c-header-to) 100%);
  border: 1px solid var(--c-header-border); border-radius: var(--radius-panel);
  display: flex; align-items: center; justify-content: center;
  padding: 0 36px; position: relative; overflow: hidden;
}
.header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-cyan-bright), var(--c-cyan-deep), var(--c-cyan-bright), transparent);
}
.header-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 100px;
  background: radial-gradient(ellipse, rgba(0,210,255,0.12), transparent 70%);
  pointer-events: none;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-brand { font-size: 13px; font-weight: bold; color: var(--c-brand); letter-spacing: 3px; opacity: 0.5; }
.header-title {
  font-size: var(--fs-header-title); font-weight: bold; color: var(--c-cyan);
  text-shadow: 0 0 30px rgba(var(--c-cyan-rgb),0.5), 0 0 60px rgba(var(--c-cyan-rgb),0.2);
  letter-spacing: 8px;
}
.header-logo {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  height: 56px; width: auto; flex-shrink: 0;
}
.header-sub { font-size: 11px; color: var(--c-label); margin-top: 2px; letter-spacing: 4px; }
.header-kpi-row { display: flex; gap: 50px; align-items: center; }
.header-kpi { text-align: center; position: relative; }
.header-kpi::after {
  content: ''; position: absolute; right: -25px; top: 5px; bottom: 5px;
  width: 1px; background: rgba(0,150,255,0.2);
}
.header-kpi:last-child::after { display: none; }
.header-kpi .kpi-num {
  font-size: 36px; font-weight: bold;
  text-shadow: 0 0 20px rgba(var(--c-gold-rgb),0.4); line-height: 1;
}
.header-kpi .kpi-unit { font-size: 14px; }
.header-kpi .kpi-label { font-size: 11px; color: var(--c-kpi-label); letter-spacing: 1px; margin-top: 2px; }

/* 顶栏状态标签 (PHP 版新增) */
.header-status {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--c-text-sub); letter-spacing: 1px;
}
.header-status .hs-dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--c-green); box-shadow: 0 0 8px var(--c-green);
  animation: hsBlink 2s ease-in-out infinite;
}
.header-status.demo .hs-dot { background: var(--c-gold); box-shadow: 0 0 8px var(--c-gold); }
@keyframes hsBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
 * SLICE 2: customer-total (客户总量)
 * 锚点: views/col-left.php  [data-slice="customer-total"]
 * 注意: 环形图颜色写死在 col-left.php 的 SVG stroke 属性 (#00e5ff / #ffd700),
 *       改配色需同步改该文件, 未收编为 token
 * ============================================================ */
.pie-cont { display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.pie-svg { flex-shrink: 0; }
.pie-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.legend-dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; }
.legend-label { color: var(--c-text-dim); }
.legend-val { color: #fff; font-weight: bold; font-size: 17px; margin-left: auto; }
.legend-unit { color: var(--c-text-mute); font-size: 10px; }

/* ============================================================
 * SLICE 3: exhibit-cats (展项分类)
 * 锚点: views/col-left.php  [data-slice="exhibit-cats"]
 * 本切片无专属 CSS: 条形由 col-left.php 内联 SVG 绘制,
 * 颜色取自数据 exhibitCats[].color, 容器样式来自「通用面板 .panel」
 * ============================================================ */

/* ============================================================
 * SLICE 4: activity (展项活跃度)
 * 锚点: views/col-left.php  [data-slice="activity"]
 * 同 SLICE 3: 内联 SVG + .panel, 颜色取自 activity[].color
 * ============================================================ */

/* ============================================================
 * SLICE 5: map (省份地图)
 * 锚点: views/col-center.php  [data-slice="map"]
 * ============================================================ */
.map-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.map-title-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.map-legend-bar { display: flex; gap: 12px; font-size: 10px; color: var(--c-text-sub); }
.map-legend-bar span { display: flex; align-items: center; gap: 4px; }
.map-legend-bar .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; }
.zj-map-wrap {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: rgba(0,10,30,0.4); border-radius: var(--radius-card);
}
.zj-map-wrap svg { width: 100%; height: 100%; }
/* 地图加载占位 */
.map-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-base); color: var(--c-placeholder); letter-spacing: 2px;
}

/* ============================================================
 * SLICE 6: provinces (各省份卡片)
 * 锚点: views/col-center.php  [data-slice="provinces"]
 * ============================================================ */
.prov-bar {
  height: var(--prov-bar-h); flex-shrink: 0;
  background: rgba(0,10,30,0.5); border: 1px solid var(--c-panel-border); border-radius: var(--radius-panel);
  padding: 6px 10px; display: flex; align-items: center; gap: 8px;
}
.prov-bar-title {
  font-size: 10px; color: var(--c-title); font-weight: bold; writing-mode: vertical-lr;
  letter-spacing: 3px; flex-shrink: 0; text-align: center; height: 100%;
  display: flex; align-items: center;
}
.prov-cards {
  display: flex; gap: 8px; flex: 1; overflow-x: auto; align-items: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,150,220,0.3) rgba(0,10,30,0.5);
  padding-bottom: 4px;
}
.prov-cards::-webkit-scrollbar { height: var(--scrollbar-size); }
.prov-cards::-webkit-scrollbar-track { background: rgba(0,10,30,0.5); border-radius: 2px; }
.prov-cards::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.3); border-radius: 2px; }
.prov-cards::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,0.5); }
.prov-mini {
  flex-shrink: 0; width: 120px; height: 78px;
  background: linear-gradient(135deg, rgba(0,30,70,0.7), rgba(0,15,45,0.5));
  border: 1px solid rgba(0,100,200,0.3); border-radius: var(--radius-card);
  padding: 5px 8px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; transition: all 0.2s;
}
.prov-mini:hover {
  border-color: rgba(0,200,255,0.6);
  box-shadow: 0 0 8px rgba(0,200,255,0.15);
}
.prov-mini.active {
  border-color: var(--c-cyan);
  box-shadow: 0 0 12px rgba(var(--c-cyan-rgb),0.25), inset 0 0 8px rgba(var(--c-cyan-rgb),0.06);
}
.prov-mini-thumb { width: 48px; height: 48px; flex-shrink: 0; opacity: 0.85; pointer-events: none; }
.prov-mini-thumb svg { width: 100%; height: 100%; pointer-events: none; }
.prov-mini-info { flex: 1; min-width: 0; }
.prov-mini-name { font-size: var(--fs-base); color: var(--c-cyan); font-weight: bold; margin-bottom: 3px; }
.prov-mini-count { font-size: 10px; color: var(--c-gold); }
.prov-mini-detail { font-size: 8px; color: var(--c-text-mute); margin-top: 2px; }

/* ============================================================
 * SLICE 7: hall-usage (展厅使用与时长)
 * 锚点: views/col-right.php  [data-slice="hall-usage"]
 * ============================================================ */
.digital-list { display: flex; flex-direction: column; gap: 5px; }
/* 展厅在线情况滚动条 */
.digital-list::-webkit-scrollbar { width: var(--scrollbar-size); }
.digital-list::-webkit-scrollbar-track { background: rgba(0,10,30,0.4); border-radius: 3px; }
.digital-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--c-cyan-rgb),0.2), rgba(var(--c-cyan-rgb),0.4), rgba(var(--c-green-rgb),0.3)); border-radius: 3px; }
.digital-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--c-cyan-rgb),0.4), rgba(var(--c-cyan-rgb),0.6), rgba(var(--c-green-rgb),0.5)); }
.digital-list { scrollbar-width: thin; scrollbar-color: rgba(var(--c-cyan-rgb),0.25) rgba(0,10,30,0.3); }
.digital-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: rgba(0,16,50,0.3); border-radius: var(--radius-item);
}
.digital-name { font-size: 10px; color: var(--c-digit-name); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 展厅名可点击 -> hall.php (子页面: 平面图 + 展项媒体) */
.hall-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.hall-link:hover,
.hall-link:focus {
  color: var(--c-cyan);
  text-shadow: 0 0 8px rgba(var(--c-cyan-rgb), 0.65);
  text-decoration: underline;
  outline: none;
}
.digital-bar-track { flex: 1; height: 7px; background: var(--c-track); border-radius: var(--radius-xs); overflow: hidden; }
.digital-bar-fill { height: 100%; border-radius: var(--radius-xs); }
.digital-pct { font-size: 11px; font-weight: bold; min-width: 30px; text-align: right; flex-shrink: 0; }
.status-dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill); flex-shrink: 0;
  margin-right: 2px;
}

/* ============================================================
 * SLICE 8: exhibit-status (展厅情况)
 * 锚点: views/col-right.php  [data-slice="exhibit-status"]
 * ============================================================ */
.upgrade-list::-webkit-scrollbar { width: var(--scrollbar-size); }
.upgrade-list::-webkit-scrollbar-track { background: rgba(0,10,30,0.4); border-radius: 3px; }
.upgrade-list::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.25); border-radius: 3px; }
.upgrade-list::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,0.45); }
.upgrade-list { scrollbar-width: thin; scrollbar-color: rgba(0,200,255,0.25) rgba(0,10,30,0.3); }
.upgrade-head { display: flex; align-items: center; padding: 6px 4px 4px 4px; border-bottom: 1px solid rgba(0,120,200,0.35); margin-bottom: 4px; position: sticky; top: 0; background: var(--c-head-bg); z-index: 3; }
.upgrade-head > div { font-size: 10px; font-weight: bold; color: var(--c-cyan); letter-spacing: 0.5px; }
.upgrade-row { display: flex; align-items: center; padding: 3px 4px; border-bottom: 1px solid rgba(0,60,120,0.15); }
.upgrade-row:hover { background: rgba(0,40,90,0.35); }
.upc-name { flex: 2; min-width: 0; font-size: 10px; color: var(--c-digit-name); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upc-num { flex: 1; font-size: 10px; text-align: center; color: var(--c-upc-text); flex-shrink: 0; }

/* -------- 前缀合并: 主行可展开, 子项缩进挂在下面 -------- */
.upgrade-row-main { position: relative; }
.upgrade-row-main.is-expandable { cursor: pointer; user-select: none; }
.upgrade-row-main.is-expandable:hover { background: rgba(0, 80, 150, 0.4); }
.upgrade-row-main.is-open { background: rgba(0, 60, 130, 0.42); }
.upgrade-row-main.is-expandable:focus-visible {
  outline: 1px solid var(--c-cyan);
  outline-offset: -1px;
}
/* 展开箭头: 收起时朝右, 展开时旋转 90° 朝下 */
.up-toggle {
  display: inline-block;
  width: 9px;
  margin-right: 2px;
  font-size: 8px;
  line-height: 1;
  color: var(--c-cyan);
  text-align: center;
  transition: transform 0.18s ease;
}
.up-toggle::before { content: '\25B6'; }
.upgrade-row-main.is-open .up-toggle { transform: rotate(90deg); }
.upc-label { vertical-align: middle; }
/* 组内条数角标 */
.up-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 8px;
  line-height: 11px;
  color: var(--c-cyan);
  background: rgba(0, 200, 255, 0.12);
  border: 1px solid rgba(0, 200, 255, 0.3);
  vertical-align: middle;
}
/* 子项容器: 左侧竖线表示层级 */
.upgrade-children {
  margin-left: 5px;
  padding-left: 2px;
  border-left: 1px solid rgba(0, 200, 255, 0.28);
}
.upgrade-row-child { background: rgba(0, 20, 45, 0.35); }
.upgrade-row-child:hover { background: rgba(0, 60, 120, 0.45); }
.upc-child { color: var(--c-upc-text); padding-left: 8px; position: relative; }
.upc-child::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  width: 4px;
  height: 1px;
  background: rgba(0, 200, 255, 0.5);
}

/* ===== 动画 ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel { animation: fadeInUp 0.6s ease both; }
.col-left .panel:nth-child(1) { animation-delay: 0.1s; }
.col-left .panel:nth-child(2) { animation-delay: 0.2s; }
.col-center .panel:nth-child(1) { animation-delay: 0.15s; }
.col-center .panel:nth-child(2) { animation-delay: 0.25s; }
.col-right .panel:nth-child(1) { animation-delay: 0.1s; }
.col-right .panel:nth-child(2) { animation-delay: 0.2s; }
.col-right .panel:nth-child(3) { animation-delay: 0.3s; }

/* ============================================================
 * 遗留样式 (静态版 HTML 遗留, PHP 版当前未使用)
 * 保留原因: 与静态版 施必得数据大屏.html 共用同一份 CSS, 删除会导致该文件缺样式
 * ============================================================ */
.metric-cards { display: flex; flex-direction: column; gap: 6px; }
.metric-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(0,16,50,0.5);
  border: 1px solid rgba(0,80,180,0.2); border-radius: var(--radius-card);
  transition: all 0.3s;
}
.metric-card:hover { border-color: rgba(0,180,255,0.5); background: rgba(0,30,80,0.5); }
.metric-icon { width: 36px; height: 36px; border-radius: var(--radius-panel); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.metric-info { flex: 1; }
.metric-label { font-size: 10px; color: var(--c-metric-label); margin-bottom: 2px; }
.metric-val { font-size: 19px; font-weight: bold; line-height: 1.1; }
.metric-detail { font-size: 9px; color: var(--c-text-faint); margin-top: 1px; }