/* ═════════════════════════════════════════════
 * common/css/form.css — 全站统一表单样式
 * 提取自各模块重复定义的基础 class
 * 各模块 CSS 可覆盖 width/gap 等尺寸差异
 * ═════════════════════════════════════════════ */

/* ── 表单行 ── */
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; font-size: 13px; }
.form-row:last-child { margin-bottom: 0; }

/* ── 表单内 select 统一：用项目字体，不用系统字体 ── */
.form-row select { font-family: "MiSans", sans-serif; font-weight: 400; }

/* ── 标签 ── */
.form-row .lbl { color: var(--color-text); font-weight: 600; white-space: nowrap; min-width: 60px; }

/* ── 求测人输入框 ── */
.seeker-input { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; background: var(--color-input-bg, #fff); color: var(--color-text); font-family: inherit; }
.seeker-input:focus { outline: none; border-color: var(--color-text); border-width: 2px; }

/* ── 日期输入框 ── */
.date-input { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; text-align: center; width: 40px; background: var(--color-input-bg, #fff); color: var(--color-text); font-family: inherit; }
.date-input.year { width: 55px; }
.date-input:focus { outline: none; border-color: var(--color-text); border-width: 2px; }

/* ── 日期后缀文字（年月日时分）── */
.dt-suf { font-size: 13px; color: var(--color-text-sec); }

/* ── 公历/农历切换组 ── */
.cal-group { display: inline-flex; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.cal-group label { display: flex; align-items: center; padding: 4px 10px; font-size: 12px; cursor: pointer; background: var(--color-panel, #fff); color: var(--color-text-sec); border-right: 1px solid var(--color-border); transition: background .15s, color .15s; white-space: nowrap; }
.cal-group label:last-child { border-right: none; }
.cal-group label.active { background: var(--color-subtle); color: var(--color-text); border-color: var(--color-border); }
.cal-group input[type="radio"] { display: none; }
.cal-group .mob-only { display: none; }

/* ── 盘式/方法按钮组 ── */
.panshi-group, .method-radio-group { display: flex; gap: 0; flex-wrap: wrap; }
.panshi-group label, .method-radio-group label { display: flex; align-items: center; gap: 3px; padding: 3px 8px; border: 1px solid var(--color-border); border-right: none; cursor: pointer; font-size: 12px; background: var(--color-panel); color: var(--color-text-sec); transition: background .15s; white-space: nowrap; }
.panshi-group label:first-child, .method-radio-group label:first-child { border-radius: 4px 0 0 4px; }
.panshi-group label:last-child, .method-radio-group label:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid var(--color-border); }
.panshi-group label.active, .method-radio-group label.active { background: var(--color-subtle); color: var(--color-text); border-color: var(--color-border); }
.panshi-group input[type="radio"], .method-radio-group input[type="radio"] { display: none; }

/* ── 类型切换组（小号，奇门用时家/日家等）── */
.panshi-type-group { display: flex; gap: 0; flex-wrap: wrap; }
.panshi-type-group label { padding: 2px 6px; border: 1px solid var(--color-border); border-right: none; font-size: 11px; cursor: pointer; background: var(--color-panel); color: var(--color-text-sec); transition: background .15s, color .15s; }
.panshi-type-group label:first-child { border-radius: 3px 0 0 3px; }
.panshi-type-group label:last-child { border-radius: 0 3px 3px 0; border-right: 1px solid var(--color-border); }
.panshi-type-group label.active { background: var(--color-subtle); color: var(--color-text); border-color: var(--color-border); }
.panshi-type-group input[type="radio"] { display: none; }

/* ── 手机端底部操作栏 ── */
.mobile-actions-outside { display: none; }

/* ── dark 模式 ── */
html[data-theme="dark"] .seeker-input,
html[data-theme="dark"] .date-input { background: var(--color-input-bg); color: var(--color-text); border-color: #9a8ab8; }

html[data-theme="dark"] .form-row select { background: var(--color-input-bg); color: var(--color-text); border-color: #9a8ab8; }

html[data-theme="dark"] .btn-now,
html[data-theme="dark"] .btn.btn-default { background: var(--color-input-bg); color: var(--color-text); border-color: #9a8ab8; }

/* ═════════════════════════════════════════════
 * Mob 端统一尺寸
 * ═════════════════════════════════════════════ */
body.mode-mobile .date-input { padding: 8px 2px; font-size: 15px; border-radius: 6px; text-align: center; }
body.mode-mobile .date-input.year { padding: 8px 2px; }
body.mode-mobile .seeker-input { padding: 10px 8px; font-size: 15px; border-radius: 6px; }
body.mode-mobile .btn-now { font-size: 14px; padding: 7px 10px; border-radius: 6px; }
body.mode-mobile select { font-family: "MiSans", sans-serif; font-weight: 400; }
body.mode-mobile .cs-display { min-height: unset; height: auto; padding: 6px 8px; font-size: 14px; border-radius: 4px; line-height: 1.4; }

/* Mob 端聚焦：粗黑边框（触控反馈清晰） */
body.mode-mobile .seeker-input:focus,
body.mode-mobile .date-input:focus { outline: none; border-color: var(--color-text); border-width: 2px; }

/* Mob dark */
html[data-theme="dark"] body.mode-mobile .date-input,
html[data-theme="dark"] body.mode-mobile .seeker-input { background: var(--color-input-bg); color: var(--color-text); border-color: #9a8ab8; }

/* ── Mob 底部操作区容器 ── */
body.mode-mobile .mobile-actions-outside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 8px 0;
}

/* ── Mob 排盘主按钮（全宽黑色渐变）── */
body.mode-mobile .mobile-actions-outside .btn-go {
  width: 100%; padding: 14px; font-size: 17px; font-weight: 700;
  border-radius: 8px; height: auto;
  background: linear-gradient(135deg, #2a2a2a, #000000);
  border: none; color: #fff; cursor: pointer;
}
html[data-theme="dark"] body.mode-mobile .mobile-actions-outside .btn-go {
  background: linear-gradient(135deg, #2a2a2a, #000000);
}

/* ── Mob 查历史次要按钮 ── */
body.mode-mobile .mobile-actions-outside .btn-record {
  display: block; width: 100%; padding: 14px; font-size: 17px; font-weight: 700;
  text-align: center; border-radius: 8px; height: auto;
  background: var(--color-subtle); color: var(--color-text);
  border: 2px solid var(--color-text);
  text-decoration: none; cursor: pointer; box-sizing: border-box; line-height: 1.2;
}

/* ═════════════════════════════════════════════
 * Mob 端 cal-group 标准（全宽等宽 toggle 组）
 * 权威定义在此；各模块 mob.css 不得重写整套
 * ═════════════════════════════════════════════ */
body.mode-mobile .cal-group {
  display: flex; width: 100%; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-panel);
}
body.mode-mobile .cal-group label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 7px 4px; font-size: 14px; font-weight: 400;
  background: transparent; border: none; cursor: pointer;
  transition: background .15s, color .15s; color: var(--color-text);
}
body.mode-mobile .cal-group label.active { background: var(--color-subtle); color: var(--color-text); font-weight: 500; }
body.mode-mobile .cal-group label:not(:last-child) { border-right: 1px solid var(--color-border); }
body.mode-mobile .cal-group input[type="radio"] { display: none; }

/* dark */
html[data-theme="dark"] body.mode-mobile .cal-group { background: var(--color-input-bg); border-color: #9a8ab8; }
html[data-theme="dark"] body.mode-mobile .cal-group label { color: var(--color-text); }
html[data-theme="dark"] body.mode-mobile .cal-group label.active { background: var(--color-subtle); color: var(--color-text); }
html[data-theme="dark"] body.mode-mobile .cal-group label:not(:last-child) { border-right-color: #9a8ab8; }