/*
 * styles.css
 * 欧盟电池合规披露页样式。
 *
 * 设计目标：尽量还原 欧规网页内容-3.pdf 的版式。
 * - 页面宽度参考 PDF：约 596pt，主体 disclosure 最大 820px。
 * - 字号按 PDF 比例：主标题 20pt、区块标题 15pt、产品标识 18pt、正文 12pt、
 *   表格 7.6pt、注释 10pt。
 * - 颜色：白底、深灰文字、深蓝强调色，与 PDF 一致；无炫彩/霓虹元素。
 * - 图片尺寸与位置按 PDF 矢量图元 bbox 比例还原。
 */

/*
 * Noto Sans 自托管（OFL 开源许可，可免费商用）。
 * 覆盖欧盟 25 种官方语言的字符集：拉丁/西里尔/希腊及扩展。
 * 可变字体文件（font-weight: 100 900 一个文件覆盖所有字重），
 * 按 unicode-range 切片，浏览器只加载当前语言用到的子集。
 * 中文不在子集内，fallback 到系统字体（微软雅黑/苹方）。
 */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/noto-sans-v42-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-text: #231f20;
  --color-field: #898b8e;
  --color-body: #6d6e71;
  --color-note: #939598;
  --color-bullet: #808285;
  --color-text-muted: #6d6e71;
  --color-border: #c4c8cf;
  --color-accent: #1a5c8f;
  --color-accent-dark: #12456e;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* ===== 展示模式：A4 纸张风格 ===== */
#display-mode {
  padding: 24px 16px 48px;
}

#disclosure {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 36px 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 页头：只有语言选择器，靠右对齐 */
.page-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.logo-left {
  height: 44px;
  width: auto;
}

#lang-select {
  padding: 4px 8px;
  font-size: 14px;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* 富文本只在披露正文内建立排版基线，避免影响语言选择器和错误页。
   font-family 显式声明：预览区（admin.html 内 admin.css 后加载会覆盖 body 继承）
   与公开页、编辑器 iframe 三处字体必须强制一致 */
