/* ======================================================================
 * 28. 对账单生成器 · statement-of-account.css
 * 视觉语言：青色账本 + 珊瑚红印章 + 横线纸，像财务桌上摊开的一册往来账
 * 作用域：.tsk.soa
 * ====================================================================== */

.tsk.soa {
    --tsk-bg: #eef4f3;
    --tsk-bg-2: #e3edeb;
    --tsk-card: #ffffff;
    --tsk-card-2: #f5faf9;
    --tsk-ink: #12241f;
    --tsk-sub: #4d665f;
    --tsk-faint: #879c96;
    --tsk-line: #d5e3df;
    --tsk-line-2: #e6f0ed;
    --tsk-brand: #0f766e;
    --tsk-brand-2: #14a394;
    --tsk-brand-soft: #dcf0ec;
    --tsk-brand-ink: #0b5f58;
    --tsk-accent: #e8590c;
    --tsk-ok: #2f8a52;
    --tsk-ok-soft: #e3f3e8;
    --tsk-warn: #c07810;
    --tsk-warn-soft: #fbf0d8;
    --tsk-bad: #c92a2a;
    --tsk-bad-soft: #fbe3e3;
    --tsk-info: #1971a8;

    --soa-paper: #fffefb;
    --soa-rule: #dfe9e6;
    --soa-rule-strong: #0f766e;

    background:
        linear-gradient(180deg, rgba(15, 118, 110, .05), transparent 260px),
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(15, 118, 110, .035) 27px 28px),
        var(--tsk-bg);
}

:root[data-theme="dark"] .tsk.soa {
    --tsk-bg: #0b1413;
    --tsk-bg-2: #101d1b;
    --tsk-card: #14211f;
    --tsk-card-2: #1a2a27;
    --tsk-ink: #e6f2ee;
    --tsk-sub: #a5bdb6;
    --tsk-faint: #7b928b;
    --tsk-line: #263b37;
    --tsk-line-2: #1e302d;
    --tsk-brand: #2bc0ae;
    --tsk-brand-2: #4dd6c4;
    --tsk-brand-soft: rgba(43, 192, 174, .14);
    --tsk-brand-ink: #6fe0d1;
    --tsk-accent: #ff8a4c;
    --tsk-ok: #63cf8b;
    --tsk-ok-soft: rgba(99, 207, 139, .13);
    --tsk-warn: #f0bc55;
    --tsk-warn-soft: rgba(240, 188, 85, .13);
    --tsk-bad: #ff8787;
    --tsk-bad-soft: rgba(255, 135, 135, .14);
    --tsk-info: #4dabdd;

    --soa-paper: #131f1d;
    --soa-rule: #243834;
    --soa-rule-strong: #2bc0ae;

    background:
        linear-gradient(180deg, rgba(43, 192, 174, .07), transparent 260px),
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(43, 192, 174, .035) 27px 28px),
        var(--tsk-bg);
}

/* ---------- 首屏等高栅格 ---------- */
.soa-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 30px;
    padding: 30px 0 24px;
    align-items: stretch;
}
.soa-hero-l {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.soa-hero-l > .tsk-hs { flex: 1 1 auto; }
.soa-hero-r { min-width: 0; }
@media (max-width: 900px) {
    .soa-hero { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- 右侧抬头表单 ---------- */
.soa-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
}
.soa-form-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--tsk-line);
    background: linear-gradient(100deg, var(--tsk-brand-soft), transparent 78%);
    position: relative;
}
.soa-form-hd::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 12px;
    width: 22px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--tsk-accent) 55%, transparent);
    border-radius: 50%;
    opacity: .7;
}
.soa-form-hd b { font-size: 15px; }
.soa-form-hd small { font-size: 11.5px; color: var(--tsk-faint); }
.soa-form-body {
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
}
.soa-form .tsk-label em { color: var(--tsk-accent); font-style: normal; }
.soa-form .tsk-input,
.soa-form .tsk-textarea { background: var(--tsk-card-2); font-variant-numeric: tabular-nums; }
.soa-form .tsk-field.bad .tsk-input { border-color: var(--tsk-bad); }
.soa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 420px) { .soa-row2 { grid-template-columns: 1fr; } }

