/* =========================================================================
   必填字段视觉层次 (Required-field visual hierarchy)
   设计原则：以现有 HTML `required` 属性为唯一事实源，自动渲染视觉层次，
   无需在模板里手工重复标记；JS 动态新增的行（带 required 属性）也能自动生效。
   ========================================================================= */

/* 显式必填标记（模板里手写的 <span class="req-mark">*</span> 也走这套样式） */
.req-mark {
    color: #e53935;
    font-weight: 700;
    margin-left: 2px;
}

/* 表头必填列 */
th.req-col::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
}

/* 选填标记（如需在标签上显式标注选填时使用） */
.opt-mark {
    color: #9aa0a6;
    font-size: 0.82em;
    font-weight: 400;
    margin-left: 4px;
}

/* ---------- 1. 必填控件：左侧红色竖条（清晰、无布局抖动由 border 实现） ---------- */
input[required],
select[required],
textarea[required] {
    border-left: 3px solid #e53935 !important;
}

/* ---------- 2. 必填标签：加粗 + 自动补红星（仅对未手标 * 的标签生效） ---------- */
/* 加粗所有“其后紧跟必填控件”的 label */
label.form-label:has(+ input[required]),
label.form-label:has(+ select[required]),
label.form-label:has(+ textarea[required]),
label.form-label:has(+ div [required]),
label.form-label:has(+ div > div [required]) {
    font-weight: 600;
}

/* 自动补红星：标签后紧跟必填控件，但该标签内尚未有显式 * 标记 */
label.form-label:not(:has(.req-mark)):not(:has(.text-danger)):has(+ input[required])::after,
label.form-label:not(:has(.req-mark)):not(:has(.text-danger)):has(+ select[required])::after,
label.form-label:not(:has(.req-mark)):not(:has(.text-danger)):has(+ textarea[required])::after,
label.form-label:not(:has(.req-mark)):not(:has(.text-danger)):has(+ div [required])::after,
label.form-label:not(:has(.req-mark)):not(:has(.text-danger)):has(+ div > div [required])::after {
    content: " *";
    color: #e53935;
    font-weight: 700;
}

/* ---------- 3. 表单级图例 ---------- */
.form-required-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #6b7280;
    background: #f5f7fa;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 14px;
}
.form-required-legend .req-mark {
    font-size: 0.95rem;
}

/* 深色主题下适配 */
[data-bs-theme="dark"] .form-required-legend {
    background: #1f2733;
    border-color: #2c3744;
    color: #aab3c0;
}
[data-bs-theme="dark"] input[required],
[data-bs-theme="dark"] select[required],
[data-bs-theme="dark"] textarea[required] {
    border-left-color: #ff6b6b !important;
}