/* ============================================================
   legacy_hx.css — 旧计算表单 hx2026 美化覆盖层（20261017）
   作用域：.hx-legacy（= .hx-tool-card 内的 #center 旧 DOM）
   不动计算逻辑 DOM，仅视觉升级：输入框/按钮/tabs/结果/dialog
   ============================================================ */

/* --- 页标题与说明 --- */
.hx-legacy #center h2 { font-size: 22px; color: var(--c-ink); margin: 0 0 6px; font-weight: 700; }
.hx-legacy #detailct { margin: 0 0 16px; }
.hx-legacy #detailct a#detail { color: #C8102E; font-size: 12px; text-decoration: none; }
.hx-legacy #desc { font-size: 13px; color: var(--c-text-3, #8a93a3); line-height: 1.8; overflow: hidden; }

/* --- jquery-ui tabs 美化（沪A/沪B/深A/深B 等） --- */
.hx-legacy #types ul.ui-tabs-nav,
.hx-legacy #types .ui-tabs-nav {
  background: none !important; border: 0 !important; padding: 0 !important;
  margin: 0 0 -2px !important; display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 2px solid #f3e2e5 !important; border-radius: 0 !important;
}
.hx-legacy #types .ui-tabs-nav li {
  border: 0 !important; background: none !important; margin: 0 !important;
  float: none !important; border-radius: 0 !important;
}
.hx-legacy #types .ui-tabs-nav li a {
  padding: 9px 18px !important; border-radius: 8px 8px 0 0 !important;
  font-size: 13.5px; color: #5b6b7f !important; outline: none; font-weight: 500;
}
.hx-legacy #types .ui-tabs-nav li a:hover { color: #C8102E !important; }
.hx-legacy #types .ui-tabs-nav li.ui-tabs-selected a,
.hx-legacy #types .ui-tabs-nav li.ui-state-active a,
.hx-legacy #types .ui-tabs-nav li.ui-tabs-active a {
  background: #C8102E !important; color: #fff !important; font-weight: 600;
}
.hx-legacy #types .ui-tabs-panel {
  border: 0 !important; padding: 18px 0 0 !important;
  background: none !important; border-radius: 0 !important;
}

