/* ============================================================
 * fin-leave.css —— 未休年假折算工资 Pro 设计系统（「暖沙金·日落海青」风格）
 * 依赖 fin.css 的全部组件（.fin-card / .fin-table / .fin-kpi / .fin-tabs…）
 * 仅通过 .fin.leave 作用域覆写设计变量与 Hero，结构、JS 与 fin-common.js 完全复用
 * 与劳动法 23–25 的「政务靛蓝」(.fin.tax) 刻意区分：暖橙金主色 + 海青点缀
 * 亮色 / 黑夜双主题：<html data-theme="dark"> 自动切换
 * ============================================================ */

/* ---------- 亮色（暖沙金） ---------- */
.fin.leave {
    --fin-bg: #fbf6ef;
    --fin-ink: #33261b;
    --fin-ink-soft: #6b5742;
    --fin-faint: #a5907a;
    --fin-card: #ffffff;
    --fin-card-2: #faf2e6;
    --fin-line: #efe3d2;
    --fin-line-strong: #ddc9ad;
    --fin-accent: #d97b2b;
    --fin-accent-2: #e8913f;
    --fin-gold: #0e7c86;
    --fin-gold-soft: #e0f1f2;
    --fin-accent-soft: #fceee0;
    --fin-accent-ink: #b85f1a;
    --fin-grad: linear-gradient(135deg, #d97b2b 0%, #e8913f 48%, #f0a955 100%);
    --fin-hero-grad: linear-gradient(135deg, #b4531a 0%, #d97b2b 48%, #2a8a93 130%);
    --fin-danger: #d2483a;
    --fin-danger-soft: #fdecea;
    --fin-warn: #c98a12;
    --fin-warn-soft: #fdf4dd;
    --fin-input-bg: #fdf9f3;
    --fin-track: #f2e6d5;
    --fin-shadow: 0 18px 50px -24px rgba(180, 83, 26, .34);
    --fin-shadow-soft: 0 8px 24px -14px rgba(180, 83, 26, .26);
    color-scheme: light;
}

/* ---------- 黑夜（海岸暮色） ---------- */
:root[data-theme="dark"] .fin.leave {
    --fin-bg: #17110b;
    --fin-ink: #f3e9db;
    --fin-ink-soft: #c3b19a;
    --fin-faint: #8c7a63;
    --fin-card: #241b12;
    --fin-card-2: #1d160f;
    --fin-line: #382c1d;
    --fin-line-strong: #4d3d29;
    --fin-accent: #f0a955;
    --fin-accent-2: #f4ba74;
    --fin-gold: #4cc0c9;
    --fin-gold-soft: #103034;
    --fin-accent-soft: #3a2a1780;
    --fin-accent-ink: #f6c68e;
    --fin-grad: linear-gradient(135deg, #e8913f 0%, #f0a955 55%, #f4ba74 100%);
    --fin-hero-grad: linear-gradient(135deg, #8a3f14 0%, #c26a24 52%, #146a72 128%);
    --fin-danger: #f18a7e;
    --fin-danger-soft: #3a1e1a;
    --fin-warn: #e7bd5f;
    --fin-warn-soft: #352c12;
    --fin-input-bg: #1e1710;
    --fin-track: #2e2316;
    color-scheme: dark;
}

/* ---------- Hero：顶部海青细线 + 棕榈圆徽 ---------- */
.fin.leave .fin-hero {
    border-top: 3px solid #0e7c86;
}
.fin.leave .fin-hero::before {
    content: "";
    position: absolute; left: -80px; bottom: -110px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.fin.leave .fin-hero-icon {
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.28);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}

/* ---------- 场景选择药丸（label+radio） ---------- */
.lv-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-level {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 16px; border-radius: 10px;
    border: 1.5px solid var(--fin-line-strong); background: var(--fin-input-bg);
    font-size: 14px; font-weight: 700; color: var(--fin-ink-soft);
    cursor: pointer; transition: all .15s; user-select: none;
}
.lv-level:hover { border-color: var(--fin-accent); }
.lv-level input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.lv-level:has(input:checked) {
    background: var(--fin-grad); border-color: transparent; color: #fff;
    box-shadow: var(--fin-shadow-soft);
}

/* ---------- 政策依据脚注 ---------- */
.lv-basis {
    font-size: 12.5px; line-height: 1.9; color: var(--fin-faint);
    border-top: 1px dashed var(--fin-line);
    padding-top: 12px; margin-top: 18px;
}
.lv-basis b { color: var(--fin-ink-soft); font-weight: 600; }

/* ---------- 300% / 200% 两栏对比 ---------- */
.lv-ab { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.lv-plan {
    border: 1.5px solid var(--fin-line);
    border-radius: var(--fin-radius);
    padding: 20px 22px;
    background: var(--fin-card);
    position: relative;
    min-width: 0;
}
.lv-plan.best {
    border-color: color-mix(in srgb, var(--fin-accent) 55%, transparent);
    background:
        radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--fin-accent) 10%, transparent), transparent 62%),
        var(--fin-card);
    box-shadow: var(--fin-shadow-soft);
}
.lv-plan .tp-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--fin-ink); }
.lv-plan .tp-badge {
    font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
    background: var(--fin-accent); color: #fff;
}
.lv-plan .tp-tax { font-family: var(--fin-num); font-size: 32px; font-weight: 800; color: var(--fin-accent); font-variant-numeric: tabular-nums; margin: 10px 0 2px; word-break: break-all; }
.lv-plan .tp-tax small { font-size: 15px; color: var(--fin-faint); font-weight: 700; margin-left: 3px; }
.lv-plan .tp-net { font-size: 13px; color: var(--fin-ink-soft); }
.lv-plan .tp-net b { color: var(--fin-gold); font-family: var(--fin-num); font-variant-numeric: tabular-nums; }
.lv-plan .tp-rows { margin-top: 14px; border-top: 1px solid var(--fin-line); }
.lv-plan .tp-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--fin-line); font-size: 13.5px; }
.lv-plan:last-child .tp-row,
.lv-plan .tp-row:last-child { border-bottom: 0; }
.lv-plan .tp-row span { color: var(--fin-ink-soft); }
.lv-plan .tp-row b { font-family: var(--fin-num); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 折算流程小台阶 ---------- */
.lv-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.lv-step {
    border: 1px solid var(--fin-line); border-radius: var(--fin-radius-sm);
    background: var(--fin-card-2); padding: 12px 12px 10px; min-width: 0;
    position: relative;
}
.lv-step .n {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--fin-grad); color: #fff; font-size: 11.5px; font-weight: 800; margin-bottom: 6px;
}
.lv-step .t { font-size: 12px; color: var(--fin-faint); line-height: 1.5; }
.lv-step .v { font-family: var(--fin-num); font-size: 17px; font-weight: 800; color: var(--fin-ink); font-variant-numeric: tabular-nums; margin-top: 2px; word-break: break-word; }
@media (max-width: 760px) {
    .lv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-ab { grid-template-columns: minmax(0,1fr); }
}