/* ==========================================================================
   瑞士国际主义平面设计风（Swiss Style / International Typographic Style）
   —— 宿迁市知识产权工作台 共享视觉系统
   --------------------------------------------------------------------------
   风格来源：路北路陈《震惊瘫坐！Opus 5.5 做的设计科普：为什么瑞士风格 70 年都不过时？》
             BV1hWar6SEVP  →  反推规格书见
             F:\projects\remotion\瑞士风格-风格拆解与建片规格书.md
             F:\projects\remotion\effects\swiss-style\theme.ts

   ★ 翻译说明：规格书是为 1920×1080 视频画的，像素值不能照搬。
     搬过来的是「设计语言」，不是「像素」：
       搬 → 色板 / 层级比例 / 左对齐右不齐 / 刻意不对称留白 / 红色只点一下 / 无渐变无投影无圆角
       不搬 → 巨号 840px、120px 版心边距、1px 报头线（那是 1920 画布的量）

   ★ 红色纪律：
       红 = 强调 / 标注，不是语义色、更不是告警色。
       告警（异常、超标、风险）改用：墨黑加粗描边 + 斜纹填充 + ▮ 形标记 + 文字标签。
       同一屏红元素 ≤ 3 处。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 色板
     全部取自 remotion theme.ts（从参考片真实帧量出来的），不是目测估计。 */
  --sw-ink:        #111111;   /* 墨色：主文字 / 深底 */
  --sw-ink-2:      #2B2A26;   /* 深底上的次级文字 */
  --sw-paper:      #F1ECE5;   /* 纸底（页面最外层）：米白微暖 */
  --sw-paper-2:    #FFFFFF;   /* 卡片：纯白，浮在纸底上 */
  --sw-warm:       #DBD7CD;   /* 暖灰：次级块 / 表头 / 标签底 */
  --sw-cream:      #F2EFE6;   /* 深底上的字：米白 */
  --sw-line:       #D9D4C9;   /* 1px 描边（纸上的线） */
  --sw-line-2:     #BFB8AA;   /* 强调描边 / 分割线 */
  --sw-text-2:     #4A4741;   /* 正文 */
  --sw-text-3:     #6E6C66;   /* 小字（比 remotion 的 mute 深一档，20px 以下必须用这档） */
  --sw-red:        #DA291C;   /* ★ 全站唯一强调色，只点一下 */
  --sw-red-deep:   #A81D13;   /* 红字在纸底上的深一档，保证对比度 */
  --sw-red-tint:   #FAF1EF;   /* 极浅红底：仅用于标注行底，不做大面积铺色 */

  /* ------------------------------------------------------- 字体
     本机无 Inter / Helvetica，用 Arial 代替（Windows 自带，同源无衬线）。
     中文主字体用 Noto Sans SC（本机已装）—— 比微软雅黑中性得多，更接近
     Helvetica 的气质；未安装时自动回落雅黑，不影响可用性。 */
  --sw-font:      "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --sw-font-num:  "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif;
  --sw-font-mono: Consolas, "JetBrains Mono", "Courier New", monospace;

  /* ------------------------------------------------------- 字号阶梯
     瑞士风的灵魂是「字号极端对比」。视频里是 840px vs 20px（40 倍），
     网页做不到那么夸张（会挤爆版面），这里做 ~4 倍：44 vs 11。
     关键仍然是：标题用重字重、说明文字一律退到极小号。 */
  --sw-t-display:  44px;   /* 巨号数字（KPI 主值） */
  --sw-t-h1:       28px;   /* 页面主标题 */
  --sw-t-h2:       19px;   /* 区块标题 */
  --sw-t-h3:       16px;   /* 小节标题 */
  --sw-t-body:     14px;   /* 正文 */
  --sw-t-meta:     12px;   /* 元数据 */
  --sw-t-micro:    11px;   /* 极小号说明（瑞士顶栏那一行就是它） */
  --sw-lead-h1:    0.90em;  /* 主标题行距：比字号还小，三行要「顶死」 */

  /* ------------------------------------------------------- 网格与间距 */
  --sw-pad-x:      32px;   /* 版心左右留白 */
  --sw-gap:        16px;   /* 区块间距 */
  --sw-gap-lg:     28px;   /* 大留白：结构性留白，不用于表格内部 */
  --sw-rule:       1px solid var(--sw-line);
  --sw-rule-strong:1px solid var(--sw-line-2);

  /* ==========================================================================
     Element Plus 变量级重塑
     —— 决策：走变量重塑 + 覆盖层，不逐个组件换皮（保持 83 处组件与全部交互不变）
     ★ 主按钮用**墨黑**而不是红：瑞士海报上的按钮是黑色方块；
       红色留给「标注 / 强调 / 选中指示」，一屏 ≤3 处。
     ========================================================================== */
  --el-color-primary:            #111111;
  --el-color-primary-light-3:    #333333;
  --el-color-primary-light-5:    #555555;
  --el-color-primary-light-7:    #888888;
  --el-color-primary-light-8:    #AAAAAA;
  --el-color-primary-light-9:    #E8E5DE;
  --el-color-primary-dark-2:     #000000;
  --el-color-success:            #3F6B4E;
  --el-color-warning:            #8A6A20;
  --el-color-danger:             #111111;
  --el-color-error:              #111111;
  --el-color-info:               #6E6C66;

  --el-text-color-primary:       #111111;
  --el-text-color-regular:       #4A4741;
  --el-text-color-secondary:     #6E6C66;
  --el-text-color-placeholder:   #9C9A92;
  --el-text-color-disabled:      #BFB8AA;

  --el-border-color:             #D9D4C9;
  --el-border-color-light:       #E4E0D6;
  --el-border-color-lighter:     #EAE7DE;
  --el-border-color-extra-light: #F0EDE5;
  --el-border-color-hover:       #BFB8AA;

  --el-fill-color-blank:         #FFFFFF;
  --el-fill-color-light:         #F6F3EC;
  --el-fill-color-lighter:       #F1ECE5;
  --el-bg-color:                 #F1ECE5;
  --el-bg-color-page:            #F1ECE5;
  --el-bg-color-overlay:         #FFFFFF;

  --el-border-radius-base:       0px;
  --el-border-radius-small:      0px;
  --el-component-size:           32px;
  --el-component-size-small:     24px;
  --el-component-size-large:     38px;

  --el-box-shadow:               none;
  --el-box-shadow-light:         none;
  --el-box-shadow-lighter:       none;
  --el-box-shadow-dark:          none;

  --el-font-family:              var(--sw-font);
  --el-font-size-base:           14px;
  --el-transition-duration:       0.12s;

  --el-table-header-bg-color:    #DBD7CD;
  --el-table-border-color:       #D9D4C9;
  --el-table-row-hover-bg-color: #F6F3EC;
  --el-table-current-row-bg-color:#F1ECE5;
  --el-table-text-color:         #2B2A26;
  --el-table-header-text-color:  #111111;

  --el-menu-active-color:        #111111;
  --el-menu-hover-bg-color:      #F1ECE5;
  --el-menu-item-hover-color:    #111111;
}