/* --- 表单表格 --- */
.hx-legacy .input table td,
.hx-legacy .output table td { padding: 7px 6px; border: 0; background: none; }
.hx-legacy td.frontface {
  color: #5b6b7f; font-size: 14px; text-align: right; width: 150px;
  white-space: nowrap; padding-right: 12px !important; vertical-align: middle;
}
.hx-legacy input.uinumber, .hx-legacy input.txtd, .hx-legacy input.code {
  height: 38px; border: 1px solid #DCDFE6; border-radius: 8px; padding: 0 10px;
  font-size: 14px; outline: none; background: #fff; width: 210px; vertical-align: middle;
  font-family: inherit; box-sizing: border-box;
}
.hx-legacy input.uinumber:focus, .hx-legacy input.txtd:focus, .hx-legacy input.code:focus {
  border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.10);
}
.hx-legacy input.txtd[readonly], .hx-legacy input[readonly].txtd {
  background: #faf7f8; border-color: #eedfe2; color: #1a2332; font-weight: 600;
}
.hx-legacy .unit, .hx-legacy .defaultUnit { color: #9AA0AC; font-size: 12px; margin-left: 6px; }
.hx-legacy input[type="checkbox"], .hx-legacy input[type="radio"] { accent-color: #C8102E; width: 15px; height: 15px; vertical-align: -2px; }
.hx-legacy input[type="checkbox"] + label, .hx-legacy label[for] { font-size: 13.5px; color: #5b6b7f; cursor: pointer; }

/* --- 按钮统一（计算=红主按钮） --- */
.hx-legacy button, .hx-legacy input[type="submit"] {
  margin: 16px 10px 0 0; padding: 10px 38px; border: 0; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: #C8102E; color: #fff; font-family: inherit;
}
.hx-legacy button:hover { background: #A00D26; }
.hx-legacy button[type="reset"] { background: #fff; color: #5b6b7f; border: 1px solid #DCDFE6; font-weight: 400; }
.hx-legacy button[type="reset"]:hover { color: #C8102E; border-color: #C8102E; background: #fff; }
.hx-legacy .resetbtn, .hx-legacy input.resetbtn, .hx-legacy input.query {
  background: #fff !important; color: #C8102E !important; border: 1px solid rgba(200,16,46,.45) !important;
  font-weight: 400 !important; padding: 7px 16px !important; font-size: 12.5px !important;
  border-radius: 7px !important; margin: 0 6px 0 0 !important; height: auto !important; width: auto !important;
}
.hx-legacy center { text-align: left; margin-top: 6px; }
.hx-legacy center button:first-child { margin-left: 156px; }

/* --- 分红添加区 / 结果区 --- */
.hx-legacy .disList {
  background: #fdf9fa; border: 1px dashed rgba(200,16,46,.35); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; font-size: 13.5px; color: #5b6b7f;
}
.hx-legacy .output .zch2 h4, .hx-legacy .zch2 h4 {
  font-size: 16px; color: #1a2332; padding-left: 11px; border-left: 4px solid #C8102E;
  margin: 20px 0 12px; font-weight: 700;
}
.hx-legacy .output table { background: #fff; }

/* --- jquery-ui dialog 美化（提示弹窗） --- */
.ui-dialog {
  border-radius: 12px !important; border: 0 !important; padding: 0 !important;
  box-shadow: 0 24px 64px rgba(15,43,82,.28) !important; overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
  background: #C8102E !important; border: 0 !important; border-radius: 0 !important;
  padding: 12px 16px !important;
}
.ui-dialog .ui-dialog-title { color: #fff !important; font-size: 14.5px !important; font-weight: 600 !important; }
.ui-dialog .ui-dialog-titlebar-close { border-radius: 6px !important; }
.ui-dialog .ui-dialog-content { padding: 18px 20px !important; font-size: 14px; color: #1a2332; }

/* --- datepicker 按钮图（原 http 新浪图不可用，改内联 SVG） --- */
.hx-legacy input.uidate, input.uidate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 30px;
}

/* --- 移动端 --- */
@media (max-width: 640px) {
  .hx-legacy td.frontface { width: auto; text-align: left; display: block; padding: 8px 2px 2px !important; }
  .hx-legacy .input table td { display: block; width: 100%; }
  .hx-legacy .input table tr { display: block; margin-bottom: 4px; }
  .hx-legacy input.uinumber, .hx-legacy input.txtd, .hx-legacy input.code { width: 100% !important; }
  .hx-legacy center button:first-child { margin-left: 0; }
  .hx-legacy center { text-align: center; }
}

/* datepicker 触发图（原新浪 http 图不可用，input 内已有 SVG） */
.hx-legacy img.ui-datepicker-trigger, img.ui-datepicker-trigger { display: none !important; }

/* --- bx/五险一金等定制 UI 兜底（20261017） --- */
.hx-legacy input[type="text"] {
  height: 36px; border: 1px solid #DCDFE6; border-radius: 8px; padding: 0 10px;
  font-size: 14px; outline: none; background: #fff; font-family: inherit; box-sizing: border-box;
}
.hx-legacy input[type="text"]:focus { border-color: #C8102E; box-shadow: 0 0 0 3px rgba(200,16,46,.10); }
.hx-legacy a.btn {
  display: inline-block; padding: 8px 24px; background: #C8102E; color: #fff; border-radius: 8px;
  font-size: 13.5px; margin: 0 8px 0 10px; cursor: pointer; text-decoration: none; font-weight: 600;
}
.hx-legacy a.btn:hover { background: #A00D26; }
.hx-legacy #table-calc-item th, .hx-legacy table th {
  text-align: right; color: #5b6b7f; font-size: 14px; padding: 8px 12px; white-space: nowrap; font-weight: 400;
}
.hx-legacy #table-calc-item td, .hx-legacy table td { padding: 8px 6px; }
.hx-legacy #table-calc-result input, .hx-legacy .result input {
  background: #faf7f8; border-color: #eedfe2; color: #1a2332; font-weight: 600;
}
.hx-legacy select {
  height: 36px; border: 1px solid #DCDFE6; border-radius: 8px; padding: 0 8px;
  font-size: 14px; background: #fff; outline: none; font-family: inherit;
}

/* ===== 多模块间距（20261017）：第二模块起加分隔线与留白 ===== */
.hx-legacy #center h2 { margin: 28px 0 8px; padding-top: 22px; border-top: 1px dashed var(--c-line, #e4e9f0); }
.hx-legacy #center > h2:first-child, .hx-legacy #center h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hx-legacy .detailct { margin: 0 0 16px; }
.hx-legacy .detailct .desc, .hx-legacy .desc { font-size: 13px; color: #8a93a3; line-height: 1.8; overflow: hidden; }
.hx-legacy .output { margin-bottom: 6px; }
.hx-legacy .output + div, .hx-legacy .output + h2 { margin-top: 10px; }


/* ===== jquery-ui datepicker 现代皮肤（1.8 包未含 datepicker 样式，20261018 重写） ===== */
.ui-datepicker {
  width: 232px; background: #fff; border: 1px solid #e4e9f0; border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15,43,82,.18); padding: 12px 14px 14px;
  font-family: "PingFang SC","Microsoft YaHei",sans-serif; z-index: 9999 !important;
  display: none;
}
.ui-datepicker .ui-datepicker-header { position: relative; background: none; border: 0; padding: 2px 30px 10px; text-align: center; color: #1a2332; font-weight: 600; font-size: 14px; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute; top: 3px; width: 26px; height: 26px; border-radius: 7px;
  background: #f6f8fb; border: 0; cursor: pointer; overflow: visible;
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 3px; background: #fdf0f2; border: 0; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  display: block; text-indent: 0; background: none; width: 26px; height: 26px; line-height: 26px;
  font-size: 0; text-align: center;
}
.ui-datepicker .ui-datepicker-prev span::before { content: "\2039"; font-size: 20px; color: #5b6b7f; }
.ui-datepicker .ui-datepicker-next span::before { content: "\203A"; font-size: 20px; color: #5b6b7f; }
.ui-datepicker select.ui-datepicker-year { min-width: 74px; }
.ui-datepicker select.ui-datepicker-month {
  border: 1px solid #DCDFE6; border-radius: 6px; font-size: 12px; padding: 2px 4px; margin: 0 2px; background: #fff; color: #1a2332;
}
.ui-datepicker table { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: 12.5px; background: none; }
.ui-datepicker th { color: #8a93a3; font-weight: 500; padding: 6px 0 8px; border: 0; background: none; }
.ui-datepicker td { border: 0; padding: 2px 1px; background: none; }
.ui-datepicker td span, .ui-datepicker td a { display: block; text-align: center; padding: 5px 0; border-radius: 7px; color: #1a2332; text-decoration: none; font-weight: 400; }
.ui-datepicker td span { color: #c3c9d4; }
.ui-datepicker td a:hover { background: #fdf0f2; color: #C8102E; }
.ui-datepicker td a.ui-state-highlight { background: #f6f8fb; font-weight: 600; color: #5b6b7f; }
.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-active:hover { background: #C8102E !important; color: #fff !important; }
.ui-datepicker .ui-datepicker-close, .ui-datepicker .ui-datepicker-buttonpane { display: none; }