/**
 * style.css — 公共补充样式
 *
 * 1. 字号三档 CSS 变量（小 / 中 / 大）
 *    通过 html[data-font-size="small|medium|large"] 切换
 *
 * 2. 字号切换器按钮组样式（.fsz-switcher / .fsz-btn）
 */

/* ────────────────────────────────────────────────────────
   字号 CSS 变量定义
   --fs-tiny  : 极小字（段落标签、说明角标）
   --fs-small : 小字（徽标、提示、pill）
   --fs-ui    : 界面字（form label、辅助文本）
   --fs-base  : 基础正文（导航 tab、按钮、表格单元格）
   --fs-body  : 主体字（body 基准、侧边栏菜单项）
   --fs-title : 页面大标题
──────────────────────────────────────────────────────── */

/* 标准档（small 按钮）—— 紧凑阅读 */
:root,
html[data-font-size="small"] {
  --fs-tiny:  12px;
  --fs-small: 13px;
  --fs-ui:    14px;
  --fs-base:  14px;
  --fs-body:  15px;
  --fs-title: 22px;
}

/* 大档（medium 按钮）—— 舒适阅读 */
html[data-font-size="medium"] {
  --fs-tiny:  13px;
  --fs-small: 14px;
  --fs-ui:    15px;
  --fs-base:  16px;
  --fs-body:  17px;
  --fs-title: 24px;
}

/* 超大档（large 按钮）—— 大字阅读 */
html[data-font-size="large"] {
  --fs-tiny:  15px;
  --fs-small: 17px;
  --fs-ui:    18px;
  --fs-base:  20px;
  --fs-body:  22px;
  --fs-title: 28px;
}

/* 侧边栏导航项字号 */
html[data-font-size="small"]  .sidebar-nav-item { font-size: var(--jq-fs-small); }
html[data-font-size="medium"] .sidebar-nav-item { font-size: 14px; }
html[data-font-size="large"]  .sidebar-nav-item { font-size: 16px; }

/* 顶部导航 tab 字号 */
html[data-font-size="small"]  .topnav-tab { font-size: 12px; }
html[data-font-size="medium"] .topnav-tab { font-size: var(--jq-fs-small); }
html[data-font-size="large"]  .topnav-tab { font-size: 15px; }


/* ────────────────────────────────────────────────────────
   字号切换器按钮组
   每个按钮：上方字母（大小不同）+ 下方文字标签
   激活态：蓝色边框 + 蓝色文字（无蓝色背景）
──────────────────────────────────────────────────────── */
.fsz-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.fsz-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 36px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #ffffff;
  color: #00000073;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  padding: 4px 2px 3px;
  user-select: none;
}
.fsz-btn:hover {
  border-color: #1677ff;
  color: #1677ff;
}
.fsz-btn.active {
  border-color: #1677ff;
  color: #1677ff;
  background: #f0f5ff;
}
.fsz-btn.active:hover {
  background: #e6f0ff;
}

/* 字母：三档大小不同，形成视觉区分 */
.fsz-letter {
  font-weight: 700;
  line-height: 1;
}
.fsz-btn[data-size="small"]  .fsz-letter { font-size: var(--jq-fs-small); }
.fsz-btn[data-size="medium"] .fsz-letter { font-size: 14px; }
.fsz-btn[data-size="large"]  .fsz-letter { font-size: 17px; }

/* 文字标签（标准 / 大 / 超大） */
.fsz-label {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
}

/* ────────────────────────────────────────────────────────
   全局字号覆盖 —— 让主内容区文字跟随字号切换
   只影响 font-size，不影响 width/height/padding 等布局属性
   canvas（ECharts）不受影响（canvas内部字号由JS控制）
──────────────────────────────────────────────────────── */

/* 主内容区正文、表格、列表 */
.main p, .main span, .main div, .main li,
.main td, .main th, .main label,
.main strong, .main a, .main summary {
  font-size: var(--fs-base) !important;
}

/* 标题 */
.main h1, .main h2 { font-size: var(--fs-title) !important; }
.main h3            { font-size: calc(var(--fs-title) - 2px) !important; }
.main h4            { font-size: var(--fs-body) !important; }

/* 按钮文字 */
.main button, .main .btn {
  font-size: var(--fs-base) !important;
}

/* 输入框文字 */
.main input, .main select, .main textarea {
  font-size: var(--fs-base) !important;
}

/* 排除项：ECharts canvas 内部字号由 JS 控制，不覆盖 */
.main canvas {
  font-size: unset !important;
}

/* ────────────────────────────────────────────────────────
   打印样式 —— A4 排版适配
   触发方式：window.print() 或 浏览器 Ctrl+P
──────────────────────────────────────────────────────── */
@media print {

  /* 隐藏所有非内容区域 */
  .topnav,
  .sidebar,
  .fsz-switcher,
  .sidebar-nav-item,
  #domainBadge,
  .layout > aside {
    display: none !important;
  }

  /* 主内容区全宽 */
  .layout {
    display: block !important;
  }
  .main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 隐藏所有按钮 */
  button, .btn {
    display: none !important;
  }

  /* 点击交互提示变为普通光标 */
  .sub-process-card [style*="cursor:pointer"] {
    cursor: default !important;
  }

  /* input / select / textarea 打印时显示为纯文字 */
  input, select, textarea {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
  }
  input:disabled {
    opacity: 1 !important;
    color: #000 !important;
  }

  /* 表格边框加深，背景色保留 */
  table {
    border-collapse: collapse !important;
  }
  th, td {
    border: 1px solid var(--jq-text-aux) !important;
    padding: 4px 8px !important;
  }
  th {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 工序分解卡片：左边框颜色保留，避免跨页断裂 */
  .sub-process-card {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 12px !important;
  }

  /* ECharts 图表颜色保留 */
  canvas {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 信息栏背景色保留 */
  [style*="background:#f9fafb"],
  [style*="background:#f0f5ff"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 页面尺寸与边距 */
  @page {
    size: A4;
    margin: 15mm;
  }

  /* 字号统一为打印友好大小 */
  body {
    font-size: 12pt !important;
  }

  /* ECharts canvas 转为 img 后的打印处理 */
  .print-chart-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .print-hidden-canvas {
    display: none !important;
  }
}