/* ============================================================
 * 中钰招标 · V3-INT-002 全站视觉标准 tokens
 * 版本：v1.0（2026-08-13 冻结）
 * 定位：全站唯一视觉标准源。任何页面禁止硬编码品牌色，
 *       一律引用本文件变量。修改本文件需走评审。
 * 部署：/static/css/tokens.css
 * 用法：<link rel="stylesheet" href="/static/css/tokens.css">
 * ============================================================ */

:root {
  /* ---- 品牌主色（与官网 V3-INT-002 完全一致，禁改） ---- */
  --red:        #C8161D;   /* 品牌红：重点标签、栏目标签、强调 */
  --red-dark:   #9E0F15;
  --red-deep:   #7C0B10;
  --blue:       #1A5284;   /* 品牌蓝：主导航、主按钮、链接强调 */
  --blue-dark:  #123A75;
  --navy:       #14264C;   /* 深蓝：页脚、工作台顶栏、大屏标题 */
  --gold:       #C9A063;   /* 品牌金：点缀、分割线、悬停高光 */
  --gold-light: #E3C893;

  /* ---- 兼容别名（供存量页面变量名直接引用，禁新增使用） ---- */
  --cyan:        #1A5284;   /* = --blue，command-center 等页面别名 */
  --cyan-light:  #7B9CC4;   /* 浅蓝，= --chart-6 */
  --purple:      #14264C;   /* = --navy，command-center 图标色别名 */

  /* ---- 衍生色 ---- */
  --blue-light:  #2E75B6;   /* 品牌浅蓝：hover 态、渐变亮端 */
  --bg-blue:     rgba(26,82,132,.08);  /* 品牌蓝浅底：选中行、浅底卡片 */

  /* ---- 中性色 ---- */
  --bg:   #F4F5F7;         /* 页面底色 */
  --line: #DDDDDD;         /* 边线 */
  --txt:  #2B2B2B;         /* 正文 */
  --txt2: #666666;         /* 次要文字 */
  --txt3: #999999;         /* 辅助/占位文字 */

  /* ---- 字体 ---- */
  --serif: "Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;   /* 标题宋体 */
  --sans:  "Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;      /* 正文黑体 */
  --font-display: var(--serif);  /* V3-INT-002 标题字别名 */

  /* ---- 语义色（功能反馈，与品牌色解耦） ---- */
  --success: #2E7D32;      /* 通过/已完成/已支付 */
  --warning: #ED8936;      /* 待审/待处理/注意 */
  --danger:  #C8161D;      /* 驳回/废标/删除（复用品牌红） */
  --info:    #1A5284;      /* 提示/信息（复用品牌蓝） */

  /* ---- 图表色板（ECharts/Chart.js 等 JS 场景使用） ----
     注意：canvas 图表不解析 CSS 变量，JS 中请引入
     /static/js/chart-theme.js 导出的同名色值常量。 */
  --chart-1: #1A5284;      /* 品牌蓝 */
  --chart-2: #C8161D;      /* 品牌红 */
  --chart-3: #C9A063;      /* 品牌金 */
  --chart-4: #14264C;      /* 深蓝 */
  --chart-5: #2E7D32;      /* 语义绿 */
  --chart-6: #7B9CC4;      /* 浅蓝（辅助系列） */

  /* ---- 圆角与阴影 ---- */
  --radius:    6px;
  --shadow:    0 1px 4px rgba(20,38,76,.06);
  --shadow-lg: 0 4px 16px rgba(20,38,76,.12);

  /* ---- 工作台骨架 ---- */
  --topbar-bg: linear-gradient(90deg, var(--navy), var(--blue-dark));  /* 工作台顶栏 */
  --topbar-h:  52px;                                                   /* 顶栏高度 */
}

/* ---- 工作台顶栏通用类（可选引用，不强制） ---- */
.zy-topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-family: var(--sans);
}
.zy-topbar .zy-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
}
.zy-topbar .zy-brand img { height: 32px; width: auto; }
.zy-topbar .zy-brand small {
  font-size: 11px;
  font-weight: normal;
  color: rgba(255,255,255,.55);
  letter-spacing: 1px;
}
.zy-topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.zy-topbar a:hover { color: var(--gold-light); }

/* ============================================================
   工作台顶栏统一骨架 · V3-INT-002（追加到 tokens.css 末尾，v1.1）
   依赖变量：--topbar-bg / --topbar-h / --gold / --gold-light / --sans / --red
   v1.1：用户信息改双行结构、预留中间插槽、补 ARIA
   ============================================================ */

/* 骨架本体强化：吸顶 + 金色底线（呼应官网主导航，2px 更收敛） */
.zy-topbar {
  box-sizing: content-box;   /* border 计入外高，保证 52+2=54px 补偿稳定（防全局 border-box reset） */
  position: sticky;          /* 不用 fixed：零全局副作用，不要求 body 加 padding */
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(20,38,76,.35);
  flex: none;                /* 在 flex 布局页中不被压缩 */
}

/* 中间插槽（预留：面包屑/全局搜索，当前为空不渲染） */
.zy-topbar .zy-center { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }

/* 左侧：Logo + 系统名 */
.zy-topbar .zy-brand img { height: 32px; width: auto; }
.zy-topbar .zy-brand .zy-divider {
  width: 1px; height: 22px;
  background: rgba(255,255,255,.25);
  margin: 0 4px;
}
.zy-topbar .zy-brand .zy-app {
  font-size: 17px; font-weight: bold; letter-spacing: 2px; color: #fff;
}
.zy-topbar .zy-brand .zy-app small {
  display: block; font-size: 10px; font-weight: normal;
  letter-spacing: 1px; color: rgba(255,255,255,.5); margin-top: 1px;
}

/* 右侧：用户信息（双行） + 退出 */
.zy-topbar .zy-side { display: flex; align-items: center; gap: 16px; }
.zy-topbar .zy-user { display: flex; align-items: center; gap: 8px; }
.zy-topbar .zy-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold; flex: none;
}
.zy-topbar .zy-user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.zy-topbar .zy-uname { font-size: 13px; color: #fff; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zy-topbar .zy-urole { font-size: 11px; color: var(--gold-light); }
.zy-topbar .zy-logout {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9); font-size: 12px;
  padding: 5px 13px; border-radius: 6px; cursor: pointer;
  transition: all .2s; font-family: var(--sans);
}
.zy-topbar .zy-logout:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* 窄屏：隐藏英文名与角色行，中文系统名保留（用户识别所在工作台的唯一标识） */
@media (max-width: 768px) {
  .zy-topbar .zy-brand .zy-app small,
  .zy-topbar .zy-urole { display: none; }
  .zy-topbar .zy-uname { max-width: 64px; }
  .zy-topbar .zy-brand .zy-app { font-size: 15px; }
}