/* ==========================================================================
   全站表单样式 · 唯一来源
   --------------------------------------------------------------------------
   为什么要单独建一份，而不是继续塞在 factory.css 里：
     服务商端 admin.html、工厂端 factory.html、登录页 login.html 共用 factory.css，
     H5 填报端（form.html / query.html …）用 base.css，login.html 还自己内联了一份
     .fld —— 表单控件的规则散在三处，改一处漏两处，
     结果就是「同一个系统里输入框高矮胖瘦各不相同」。
     这里把「表单控件长什么样」收成一份，所有页面一律在原有骨架之后引用它。

   统一口径（2026-09-21 需求）：
     · 所有单行控件（单行文本 / 电话 / 数字 / 日期 / 密码 / 下拉）统一 40px 高，
       内外边距、圆角、边框样式完全一致；
     · 表单行栅格：左列标签固定宽 + 文字右对齐，右列控件自适应，
       保证同一表单里所有控件的左右边界都是一条线；
     · 只动样式布局，业务逻辑（日期计算 / 试用期联动 / 续期基数）一律不碰。

   引用顺序很重要：本文件必须排在 factory.css / base.css 之后，
   页面自己内联的 <style> 再排在本文件之后（页面级微调仍然优先）。

   浏览器要求：用到了 :has()（Chrome 105+ / Safari 15.4+ / Firefox 121+）。
   万一浏览器不支持，栅格规则整体不生效，标签会退回「控件上方」的老样子 ——
   是降级，不是坏掉。
   ========================================================================== */