/* ==========================================================================
   Element Plus 覆盖层
   —— 变量改不到的：默认圆角、默认投影、默认聚焦光晕
   ========================================================================== */

/* 按钮：墨黑方块，无圆角，无投影，hover 只做反色不做位移 */
.el-button {
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.el-button--primary {
  background-color: var(--sw-ink) !important;
  border-color: var(--sw-ink) !important;
  color: var(--sw-cream) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--sw-ink-2) !important;
  border-color: var(--sw-ink-2) !important;
}
.el-button--default {
  background-color: transparent !important;
  border-color: var(--sw-line-2) !important;
  color: var(--sw-ink) !important;
}
.el-button--default:hover,
.el-button--default:focus {
  border-color: var(--sw-ink) !important;
  background-color: transparent !important;
}
.el-button--text,
.el-button.is-link {
  color: var(--sw-ink) !important;
  font-weight: 500;
}
.el-button--text:hover { color: var(--sw-red-deep) !important; }
.el-button [class*="el-icon"] + span { letter-spacing: 0.04em; }

/* 输入框 / 选择器：1px 描边，无圆角，无内阴影 */
.el-input__wrapper,
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px var(--sw-line) inset !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.12s;
}
.el-input__wrapper:hover,
.el-textarea__inner:hover { box-shadow: 0 0 0 1px var(--sw-line-2) inset !important; }
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  box-shadow: 0 0 0 2px var(--sw-ink) inset !important;
}
.el-input__inner:focus { box-shadow: 0 0 0 1px var(--sw-ink) inset !important; }
.el-input__inner::placeholder,
.el-textarea__inner::placeholder { color: #9C9A92; }
.el-select-dropdown__item.selected { color: var(--sw-ink) !important; font-weight: 700; }
.el-select-dropdown__item.is-hovering { background-color: var(--sw-warm) !important; }
.el-popper.is-light .el-popper__arrow::before { border-color: var(--sw-line) !important; }

/* 标签：暖灰底 + 墨字，不用彩色底 */
.el-tag {
  border-radius: 0 !important;
  border-color: var(--sw-line) !important;
  background-color: var(--sw-warm) !important;
  color: var(--sw-ink) !important;
  font-weight: 400;
}
.el-tag--dark, .el-tag--primary {
  background-color: var(--sw-ink) !important;
  border-color: var(--sw-ink) !important;
  color: var(--sw-cream) !important;
}
.el-tag--success, .el-tag--warning, .el-tag--danger, .el-tag--info {
  background-color: var(--sw-warm) !important;
  border-color: var(--sw-line) !important;
  color: var(--sw-ink) !important;
}

/* 表格：表头暖灰、细线、无斑马纹 */
.el-table { font-size: var(--sw-t-body); }
.el-table th.el-table__cell {
  background-color: var(--sw-warm) !important;
  font-weight: 700;
  color: var(--sw-ink) !important;
  border-bottom: 1px solid var(--sw-line-2) !important;
}
.el-table td.el-table__cell { border-bottom: 1px solid var(--sw-line) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background-color: var(--sw-paper) !important; }
.el-table__inner-wrapper::before { background-color: var(--sw-line) !important; }

/* 对话框 / 消息框：1px 描边，无投影，无圆角 */
.el-dialog,
.el-message-box {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--sw-ink) !important;
  background: var(--sw-paper-2) !important;
}
.el-dialog__title,
.el-message-box__title { font-weight: 700; letter-spacing: 0.02em; }
.el-dialog__headerbtn .el-dialog__close { color: var(--sw-text-3); }
.el-message-box__headerbtn .el-dialog__close { color: var(--sw-text-3); }