.rich-disclosure-content {
  color: var(--color-body);
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.rich-disclosure-content h1 {
  margin: 12px 0 22px;
  color: var(--color-text);
  font-size: 25px;
  line-height: 1.3;
  text-align: center;
}

.rich-disclosure-content h2 {
  margin: 24px 0 10px;
  padding-bottom: 6px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.35;
  border-bottom: 1px solid #d8dde3;
}

.rich-disclosure-content h3,
.rich-disclosure-content h4 {
  margin: 18px 0 8px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.4;
}

.rich-disclosure-content p {
  margin: 0 0 10px;
}

.rich-disclosure-content ul,
.rich-disclosure-content ol {
  margin: 8px 0 14px;
  padding-left: 24px;
}

.rich-disclosure-content img[data-mce-selected="1"] {
  outline: 2px solid #1a5c8f;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(26, 92, 143, 0.12);
  cursor: grab;
}

.rich-disclosure-content img[data-mce-selected="1"]:active {
  cursor: grabbing;
}

.rich-disclosure-content figure.image:has(img[data-mce-selected="1"]) {
  outline: 1px dashed rgba(26, 92, 143, 0.7);
  outline-offset: 6px;
  border-radius: 3px;
}

/* 图片文字环绕：后台 image_class_list 提供，class 受控 */
.rich-disclosure-content img.img-float-left {
  float: left;
  margin: 4px 16px 12px 0;
}

.rich-disclosure-content img.img-float-right {
  float: right;
  margin: 4px 0 12px 16px;
}

/* 带图注/档位的图片（figure 形态）同样支持环绕，与档位宽度正交 */
.rich-disclosure-content figure.image.img-float-left {
  float: left;
  margin: 4px 16px 12px 0;
}

.rich-disclosure-content figure.image.img-float-right {
  float: right;
  margin: 4px 0 12px 16px;
}

.rich-disclosure-content figure.image {
  margin: 12px auto;
  text-align: center;
}

.rich-disclosure-content figure.image.image-style-align-left {
  margin-left: 0;
  text-align: left;
}

.rich-disclosure-content figure.image.image-style-align-right {
  margin-right: 0;
  text-align: right;
}

.rich-disclosure-content figure.image figcaption {
  margin-top: 4px;
  color: #8a93a0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.rich-disclosure-content figure.image.img-float-left figcaption,
.rich-disclosure-content figure.image.img-float-right figcaption {
  text-align: left;
}

/* 图片尺寸使用语义类保存，编辑器、后台预览和公开页共用同一套规则。
   百分比档位覆盖 20%-100%，精确控制图片在页面中的占比。 */
.rich-disclosure-content figure.image.image-size-20,
.rich-disclosure-content figure.image.image-size-30,
.rich-disclosure-content figure.image.image-size-40,
.rich-disclosure-content figure.image.image-size-50,
.rich-disclosure-content figure.image.image-size-60,
.rich-disclosure-content figure.image.image-size-70,
.rich-disclosure-content figure.image.image-size-80,
.rich-disclosure-content figure.image.image-size-90,
.rich-disclosure-content figure.image.image-size-100 { width: var(--img-w); }
.rich-disclosure-content figure.image.image-size-20 { --img-w: 20%; }
.rich-disclosure-content figure.image.image-size-30 { --img-w: 30%; }
.rich-disclosure-content figure.image.image-size-40 { --img-w: 40%; }
.rich-disclosure-content figure.image.image-size-50 { --img-w: 50%; }
.rich-disclosure-content figure.image.image-size-60 { --img-w: 60%; }
.rich-disclosure-content figure.image.image-size-70 { --img-w: 70%; }
.rich-disclosure-content figure.image.image-size-80 { --img-w: 80%; }
.rich-disclosure-content figure.image.image-size-90 { --img-w: 90%; }
.rich-disclosure-content figure.image.image-size-100 { --img-w: 100%; }
.rich-disclosure-content figure.image[class*="image-size-"] img {
  width: 100%;
  height: auto;
}

.rich-disclosure-content table {
  width: 100%;
  margin: 12px 0 18px;
  border-collapse: collapse;
}

.rich-disclosure-content th,
.rich-disclosure-content td {
  padding: 7px 8px;
  border: 1px solid #cfd5dc;
  vertical-align: top;
}

.rich-disclosure-content th {
  background: #f1f3f5;
  font-weight: 600;
}

.rich-disclosure-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-disclosure-content hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* 默认模板依赖这些语义类；样式缺失时图片、键值对和表格会全部退化。 */
.rich-disclosure-content .doc-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.rich-disclosure-content .doc-header img {
  max-width: 180px;
  margin: 0;
}

.rich-disclosure-content .doc-title {
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: 26.7px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.rich-disclosure-content section {
  display: flow-root;
  margin-bottom: 18px;
}

.rich-disclosure-content .identity-row:has(.img-float-left),
.rich-disclosure-content .identity-row:has(.img-float-right),
.rich-disclosure-content .battery-info-row:has(.img-float-left),
.rich-disclosure-content .battery-info-row:has(.img-float-right),
.rich-disclosure-content .materials-row:has(.img-float-left),
.rich-disclosure-content .materials-row:has(.img-float-right),
.rich-disclosure-content .recycle-symbol-row:has(.img-float-left),
.rich-disclosure-content .recycle-symbol-row:has(.img-float-right) {
  display: block;
}

.rich-disclosure-content .identity-row,
.rich-disclosure-content .battery-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.rich-disclosure-content .identity-row .info-grid,
.rich-disclosure-content .battery-info-row .info-grid {
  flex: 1 1 0;
  min-width: 0;
}

.rich-disclosure-content .identity-row:has(.img-float-left) > .info-grid,
.rich-disclosure-content .identity-row:has(.img-float-right) > .info-grid,
.rich-disclosure-content .battery-info-row:has(.img-float-left) > .info-grid,
.rich-disclosure-content .battery-info-row:has(.img-float-right) > .info-grid,
.rich-disclosure-content .materials-row:has(.img-float-left) > .info-grid,
.rich-disclosure-content .materials-row:has(.img-float-right) > .info-grid {
  display: block;
}

.rich-disclosure-content .info-item {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  color: var(--color-field);
  font-size: 16px;
}

.rich-disclosure-content .info-item dt {
  flex: 0 0 auto;
}

.rich-disclosure-content .info-item dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.rich-disclosure-content .product-identity .info-item {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 600;
}

.rich-disclosure-content .product-photo,
.rich-disclosure-content .battery-symbol,
.rich-disclosure-content .fire-img,
.rich-disclosure-content .materials-img,
.rich-disclosure-content .recycle-symbol {
  width: auto;
  height: 80px;
  flex-shrink: 0;
  object-fit: contain;
}

.rich-disclosure-content .fire-img {
  margin: 14px auto 10px;
}

.rich-disclosure-content .materials-row,
.rich-disclosure-content .recycle-symbol-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rich-disclosure-content .materials-row:has(.img-float-left),
.rich-disclosure-content .materials-row:has(.img-float-right),
.rich-disclosure-content .recycle-symbol-row:has(.img-float-left),
.rich-disclosure-content .recycle-symbol-row:has(.img-float-right) {
  display: block;
}

.rich-disclosure-content .materials-grid {
  flex: 0 0 auto;
  min-width: 0;
}

.rich-disclosure-content .materials-img {
  flex: 1 1 auto;
}

.rich-disclosure-content .recycle-symbol-row {
  justify-content: center;
  margin-bottom: 14px;
}

.rich-disclosure-content .section-note,
.rich-disclosure-content .symbol-note {
  color: var(--color-note);
  font-weight: 400;
}

.rich-disclosure-content .section-note {
  font-size: 13.3px;
}

.rich-disclosure-content .symbol-note,
.rich-disclosure-content .safety-text,
.rich-disclosure-content .legend {
  font-size: 16px;
}

.rich-disclosure-content .symbol-note {
  margin: 0;
  white-space: pre-line;
}

.rich-disclosure-content .recycle-list {
  margin: 0;
  padding-left: 18px;
}

.rich-disclosure-content .recycle-list li {
  margin-bottom: 5px;
  color: var(--color-bullet);
  font-size: 13.3px;
}

.rich-disclosure-content .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rich-disclosure-content .substances-table {
  min-width: 680px;
}

.rich-disclosure-content .substances-table th,
.rich-disclosure-content .substances-table td {
  padding: 5px 6px;
  color: #010202;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
}

.rich-disclosure-content .substances-table th:first-child,
.rich-disclosure-content .substances-table td:first-child {
  position: sticky;
  left: 0;
  min-width: 90px;
  background: var(--color-surface);
  font-weight: 500;
  text-align: left;
}

.rich-disclosure-content .substances-table th:first-child {
  background: #eef0f2;
}

/* 标记列（首列之外）统一 16px：○/× 复制到任意标记单元格大小一致，
   不再依赖单元格带 mark class（复制纯文本不会携带 class） */
.rich-disclosure-content .substances-table td:not(:first-child) {
  font-size: 16px;
}

/* 兼容历史数据中显式标注的 mark class（效果与上条一致） */
.rich-disclosure-content .substances-table td.mark {
  font-size: 16px;
}

/* ===== 表格 =====
 * 限定在披露内容作用域内：后台管理页也引用本样式表（预览区），
 * 全局 table 规则会误伤后台列表表格 */
.rich-disclosure-content table {
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
}

/* ===== 错误模式 ===== */
#error-mode {
  display: flex;
  justify-content: center;
  padding: 80px 16px;
}

.error-card {
  max-width: 460px;
  text-align: center;
}

.error-card h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-dark);
}