.soa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.soa-acts .tsk-btn-main { flex: 1 1 auto; }
.soa-tip {
    font-size: 12px;
    line-height: 1.7;
    color: var(--tsk-faint);
    padding-left: 10px;
    border-left: 3px solid var(--tsk-brand);
}
.soa-tip.bad { color: var(--tsk-bad); border-color: var(--tsk-bad); }

/* ---------- 明细工作台 ---------- */
.soa-work {
    margin-top: 26px;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-sm);
    padding: 20px 22px 22px;
}
.soa-work-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--soa-rule);
    margin-bottom: 16px;
}
.soa-work-sub { margin-top: 4px; font-size: 12.5px; color: var(--tsk-faint); }
.soa-work-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.soa-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1000px) { .soa-work-grid { grid-template-columns: 1fr; } }

.soa-editor {
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--tsk-card);
}
.soa-edit-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.soa-edit-table thead th {
    background: var(--tsk-card-2);
    color: var(--tsk-brand-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: left;
    padding: 10px 10px;
    border-bottom: 1px solid var(--tsk-line);
    white-space: nowrap;
}
.soa-edit-table td {
    padding: 6px 7px;
    border-bottom: 1px solid var(--tsk-line-2);
    vertical-align: middle;
}
.soa-edit-table tr:last-child td { border-bottom: 0; }
.soa-edit-table tbody tr:hover td { background: color-mix(in srgb, var(--tsk-brand-soft) 38%, transparent); }

.soa-in {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--tsk-ink);
    font: 500 13.5px/1.55 var(--tsk-font);
    padding: 7px 8px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.soa-in:hover { border-color: var(--tsk-line); background: var(--tsk-card-2); }
.soa-in:focus {
    border-color: var(--tsk-brand);
    background: var(--tsk-card);
    box-shadow: 0 0 0 3px var(--tsk-brand-soft);
}
.soa-in.amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.soa-in.bad { border-color: var(--tsk-bad); background: var(--tsk-bad-soft); }
.soa-in[type="date"] { font-variant-numeric: tabular-nums; padding-left: 6px; }
.soa-num {
    text-align: center;
    font: 700 12px/1 var(--tsk-num);
    color: var(--tsk-faint);
}
.soa-del {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border: 1px solid var(--tsk-line);
    border-radius: 7px;
    background: transparent;
    color: var(--tsk-faint);
    font: 800 15px/1 var(--tsk-font);
    cursor: pointer;
    transition: .15s;
}
.soa-del:hover { border-color: var(--tsk-bad); color: var(--tsk-bad); background: var(--tsk-bad-soft); }

.soa-editor-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-top: 1px dashed var(--soa-rule);
    background: var(--tsk-card-2);
    font-size: 11.8px;
    color: var(--tsk-faint);
}
@media (max-width: 640px) {
    .soa-editor { overflow-x: auto; }
    .soa-edit-table { min-width: 660px; }
}

/* 合计卡：像账本右上角的结算框 */
.soa-sum {
    background: var(--tsk-card-2);
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 16px;
}
.soa-sum-hd {
    padding: 10px 16px;
    background: var(--tsk-brand);
    color: #fff;
    font: 800 12px/1.4 var(--tsk-num);
    letter-spacing: .2em;
    text-transform: uppercase;
}
.soa-sum-list { margin: 0; padding: 10px 16px 6px; }
.soa-sum-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--soa-rule);
}
.soa-sum-list > div:last-child { border-bottom: 0; }
.soa-sum-list dt { font-size: 12.8px; color: var(--tsk-sub); }
.soa-sum-list dd {
    margin: 0;
    font: 700 14.5px/1.4 var(--tsk-num);
    font-variant-numeric: tabular-nums;
    color: var(--tsk-ink);
}
.soa-sum-key { padding-top: 11px !important; }
.soa-sum-key dt { font-weight: 800; color: var(--tsk-ink); }
.soa-sum-key dd { font-size: 23px; font-weight: 800; color: var(--tsk-accent); }
.soa-sum-upper {
    padding: 12px 16px 15px;
    background: color-mix(in srgb, var(--tsk-brand-soft) 60%, transparent);
    border-top: 1px solid var(--tsk-line);
}
.soa-sum-upper span {
    display: block;
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--tsk-brand-ink);
    font-weight: 700;
}
.soa-sum-upper b {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: .04em;
    color: var(--tsk-brand-ink);
}
@media (max-width: 1000px) { .soa-sum { position: static; } }