:root {
  /* ---- 控件外框 ---- */
  --fld-h: 40px;            /* 单行控件统一高度 */
  --fld-radius: 8px;        /* 统一圆角 */
  --fld-pad-x: 12px;        /* 左右内边距 */
  --fld-pad-y: 10px;        /* 文本域上下内边距 */
  --fld-font: 14px;
  --fld-line: var(--line, #E5E7EB);

  /* ---- 表单行栅格 ---- */
  --fld-lbl: 96px;          /* 第 1 列：标签固定宽 */
  --fld-gap: 10px;          /* 标签列与控件列的间距 */
  --fld-mb: 14px;           /* 两个表单行之间的间距 */
  --fld-lbl-font: 13px;

  /* ---- 颜色兜底：base.css 不一定定义了这几个变量 ---- */
  --fld-ink: var(--ink, #1F2937);
  --fld-ink-2: var(--ink-2, #4B5563);
  --fld-ink-3: var(--ink-3, #9CA3AF);
  --fld-accent: var(--accent, #F97316);
  --fld-dis-bg: #F9FAFB;
}

/* ==========================================================================
   1. 统一外框：单行文本 / 电话 / 数字 / 日期 / 密码 / 下拉
   --------------------------------------------------------------------------
   选择器里同时写了「裸元素」和「.field 前缀」两套：
   裸元素负责全站兜底，.field 前缀把 H5 填报端那侧的优先级顶上去，
   免得被 base.css 里 `.field input[type=text]` 这级别的规则按回去。
   刻意不做的事：不设 appearance、不设 width ——
   checkbox / radio / file / color / range 都靠类型排除法躲开，
   带内联样式的窄栏控件（工具条搜索框等）仍然由页面自己说了算。
   ========================================================================== */
input[type="text"], input[type="tel"], input[type="email"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="month"],
input[type="week"], input[type="time"], input[type="datetime-local"], input[type="password"],
select,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.field select {
  box-sizing: border-box;
  height: var(--fld-h);
  padding: 0 var(--fld-pad-x);
  font-family: inherit;
  font-size: var(--fld-font);
  color: var(--fld-ink);
  background: #fff;
  border: 1px solid var(--fld-line);
  border-radius: var(--fld-radius);
  outline: none;
  vertical-align: middle;
}

/* 多行文本域：只统一边距 / 圆角 / 边框 / 字号，高度按「最少 6 行」打底。
   上限不锁死 —— form-widgets.js 会按内容继续长高（自适应）。
   6 行 = 6 × 行高 + 上下内边距 + 上下边框，改行高或字号这里跟着走。 */
textarea,
.field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(6 * 1.75em + var(--fld-pad-y) * 2 + 2px);
  padding: var(--fld-pad-y) var(--fld-pad-x);
  font-family: inherit;
  font-size: var(--fld-font);
  line-height: 1.75;
  color: var(--fld-ink);
  background: #fff;
  border: 1px solid var(--fld-line);
  border-radius: var(--fld-radius);
  outline: none;
  resize: vertical;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select { width: 100%; }

input:focus, select:focus, textarea:focus,
.fld input:focus, .fld select:focus, .fld textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.cf-row input:focus, .cf-row select:focus, .cf-row textarea:focus {
  border-color: var(--fld-accent);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--fld-dis-bg);
  color: var(--fld-ink-3);
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: #B6BDC8; }

/* 工具条里的搜索框：宽度归页面定，高度/边距/圆角跟全局走 */
.toolbar input[type="text"] { width: 190px; }

/* ==========================================================================
   1.5 日期输入框右侧的小图标（PC 用来切「日历面板 / 滚轮选择器」）
   --------------------------------------------------------------------------
   图标画成 background-image，**刻意不加 padding-right** ——
   「截止日期」那行日期框的左右边界是被几何断言钉死的，
   一旦给它加内边距，列宽就被挤动，formuikit 立刻报红。
   原生那个日历小图标要藏掉，否则会和这里画的图标叠在一起。
   ========================================================================== */
input.dp {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
input.dp::-webkit-calendar-picker-indicator { display: none; }

/* 滚轮模式 → 画「日历」图标（点它切回日历面板） */
input.dp[data-dp-mode="wheel"] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239CA3AF' stroke-width='1.4' stroke-linecap='round'><rect x='2.2' y='3.6' width='11.6' height='9.8' rx='1.6'/><path d='M2.2 6.6h11.6'/><path d='M5.6 2.2v2.6'/><path d='M10.4 2.2v2.6'/></svg>");
}
/* 日历模式 → 画「上下滚动」图标（点它切回滚轮） */
input.dp[data-dp-mode="calendar"] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239CA3AF' stroke-width='1.4' stroke-linecap='round'><path d='M8 2.6v10.8'/><path d='M5.2 5.4 8 2.6l2.8 2.8'/><path d='M5.2 10.6 8 13.4l2.8-2.8'/></svg>");
}
/* 滚轮模式下 input 是 readonly（就是靠它挡掉 Chrome 的原生日历面板），
   但外观必须跟普通输入框一模一样，别给人「不可编辑」的错觉 */
input.dp[readonly] { background-color: #fff; color: var(--fld-ink); }

/* 窄屏 / 触屏：只给滚轮，不画切换图标。
   ⚠️ 一定要把两个带属性选择器的模式规则一起列上：
   input.dp[data-dp-mode="wheel"] 的特异性比光秃秃的 input.dp 高，
   只写 input.dp 的话这条会被上面的模式规则压过去，手机上照样画出图标。 */
@media (max-width: 700px), (pointer: coarse) {
  input.dp,
  input.dp[data-dp-mode="wheel"],
  input.dp[data-dp-mode="calendar"] { background-image: none; }
}

/* ==========================================================================
   2. 表单行栅格：左标签固定宽 + 右对齐，右列控件自适应
   --------------------------------------------------------------------------
   同一个 .fld 里所有非标签子元素都被按到第 2 列（grid-column: 2），
   所以「控件 + 提示语 + 字数统计」会各自占一整行、左右边界始终对齐。
   没有标签的行（如海报底色那一行）不套栅格，保持原来的整行宽度。
   ========================================================================== */
.fld { margin-bottom: var(--fld-mb); }

.fld:has(> label:first-child) {
  display: grid;
  grid-template-columns: var(--fld-lbl) minmax(0, 1fr);
  column-gap: var(--fld-gap);
  align-items: center;
}
.fld:has(> label:first-child) > label:first-child {
  grid-column: 1;
  display: block;
  margin: 0;
  text-align: right;
  font-size: var(--fld-lbl-font);
  line-height: 1.5;
  color: var(--fld-ink-2);
}
.fld:has(> label:first-child) > *:not(label:first-child) {
  grid-column: 2;
  min-width: 0;
}
/* 表单行里的控件一律占满这一列：栅格下靠 stretch，
   堆叠式（登录页）与没标签的行靠 width:100%，两种布局的右边界才能是同一根线 */
.fld > input, .fld > select, .fld > textarea { width: 100%; }
/* 含多行文本域的行：标签顶对齐（跟企业资料三栏网格口径一致） */
.fld:has(> textarea) { align-items: start; }
/* 行内有多段控件的（如「项目截止日期」＝ 分段按钮 + 两行日期控件）：
   标签跟第一段控件对齐，而不是在整块里垂直居中 */
.fld:has(> .seg):has(> .nf-row) > label:first-child {
  align-self: start;
  margin-top: calc((var(--fld-h) - 1.5em) / 2);
}

/* 勾选型表单行（如「试用期 1 个月」）：撑到与输入框同样的行高 */
.fld > .nf-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--fld-h);
  margin: 0;
  font-size: 13.5px;
  color: var(--fld-ink);
  cursor: pointer;
  user-select: none;
}
.fld > .nf-chk > input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }

/* 提示语 / 字数统计
   --------------------------------------------------------------------------
   字数统计一律放在输入框**外面**、贴右下角。三个容器都覆盖到：
   .fld（弹窗表单）/ .cf-row（企业资料三栏）/ .sv-card（扫码页内容卡片）——
   「企业简介」那三处分别落在这三种容器里，口径必须一致。 */
.fld > .tip { margin-top: 5px; font-size: 11.5px; line-height: 1.8; color: var(--fld-ink-3); }
.fld > .cnt,
.cf-row > .cnt,
.sv-card > .cnt {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fld-ink-3);
  text-align: right;
}

/* ==========================================================================
   3. 分段按钮（按月 / 按年、按天 / 按月、角色…）：与输入框同高、同宽
   --------------------------------------------------------------------------
   只作用于 .fld 里的分段按钮 —— 列表页的筛选分段（.seg 不在 .fld 里）保持原样。
   ========================================================================== */
.fld > .seg {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  height: var(--fld-h);
}
.fld > .seg > button {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  color: var(--fld-ink-2);
  background: #fff;
  border: 1px solid var(--fld-line);
  border-radius: var(--fld-radius);
  cursor: pointer;
}
.fld > .seg > button.on {
  background: var(--fld-accent);
  border-color: var(--fld-accent);
  color: #fff;
  font-weight: 600;
}

/* --- 「填数字 + 单位」/「或直接选日期 + 日期选择器」两行 
   ------------------------------------------------------------------------
   两行都只占第 2 列，日期框用 flex:1 顶到列尾，
   于是数字框左边界 = 上方输入框左边界，日期框右边界 = 上方输入框右边界。 */
.fld > .nf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
.fld > .nf-row > input[type="number"] { flex: 0 0 110px; width: 110px; }
.fld > .nf-row > input[type="date"] { flex: 1 1 auto; min-width: 0; }
.fld > .nf-row > .mini { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   4. 工厂端「企业基本信息」三栏网格：标签同样右对齐
   --------------------------------------------------------------------------
   列宽与开关列仍由 factory.html 内联决定（那是这一块特有的三栏结构），
   这里只补「文字右对齐」这一条，跟全站标签口径保持一致。 */
.cf-row > label:first-child { text-align: right; }

/* ==========================================================================
   5. 例外一：横向并排的窄栏（海报导出尺寸 / 画质）标签回到控件上方
   --------------------------------------------------------------------------
   这类 .fld 的宽度只有 140px 上下，塞不下 96px 的标签列，
   硬套栅格会把输入框挤成一条缝，所以显式退回堆叠式。 */
.exp-row > .fld:has(> label:first-child) { display: block; }
.exp-row > .fld:has(> label:first-child) > label:first-child {
  display: block;
  margin-bottom: 6px;
  text-align: left;
}
.exp-row > .fld:has(> label:first-child) > *:not(label:first-child) { width: 100%; }

/* ==========================================================================
   6. 例外二：堆叠式表单行（登录页单列窄卡片、弹窗里的「临时密码」行）
   --------------------------------------------------------------------------
   这些地方标签在控件上方更自然，也不该被 96px 的标签列占掉宽度。
   注意「临时密码」那几行是 JS 用 style.display='block' 显隐的，
   内联 display 会压过这里的 display:grid，所以标签对齐必须用
   .fld.stack:has(...) 这种更高优先级的选择器单独兜住。 */
.fld.stack:has(> label:first-child) { display: block; }
.fld.stack:has(> label:first-child) > label:first-child {
  display: block;
  margin-bottom: 6px;
  text-align: left;
}
.fld.stack:has(> label:first-child) > *:not(label:first-child) { width: 100%; }

/* ==========================================================================
   7. 窄屏：标签列收窄，仍保持右对齐与左右边界对齐
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    --fld-lbl: 86px;
    --fld-gap: 8px;
    --fld-mb: 12px;
    --fld-lbl-font: 12.5px;
  }
}

/* ==========================================================================
   8. 滚轮日期选择器（由 form-widgets.js 生成，全站一套）
   --------------------------------------------------------------------------
   结构：遮罩 > 卡片 > 头部（标题 + 实时预览）/ 年·月·日表头 / 三列滚轮 / 底部按钮
   三列都用 scroll-snap 吸附：停在中间的那一行就是选中行，用一条高亮带框出来，
   上下未选中的行统一浅灰弱化，再叠一层上下渐隐，做出滚轮的立体感。

   --dw-item 是单行高度：form-widgets.js 会读它来算滚动位置与首尾垫片，
   要改行高只改这里，别在 JS 里另写一份。
   ========================================================================== */
.dw-mask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(17, 24, 39, .42);
}
.dw-mask[hidden] { display: none; }     /* 必须单独写：上面的 display:flex 会压过 [hidden] 的 UA 样式 */
html.dw-open { overflow: hidden; }      /* 弹窗打开时锁住背景滚动 */

.dw-card {
  --dw-item: 40px;
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  overflow: hidden;
  font-size: 14px;
  color: var(--fld-ink, #1F2937);
}

.dw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
}
.dw-title { font-size: 13px; color: var(--fld-ink-3, #9CA3AF); }
.dw-prev {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--fld-accent, #F97316);
}

.dw-hdrow { display: flex; padding: 0 10px; font-size: 11.5px; color: var(--fld-ink-3, #9CA3AF); }
.dw-hdrow > span { flex: 1; text-align: center; }

.dw-cols { position: relative; display: flex; padding: 4px 10px 10px; }

/* 中间选中行的高亮带：压在列的下层（z-index:0），列背景透明所以能透出来，
   既不挡文字、又能把「选中行」框住。top 里的 4px 是 .dw-cols 的上内边距。 */
.dw-band {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(4px + var(--dw-item) * 2);
  height: var(--dw-item);
  z-index: 0;
  pointer-events: none;
  background: #FFF7ED;
  border-top: 1px solid #FED7AA;
  border-bottom: 1px solid #FED7AA;
  border-radius: 8px;
}

/* 上下渐隐：越靠边越淡，滚轮的立体感就出来了 */
.dw-cols::before,
.dw-cols::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: calc(var(--dw-item) * 1.5);
  z-index: 2;
  pointer-events: none;
}
.dw-cols::before { top: 4px; background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)); }
.dw-cols::after { bottom: 10px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%); }

.dw-col {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  height: calc(var(--dw-item) * 5);   /* 5 行：上下各 2 行可见，中间 1 行选中 */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  text-align: center;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dw-col::-webkit-scrollbar { width: 0; height: 0; display: none; }

.dw-item {
  height: var(--dw-item);
  line-height: var(--dw-item);
  scroll-snap-align: center;
  font-size: 15px;
  color: #C7CDD6;                     /* 未选中：浅灰弱化 */
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color .12s;
}
.dw-item.on { color: var(--fld-ink, #1F2937); font-weight: 700; font-size: 17px; }

.dw-foot { display: flex; gap: 10px; padding: 0 16px 16px; }
.dw-btn {
  flex: 1;
  height: 40px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fld-ink-2, #4B5563);
  background: #fff;
  border: 1px solid var(--fld-line, #E5E7EB);
  border-radius: 8px;
  cursor: pointer;
}
.dw-btn.dw-pri {
  font-weight: 600;
  color: #fff;
  background: var(--fld-accent, #F97316);
  border-color: var(--fld-accent, #F97316);
}

/* 手机端：贴底变「底部弹层面板」，两边不留白 */
@media (max-width: 700px) {
  .dw-mask { align-items: flex-end; padding: 0; }
  .dw-card {
    max-width: none;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}