.error-card p {
  color: var(--color-text-muted);
  margin: 12px 0 24px;
}

/* ===== 响应式 =====
 * 移动端策略：布局与桌面端完全一致，只等比缩小字号/图片/间距。
 * 不改变排列方向，图片宽度用 clamp 保证窄屏不挤爆。
 */
@media (max-width: 720px) {
  /* 纸张铺满全屏：去掉外边距、边框与阴影 */
  #display-mode {
    padding: 0;
  }

  #disclosure {
    border: none;
    box-shadow: none;
    padding: 16px 12px 24px;
  }

}

/* ===== 配置模式 ===== */
#config-mode {
  padding: 24px 16px 48px;
}

.config-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 36px 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.back-link {
  font-size: 14px;
  color: var(--color-accent);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.config-title {
  margin: 6px 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.config-intro {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-body);
}

.config-intro strong {
  color: var(--color-text);
}

/* 区块卡片 */
.config-section {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fbfbfc;
}

.config-section h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

/* 字段 */
.field {
  margin-bottom: 12px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.field input[type="text"],
.field select {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.field input[type="text"]:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(26, 92, 143, 0.12);
}

.field textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: Consolas, Menlo, monospace;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
}

.hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-note);
}

.required {
  color: #c0392b;
}

.tag-localized,
.tag-fixed {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  vertical-align: 1px;
}

.tag-localized {
  color: #1a5c8f;
  background: #e7f0f8;
}

.tag-fixed {
  color: #7a5c00;
  background: #f8f1e0;
}

/* 多语言输入行：主输入框 + 展开按钮 */
.i18n-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.i18n-input-row input,
.i18n-input-row textarea {
  flex: 1 1 auto;
}

.i18n-toggle {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.i18n-toggle:hover {
  border-color: var(--color-accent);
}

/* 多语言折叠面板 */
.i18n-box {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  max-height: 320px;
  overflow-y: auto;
}

.i18n-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.i18n-row:last-child {
  margin-bottom: 0;
}

.i18n-row-label {
  flex: 0 0 170px;
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.i18n-row input,
.i18n-row textarea {
  flex: 1 1 auto;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
}

.i18n-row input:focus,
.i18n-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* 双列网格（电池基本信息、材料占比） */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* 有害物质勾选表：复用展示表样式，勾选框居中 */
.config-marks-table {
  min-width: 0;
}

.config-marks-table th,
.config-marks-table td {
  padding: 5px 4px;
  font-size: 11px;
}

.config-marks-table td.mark-check {
  text-align: center;
}

.config-marks-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* 操作区按钮 */
.config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.config-actions .btn-primary,
.config-actions .btn-secondary,
.config-actions .btn-danger {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-secondary {
  color: var(--color-accent);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
}

.btn-danger {
  color: #c0392b;
  background: var(--color-surface);
  border-color: #e0c3c0;
}

.btn-danger:hover {
  border-color: #c0392b;
}

/* 页脚说明 */
.config-footer {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-note);
}

.config-footer p {
  margin: 0;
}

/* 错误页入口链接 */
.error-actions a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.error-actions a:hover {
  text-decoration: underline;
}

/* 配置页响应式 */
@media (max-width: 720px) {
  #config-mode {
    padding: 0;
  }

  .config-page {
    border: none;
    box-shadow: none;
    padding: 16px 12px 28px;
  }

  .config-section {
    padding: 12px 14px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .i18n-row-label {
    flex-basis: 120px;
  }

  .config-marks-table {
    font-size: 9px;
  }

  .config-marks-table th,
  .config-marks-table td {
    padding: 3px 2px;
    font-size: 9px;
  }
}