/* ---------- 单据预览 ---------- */
.soa-paper-wrap {
    margin-top: 26px;
    background: var(--tsk-bg-2);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    padding: 18px 22px 26px;
}
.soa-paper-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.soa-paper-hint { font-size: 12px; color: var(--tsk-faint); }

.soa-sheet {
    max-width: 900px;
    margin: 0 auto;
    background: var(--soa-paper);
    border: 1px solid var(--tsk-line);
    border-radius: 4px;
    box-shadow: var(--tsk-shadow);
    padding: 30px 34px 26px;
    position: relative;
    overflow: hidden;
}
.soa-sheet::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--tsk-brand), var(--tsk-brand-2) 62%, var(--tsk-accent));
}
.soa-sheet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--soa-rule-strong);
}
.soa-sheet-brand {
    display: inline-block;
    font: 700 10.5px/1 var(--tsk-num);
    letter-spacing: .22em;
    color: var(--tsk-faint);
}
.soa-sheet-top h3 {
    margin: 7px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--tsk-ink);
}
.soa-sheet-no { text-align: right; }
.soa-sheet-no span { display: block; font-size: 11px; color: var(--tsk-faint); letter-spacing: .1em; }
.soa-sheet-no b {
    display: block;
    margin-top: 3px;
    font: 700 13px/1.4 var(--tsk-num);
    color: var(--tsk-sub);
}

.soa-sheet-parties {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 20px;
    padding: 15px 0 14px;
    border-bottom: 1px dashed var(--soa-rule);
}
.soa-sheet-parties > div { min-width: 0; }
.soa-sheet-parties span {
    display: block;
    font-size: 11px;
    color: var(--tsk-faint);
    letter-spacing: .06em;
}
.soa-sheet-parties b {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tsk-ink);
    overflow-wrap: anywhere;
}
@media (max-width: 640px) { .soa-sheet-parties { grid-template-columns: 1fr; } }

.soa-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.soa-sheet-table thead th {
    padding: 9px 10px;
    background: color-mix(in srgb, var(--tsk-brand-soft) 55%, transparent);
    border-bottom: 1px solid var(--soa-rule-strong);
    font-size: 11.5px;
    font-weight: 800;
    text-align: left;
    color: var(--tsk-brand-ink);
    white-space: nowrap;
}
.soa-sheet-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--soa-rule);
    font-size: 13px;
    line-height: 1.7;
    color: var(--tsk-sub);
    vertical-align: top;
}
.soa-sheet-table tbody td.amt {
    text-align: right;
    font-weight: 700;
    color: var(--tsk-ink);
}
.soa-sheet-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--tsk-card-2) 55%, transparent);
}
.soa-sheet-table tbody .soa-empty-row td {
    text-align: center;
    color: var(--tsk-faint);
    padding: 22px 10px;
}

.soa-sheet-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--soa-rule);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tsk-card-2) 68%, transparent);
}
.soa-sheet-totals > div { min-width: 0; }
.soa-sheet-totals span { display: block; font-size: 11px; color: var(--tsk-faint); }
.soa-sheet-totals b {
    display: block;
    margin-top: 2px;
    font: 700 13.5px/1.45 var(--tsk-num);
    color: var(--tsk-ink);
}
.soa-sheet-balance {
    padding-left: 14px;
    border-left: 1px dashed var(--soa-rule);
}
.soa-sheet-balance b { font-size: 19px; color: var(--tsk-accent); }
@media (max-width: 720px) {
    .soa-sheet-totals { grid-template-columns: 1fr 1fr; }
    .soa-sheet-balance { border-left: 0; padding-left: 0; }
}

.soa-sheet-upper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    border-left: 4px solid var(--tsk-accent);
    background: color-mix(in srgb, var(--tsk-brand-soft) 40%, transparent);
}
.soa-sheet-upper span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tsk-brand-ink);
    white-space: nowrap;
}
.soa-sheet-upper b {
    font-size: 16px;
    letter-spacing: .05em;
    color: var(--tsk-ink);
    line-height: 1.6;
}

