/* ═══════════════════════════════════════════════════════════════════
   پیش فاکتور (/proforma) — روی همان توکن‌ها و کلاس‌های خزانه (.trs-*)؛
   اینجا فقط آنچه پیش‌فاکتور لازم دارد: جدولِ پهنِ اقلام، ورودِ سطر و جمع‌ها.
   ═══════════════════════════════════════════════════════════════════ */

.pf { --pf-disc: #db2777; --pf-pay: #059669; }

/* ─────────────── فهرست ─────────────── */
.pf-kinds button { flex: 1; justify-content: center; padding: 0 4px; font-size: .74rem; }
.trs-list__bar .pf-kinds { width: 100%; }
/* Keep the longer havaleh status filters inside the list panel. */
.hv .trs-list__bar { grid-template-columns: minmax(0, 1fr); }
.hv .pf-kinds { flex-wrap: wrap; }
.hv .pf-kinds button { flex: 1 1 80px; }
.trs-item .kind.k-open, .trs-chips .chip.k-open { color: var(--atm-primary); background: color-mix(in srgb, var(--atm-primary) 10%, transparent); }
.trs-item .kind.k-res, .trs-chips .chip.k-res { color: #b45309; background: rgb(245 158 11 / .14); }
.trs-item .kind.k-done, .trs-chips .chip.k-done { color: var(--pf-pay); background: color-mix(in srgb, var(--pf-pay) 12%, transparent); }
.trs-item .kind.k-off, .trs-chips .chip.k-off { color: var(--atm-muted); background: var(--atm-soft); text-decoration: line-through; }
.pf-item-card .trs-item__amts { justify-content: space-between; gap: 8px; }
.pf-item-card .pf-cust { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pf-item-card .pf-amt { color: var(--atm-text); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }

/* ─────────────── سربرگ ─────────────── */
/* «O» و «H» ِ چاپ‌های WPF: یک حرف، فشرده */
.pf .pf-print-key { min-width: 42px; padding: 0 12px; font-weight: 800; letter-spacing: .02em; }
.pf-nav { display: inline-flex; gap: 2px; }
.pf-nav .atm-icon-btn { width: 30px; height: 30px; }
.pf .pf-head__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-head__grid .pf-f--cust { grid-column: span 2; }
.pf-head__grid .trs-acc label { font-size: .78rem; font-weight: 700; color: var(--atm-muted); }
.pf-checks { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 10px; }
.pf-textarea { height: auto; min-height: 70px; padding: 10px 14px; resize: vertical; line-height: 1.7; }
.pf-ro-multi { height: auto; min-height: 44px; padding: 10px 14px; white-space: pre-wrap; align-items: flex-start; }
.pf-code { margin-inline-start: 8px; color: var(--atm-muted); direction: ltr; font-variant-numeric: tabular-nums; }
.pf-bal { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pf-bal.pos { color: var(--trs-rec); background: color-mix(in srgb, var(--trs-rec) 10%, transparent); }
.pf-bal.neg { color: var(--trs-pay); background: color-mix(in srgb, var(--trs-pay) 10%, transparent); }

/* ─────────────── جدولِ اقلام ─────────────── */
.pf-table-wrap { overflow-x: auto; border: 1px solid var(--atm-line); border-radius: 14px; background: var(--atm-surface); }
.pf-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: .84rem; }
.pf-table th {
    position: sticky; top: 0; z-index: 1; padding: 9px 10px; text-align: start; white-space: nowrap;
    font-size: .72rem; font-weight: 700; color: var(--atm-muted); background: var(--atm-soft); border-bottom: 1px solid var(--atm-line);
}
.pf-table td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--atm-line) 60%, transparent); vertical-align: middle; }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table tbody tr:hover td { background: color-mix(in srgb, var(--atm-primary) 4%, transparent); }
.pf-table tr.is-editing td { background: color-mix(in srgb, var(--atm-primary) 9%, transparent); }
.pf-table tr.is-flash td { animation: trs-flash 1.6s ease-out; }
.pf-table tr.is-reward td { background: color-mix(in srgb, #0ea5e9 7%, transparent); }
.pf-table .n { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-table .strong { font-weight: 800; }
.pf-table .disc { color: var(--pf-disc); }
.pf-table .no { color: var(--atm-muted); text-align: center; width: 34px; }
.pf-table .item { min-width: 200px; }
.pf-table .item b { display: block; font-weight: 600; }
.pf-table .item small { color: var(--atm-muted); font-size: .72rem; direction: ltr; display: inline-flex; gap: 6px; align-items: center; }
.pf-table .note { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--atm-muted); }
.pf-table .act { white-space: nowrap; width: 76px; text-align: end; }
.pf-tag { padding: 0 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #0369a1; background: rgb(14 165 233 / .14); direction: rtl; }

/* ─────────────── ورودِ سطر ─────────────── */
.pf-ed__title { margin: 14px 0 6px; font-size: .8rem; font-weight: 800; color: var(--atm-primary); display: flex; gap: 6px; align-items: center; }
.pf-ed {
    margin-top: 12px; padding: 12px; border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--atm-primary) 45%, transparent);
    background: color-mix(in srgb, var(--atm-primary) 3%, var(--atm-surface));
}
.pf-ed.is-edit { margin-top: 0; border-style: solid; border-color: var(--atm-primary); box-shadow: 0 18px 40px -32px color-mix(in srgb, var(--atm-primary) 80%, transparent); }
.pf-ed__grid {
    display: grid; gap: 10px; align-items: end;
    grid-template-columns: 150px minmax(220px, 2fr) 130px repeat(2, minmax(90px, 1fr)) repeat(2, minmax(120px, 1.2fr));
}
.pf-f { display: grid; gap: 4px; min-width: 0; }
.pf-f > label { font-size: .7rem; font-weight: 700; color: var(--atm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-f--item .mud-input-control { margin: 0; }
.pf-f--item .mud-input.mud-input-outlined { border-radius: 12px; background: var(--atm-surface); }
.pf-f--item .mud-input-outlined-border { border-radius: 12px; }
.pf-f--note { grid-column: span 2; }
.pf-ed .atm-input { height: 40px; }
.pf-ed select.atm-input { appearance: auto; padding: 0 8px; }
.pf .pf-num {
    width: 100%; height: 40px; padding: 0 10px;
    border-radius: 12px; border: 1px solid var(--atm-line);
    background: var(--atm-surface); color: var(--atm-text);
    font-family: inherit; font-size: .98rem; font-weight: 700; outline: none; font-variant-numeric: tabular-nums;
}
.pf .pf-num--strong { font-weight: 900; }
.pf .pf-num:focus { border-color: color-mix(in srgb, var(--atm-primary) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--atm-primary) 14%, transparent); }
.pf .pf-num:disabled { opacity: .62; background: var(--atm-soft); cursor: not-allowed; }
.pf-ro { height: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; border-radius: 12px; background: var(--atm-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-ed__act { display: flex; gap: 4px; justify-content: flex-end; align-self: end; }
.pf-ed__act .atm-btn--icon { width: 38px; height: 38px; padding: 0; }
.pf-ed__aux { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: .74rem; color: var(--atm-muted); }
.pf-ed__aux .stk { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; color: var(--trs-rec); font-variant-numeric: tabular-nums; }
.pf-ed__aux .stk.low { color: var(--atm-urgent); }
.pf-ed__aux .warn { display: inline-flex; gap: 5px; align-items: center; color: #b45309; font-weight: 600; }
.pf-ed__aux .lock { display: inline-flex; gap: 5px; align-items: center; }
.pf-ed__aux .keys { margin-inline-start: auto; opacity: .8; }
.pf-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; }
.pf-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-item .cd { color: var(--atm-muted); direction: ltr; font-size: .76rem; flex: none; }

/* ─────────────── جمع‌ها ─────────────── */
.pf-totals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pf-totals > span {
    flex: 1 1 140px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px;
    background: var(--atm-soft); border: 1px solid var(--atm-line);
}
.pf-totals small { font-size: .72rem; color: var(--atm-muted); font-weight: 700; }
.pf-totals b { font-size: 1.02rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pf-totals .disc b { color: var(--pf-disc); }
.pf-totals .pay { background: color-mix(in srgb, var(--pf-pay) 10%, var(--atm-surface)); border-color: color-mix(in srgb, var(--pf-pay) 30%, transparent); }
.pf-totals .pay b { color: var(--pf-pay); font-size: 1.15rem; }

/* ─────────────── واکنش‌گرا ─────────────── */
/* ستونِ جزئیات: جدولِ پهنِ اقلام باید در قابِ خودش اسکرول شود، نه کلِ ستون را تا ۱۱۰۰px پهن کند (روی موبایل بیرون می‌زد) */
.pf .trs-detail { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1280px) {
    .pf-ed__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pf-f--item { grid-column: span 2; }
}
@media (max-width: 760px) {
    .pf .pf-head__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-ed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-f--item, .pf-f--note, .pf-head__grid .pf-f--cust { grid-column: 1 / -1; }
}

/* ─────────────── تخفیف کلی (Ctrl+T ِ WPF) ─────────────── */
.pf-overall { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pf-overall label { font-size: .78rem; font-weight: 700; color: var(--atm-muted); display: inline-flex; gap: 6px; align-items: center; }
.pf-overall .atm-input { width: 220px; height: 40px; }
.pf-prevcust { justify-self: start; font-size: .76rem; display: inline-flex; gap: 6px; align-items: center; }
/* ─────────────── پنجره‌ی جستجوی «+» (SERCHK / ComboSearch ِ WPF) ─────────────── */
.pf-search { direction: rtl; }
.pf-search__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pf-search__bar > span { font-size: .8rem; font-weight: 700; color: var(--atm-muted); white-space: nowrap; }
.pf-search__bar .pay2-input { flex: 1; height: 40px; }
.pf-search__list { max-height: 60vh; min-height: 140px; overflow: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.pf-search__list .p2-table { width: 100%; font-size: .78rem; }
.pf-search__list thead th { position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface); white-space: nowrap; }
.pf-search__list tbody tr { cursor: pointer; }
.pf-search__list tbody tr.is-active td { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.pf-search__list td.num { direction: ltr; text-align: right; white-space: nowrap; }
.pf-search__state { padding: 18px; text-align: center; color: var(--atm-muted); font-size: .82rem; }
.pf-search__state.is-error { color: var(--mud-palette-error); }
.pf-search__keys { margin-inline-end: auto; font-size: .72rem; color: var(--atm-muted); }
/* ─────────────── قفلِ «تبدیل شده / امضا شده»: هشدار، نه خطا ─────────────── */
.pf .trs-lock {
    color: color-mix(in srgb, var(--atm-warn) 55%, var(--atm-text));
    background: color-mix(in srgb, var(--atm-warn) 12%, transparent);
    border-color: color-mix(in srgb, var(--atm-warn) 35%, transparent);
}

/* ─────────────── فهرستِ باز روی کارت‌های بعدی ───────────────
   هر کارت (.trs-card) لایه‌ی جدا می‌سازد؛ فهرستِ کمبوی انبار زیرِ کارتِ امضا و فهرست‌های سربرگ زیرِ کارتِ
   اقلام می‌رفت. کارتی که فهرستِ باز دارد بالای بقیه (و بالای نوارِ چسبانِ امضا) می‌آید. */
.pf .trs-card:has(.pay2-combo.open) { position: relative; z-index: 20; }

/* ─────────────── امضاها: جمع‌وجور ─────────────── */
.pf .trs-stamp { padding: 5px 8px; gap: 6px; border-radius: 12px; }
.pf .trs-stamp:not(.is-on) .trs-stamp__seal { display: none; } /* «؟» ِ امضا نشده چیزی نمی‌گفت و جا می‌گرفت */
.pf .trs-stamp__seal { width: 22px; height: 22px; font-size: .8rem; }
.pf .trs-stamp.is-on .trs-stamp__seal { box-shadow: none; }
.pf .trs-stamp .atm-btn.trs-stamp__btn {
    width: 26px; height: 26px; border-radius: 8px; font-size: .78rem;
    background: transparent; box-shadow: none;
    color: var(--atm-primary); border: 1px solid color-mix(in srgb, var(--atm-primary) 35%, transparent);
}
.pf .trs-stamp .atm-btn.trs-stamp__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--atm-primary) 10%, transparent); }
.pf .trs-stamp .atm-btn.trs-stamp__btn:disabled { opacity: .4; cursor: not-allowed; }
.pf .trs-stamp.is-on .atm-btn.trs-stamp__btn { color: var(--atm-muted); border-color: var(--atm-line); }
/* خانه‌ی کالا تا چیزی تایپ نشده جستجو نمی‌کند: «موردی یافت نشد» ِ فوکوسِ اول (مثلاً بلافاصله بعد از «ایجاد»)
   گمراه‌کننده بود و پرده‌ی شفافش کلیکِ بعدی را می‌خورد — تا وقتی خانه خالی است نه فهرست، نه پرده */
.pf .pf-ed [data-f=item] .pay2-combo:has(.pay2-select-input:placeholder-shown):has(.pay2-select-empty) .pay2-select-menu,
.pf .pf-ed [data-f=item] .pay2-combo:has(.pay2-select-input:placeholder-shown):has(.pay2-select-empty) .pay2-select-backdrop { display: none; }

/* ─────────────── دیالوگِ آموزش: فصل‌ها زیرِ فیلم ─────────────── */
.pf-guide { max-height: calc(100dvh - 32px); overflow-y: auto; }
.pf-guide video { max-height: calc(100dvh - 210px); object-fit: contain; }
.pf-guide__ch { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; }
.pf-guide__ch button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .14);
    background: rgb(255 255 255 / .07); color: #fff; font: inherit; font-size: .78rem; cursor: pointer; }
.pf-guide__ch button:hover { background: rgb(255 255 255 / .16); }
.pf-guide__ch em { font-style: normal; opacity: .55; }
.pf-guide__ch small { opacity: .5; direction: ltr; font-size: .7rem; }

/* «سایر اطلاعات» ِ حواله (Ctrl+G) — دیالوگ بیرون از درختِ صفحه رندر می‌شود؛ متغیرها از atm-tokens می‌آیند */
.hv-other { direction: rtl; }
.hv-other .pf-table { min-width: 0; }
.hv-other .pf-table .atm-input { height: 34px; min-width: 80px; }
.hv-other .pf-table td.n .atm-input { width: 110px; }