/* 开关 / 复选 / 单选：方块 */
.el-checkbox__inner,
.el-radio__inner,
.el-switch__core { border-radius: 0 !important; }
.el-checkbox__inner.is-checked,
.el-radio__inner.is-checked { background-color: var(--sw-ink); border-color: var(--sw-ink); }
.el-switch.is-checked .el-switch__core { background-color: var(--sw-ink); border-color: var(--sw-ink); }
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--sw-ink); }

/* 分页 / 空状态 / 加载 */
.el-pagination { font-weight: 400; }
.el-pager li { border-radius: 0 !important; }
.el-pager li.is-active { background-color: var(--sw-ink); color: var(--sw-cream); }
.el-empty__description p { color: var(--sw-text-3); }

/* ==========================================================================
   通用瑞士构件
   ========================================================================== */

/* 报头：1px 细线上方是机构名，下方是等距元数据 */
.sw-masthead {
  border-bottom: var(--sw-rule);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.sw-masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.sw-masthead-title {
  font-size: var(--sw-t-h1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sw-ink);
  line-height: 1.1;
}
.sw-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: var(--sw-rule);
  font-family: var(--sw-font-mono);
  font-size: var(--sw-t-micro);
  color: var(--sw-text-3);
  letter-spacing: 0.04em;
}
.sw-meta-row span { white-space: nowrap; }

/* 区块标题：左侧编号（红）+ 标题，右侧一条细线延伸到版面右边缘 */
.sw-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sw-section-head .sw-num {
  font-family: var(--sw-font-mono);
  font-size: var(--sw-t-meta);
  color: var(--sw-red);
  font-weight: 700;
}
.sw-section-head .sw-title {
  font-size: var(--sw-t-h2);
  font-weight: 700;
  color: var(--sw-ink);
  letter-spacing: 0.02em;
}
.sw-section-head .sw-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--sw-line-2);
}

/* 巨号数字 */
.sw-num-display {
  font-family: var(--sw-font-num);
  font-size: var(--sw-t-display);
  font-weight: 700;
  line-height: 1.05;
  color: var(--sw-ink);
  letter-spacing: -0.01em;
}

/* 告警信号（替代红色）：墨黑加粗 + 斜纹 + ▮ 标记 + 文字标签 */
.sw-alert-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(17, 17, 17, 0.10) 0 2px,
    rgba(17, 17, 17, 0) 2px 8px
  );
}
.sw-alert-mark {
  display: inline-block;
  font-family: var(--sw-font-mono);
  font-size: var(--sw-t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sw-ink);
  border: 1px solid var(--sw-ink);
  padding: 0 5px;
  line-height: 1.6;
}
.sw-alert-bar {
  width: 3px;
  background: var(--sw-ink);
  flex: 0 0 3px;
}

/* 细线分隔 */
.sw-hr { height: 1px; background: var(--sw-line); border: 0; margin: 0; }