.soa-sheet-note {
    margin-top: 12px;
    font-size: 12.3px;
    line-height: 1.8;
    color: var(--tsk-sub);
}
.soa-sheet-sign {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    margin-top: 24px;
}
.soa-sheet-sign > div { min-width: 0; }
.soa-sheet-sign span { display: block; font-size: 11.5px; color: var(--tsk-faint); }
.soa-sheet-sign i {
    display: block;
    margin-top: 26px;
    border-bottom: 1px solid var(--tsk-sub);
    height: 1px;
}
.soa-sheet-date {
    margin-top: 14px;
    text-align: right;
    font-size: 12px;
    color: var(--tsk-faint);
}

/* ---------- 说明区 ---------- */
.soa-sec-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsk-faint);
    white-space: nowrap;
}
.soa-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1000px) { .soa-rule-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .soa-rule-grid { grid-template-columns: 1fr; } }
.soa-rule {
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-top: 3px solid var(--tsk-brand);
    border-radius: 10px;
    padding: 15px 16px 16px;
    box-shadow: var(--tsk-shadow-sm);
}
.soa-rule b {
    display: block;
    font-size: 14.5px;
    margin-bottom: 5px;
    color: var(--tsk-ink);
}
.soa-rule p { font-size: 12.8px; line-height: 1.8; color: var(--tsk-sub); }

.soa-diff {
    display: grid;
    gap: 10px;
}
.soa-diff article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    padding: 13px 16px;
    box-shadow: var(--tsk-shadow-sm);
}
.soa-diff article > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tsk-brand-soft);
    color: var(--tsk-brand-ink);
    font: 800 13px/1 var(--tsk-num);
}
.soa-diff b { display: block; font-size: 14px; margin-bottom: 2px; }
.soa-diff p { font-size: 13px; line-height: 1.8; color: var(--tsk-sub); }

/* ---------- 打印：只保留单据本体 ---------- */
@page { size: A4 portrait; margin: 12mm 12mm; }

@media print {
    .tsk.soa { background: #fff !important; }
    .tsk-wrap { padding: 0 !important; max-width: none !important; }
    .soa-hero,
    .soa-work,
    .soa-paper-hd,
    .soa .tsk-sec,
    .soa .tsk-foot,
    .soa .tskb,
    .tsk-crumb-bar { display: none !important; }
    .soa-paper-wrap {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        border-radius: 0 !important;
    }
    .soa-sheet {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }
    .soa-sheet::before { display: none !important; }
    .soa-sheet-top { border-color: #333 !important; }
    .soa-sheet-top h3 { color: #111 !important; }
    .soa-sheet-brand, .soa-sheet-no span, .soa-sheet-date { color: #555 !important; }
    .soa-sheet-no b { color: #222 !important; }
    .soa-sheet-parties span { color: #555 !important; }
    .soa-sheet-parties b { color: #111 !important; }
    .soa-sheet-table thead th {
        background: #eee !important;
        color: #111 !important;
        border-color: #333 !important;
    }
    .soa-sheet-table tbody td {
        color: #222 !important;
        border-color: #bbb !important;
        font-size: 9.5pt !important;
    }
    .soa-sheet-table tbody tr:nth-child(even) td { background: #f7f7f7 !important; }
    .soa-sheet-totals {
        background: #f8f8f8 !important;
        border-color: #999 !important;
        page-break-inside: avoid;
    }
    .soa-sheet-totals span { color: #555 !important; }
    .soa-sheet-totals b { color: #111 !important; }
    .soa-sheet-balance { border-color: #999 !important; }
    .soa-sheet-balance b { color: #111 !important; }
    .soa-sheet-upper {
        background: #f4f4f4 !important;
        border-left-color: #333 !important;
        page-break-inside: avoid;
    }
    .soa-sheet-upper span { color: #333 !important; }
    .soa-sheet-upper b { color: #000 !important; }
    .soa-sheet-note { color: #333 !important; }
    .soa-sheet-sign span { color: #333 !important; }
    .soa-sheet-sign i { border-color: #333 !important; }
}