/* KOJAK rep app · the transaction form in the rep's words, the scan sheet's totals, and the voucher page (owner decisions
   2026-09-22). Colours from shared/tokens.css only. */

/* ── the party picker ── */
.kind-tabs { margin-bottom: var(--kj-sp-3); }
.kind-tabs button, .ops-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pick-row { display: flex; align-items: center; gap: var(--kj-sp-3); width: 100%; padding: var(--kj-sp-3) var(--kj-sp-4); background: var(--kj-white); border: 0.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-xl); font: inherit; color: inherit; text-align: start; cursor: pointer; }
.pick-row:active { border-color: var(--kj-gold); background: var(--kj-gold-cream); }

/* ── the balance boxes: before the transaction (top), after it (the bar at the bottom) ── */
.bboxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kj-sp-2); }
.bbox { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: var(--kj-white); border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); }
.bbox__label { font-size: var(--kj-fs-sm); color: var(--kj-gray-600); font-weight: var(--kj-fw-medium); }
.bbox__val { font-size: var(--kj-fs-xl); font-weight: var(--kj-fw-medium); line-height: 1.3; }
.bbox__val .amt { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; max-width: 100%; }
.bbox__val .amt small { font-size: var(--kj-fs-sm); color: var(--kj-gray-500); font-weight: var(--kj-fw-normal); }
.bbox__sub { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.bbox__sub .amt { font-size: var(--kj-fs-xs); font-weight: var(--kj-fw-medium); }

/* ── the party on top of the form ── */
.tparty { padding: 12px 14px 14px; background: var(--kj-cream-bg); border: 1px solid var(--kj-gold); border-radius: var(--kj-radius-xl); margin-bottom: var(--kj-sp-3); }
.tparty__row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--kj-sp-3); }
.tparty__body { flex: 1; min-width: 0; }
.tparty__name { font-weight: var(--kj-fw-medium); font-size: var(--kj-fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tparty__sub { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--kj-fs-sm); color: var(--kj-gray-500); }

/* ── sections: بيع · مرتجع · سداد · أخرى ── */
.sec { margin-top: var(--kj-sp-3); background: var(--kj-white); border: 0.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-xl); overflow: hidden; }
.sec__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-inline-start: 4px solid var(--kj-gray-300); background: var(--kj-gray-100); }
.sec__head > .kj-icon:first-child { color: var(--kj-gray-600); }
.sec--out .sec__head { border-color: var(--kj-success); background: var(--kj-success-soft); }
.sec--out .sec__head > .kj-icon:first-child { color: var(--kj-success-deep); }
.sec--in .sec__head { border-color: var(--kj-warning); background: var(--kj-warning-soft); }
.sec--in .sec__head > .kj-icon:first-child { color: var(--kj-warning-deep); }
.sec--pay .sec__head { border-color: var(--kj-info); background: var(--kj-info-soft); }
.sec--pay .sec__head > .kj-icon:first-child { color: var(--kj-info-deep); }
.sec__title { flex: 1; min-width: 0; }
.sec__title b { display: block; font-size: var(--kj-fs-lg); font-weight: var(--kj-fw-medium); line-height: 1.2; }
.sec__title small { font-size: var(--kj-fs-sm); color: var(--kj-gray-600); }
.sec__badge { background: var(--kj-white); }
/* every section folds: its head is the toggle */
.sec__head { cursor: pointer; user-select: none; }
.sec__head > .kj-icon:last-child { color: var(--kj-gray-500); transition: transform var(--kj-transition-fast); }
.sec--collapsed .sec__head > .kj-icon:last-child { transform: rotate(180deg); }
.sec--collapsed .sec__body { display: none; }
.sec__body { padding: 12px; }
.sec__entry { display: flex; flex-direction: column; gap: var(--kj-sp-2); }
.sec__acts { display: flex; gap: var(--kj-sp-2); flex-wrap: wrap; }
.sec-btn { flex: 1 1 calc(50% - 4px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); background: transparent; color: var(--kj-gold-deep); font: inherit; font-size: var(--kj-fs-base); font-weight: var(--kj-fw-medium); cursor: pointer; }
.sec-btn:active { background: var(--kj-gold-cream); }
.sec-btn--wide { flex: 1 1 100%; width: 100%; }

/* a group row: its name with karat and price beside it, and the weight typed in place */
.grows { display: flex; flex-direction: column; gap: var(--kj-sp-2); }
.grow { display: flex; align-items: center; gap: var(--kj-sp-3); width: 100%; padding: 10px 12px; background: var(--kj-white); border: 1px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); font: inherit; color: inherit; text-align: start; transition: border-color var(--kj-transition-fast), background var(--kj-transition-fast); }
.grow.is-filled { border-color: var(--kj-gold); background: var(--kj-gold-cream); }
.grow.is-invalid { border-color: var(--kj-danger); }
.grow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grow__name { display: flex; align-items: center; gap: 4px; font-weight: var(--kj-fw-medium); font-size: var(--kj-fs-md); overflow-wrap: anywhere; }
.grow__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--kj-radius-full); background: var(--kj-gray-100); color: var(--kj-gray-700); font-size: var(--kj-fs-sm); white-space: nowrap; }
.grow.is-filled .tag { background: var(--kj-white); }
/* the price of a group for this party: tapped to change it */
.tag--edit { gap: 4px; border: 1px solid var(--kj-gray-200); background: var(--kj-white); color: var(--kj-gold-deep); font: inherit; font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); cursor: pointer; }
.tag--edit:active { background: var(--kj-gold-cream); }
.tag--edit .kj-icon { width: 12px; height: 12px; }
.grow__labor { font-size: var(--kj-fs-sm); color: var(--kj-gold-deep); font-weight: var(--kj-fw-medium); }
.grow__labor:empty { display: none; }
.wbox { flex: 0 0 132px; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; background: var(--kj-white); border: 1.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); cursor: text; transition: border-color var(--kj-transition-fast), box-shadow var(--kj-transition-fast); }
.wbox:focus-within { border-color: var(--kj-gold); box-shadow: var(--kj-focus-ring); }
.wbox__input { flex: 1 1 auto; width: 100%; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--kj-ink); font: inherit; font-size: 20px; font-weight: var(--kj-fw-medium); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.wbox__input::placeholder { color: var(--kj-gray-300); }
.wbox__unit { flex: none; font-size: var(--kj-fs-base); color: var(--kj-gray-500); }
.wbox--sm { flex-basis: 150px; height: 42px; }
.wbox--sm .wbox__input { height: 38px; font-size: 16px; }
.grow--scan { cursor: pointer; }
.grow--scan .grow__name .kj-icon { color: var(--kj-gold-deep); }
.grow__scan { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: var(--kj-radius-lg); background: var(--kj-dark); color: var(--kj-gold); font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); }

/* «ما أدخلته»: a divider, one line per group or line, the section's total */
.sec__sum { margin-top: var(--kj-sp-3); padding-top: var(--kj-sp-2); border-top: 1px solid var(--kj-gray-200); }
.sline { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px 28px; align-items: center; gap: 6px; padding: 8px 2px; border-bottom: 0.5px solid var(--kj-gray-100); font-size: var(--kj-fs-base); }
.sline--tap { cursor: pointer; }
.sline--tap:active { background: var(--kj-gray-100); }
.sline__name { min-width: 0; display: flex; flex-direction: column; }
.sline__name b { font-weight: var(--kj-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sline__name small { font-size: var(--kj-fs-xs); color: var(--kj-gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sline__w, .sline__c { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sline__x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--kj-radius-full); background: transparent; color: var(--kj-gray-400); cursor: pointer; }
button.sline__x:active { background: var(--kj-danger-soft); color: var(--kj-danger-deep); }
.sline--head { padding-top: 2px; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); border-bottom: 0.5px solid var(--kj-gray-200); }
.sline--head .sline__name { font-weight: var(--kj-fw-medium); color: var(--kj-gray-600); }
.sline--total { border-bottom: 0; border-top: 1.5px solid var(--kj-gray-300); margin-top: 2px; font-weight: var(--kj-fw-medium); }
.sline--total .sline__w, .sline--total .sline__c { font-size: var(--kj-fs-md); color: var(--kj-dark); }
.sgroup { border-bottom: 0.5px solid var(--kj-gray-100); }
.sgroup .sline { border-bottom: 0; }
.sgroup__price { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; padding: 6px 10px; border-radius: var(--kj-radius-md); background: var(--kj-gold-cream); font-size: var(--kj-fs-sm); color: var(--kj-gold-deep); }
.sgroup__cards { padding: 0 4px 6px; }
.scard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 28px; gap: 6px; align-items: center; padding: 4px 0; border-top: 0.5px solid var(--kj-gray-100); font-size: var(--kj-fs-sm); }
.scard__code { color: var(--kj-gray-600); font-variant-numeric: tabular-nums; }
.scard__desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kj-gray-700); }
.scard__w, .scard__c { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.scard__w small { color: var(--kj-gray-500); }
.scard__c { min-width: 52px; }
.txn-note { margin-top: var(--kj-sp-4); }
.txn-cancel { margin-top: var(--kj-sp-2); color: var(--kj-danger-deep); }

/* ── the bar at the bottom: the balance after the transaction, تعليق · حفظ ── */
.view.txn-view.has-sticky { padding-bottom: calc(var(--kj-safe-bottom) + 210px); }
.txn-bar { padding: 10px var(--kj-sp-4); }
.txn-bar.is-typing { display: none; }
.txn-bar__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--kj-sp-2); }
.txn-bar .bbox { padding: 8px 10px; background: var(--kj-cream-bg); border-color: var(--kj-gold-soft); }
.txn-bar .bbox__val { font-size: var(--kj-fs-lg); }
.txn-bar__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--kj-sp-2); }
.txn-bar__btns .btn { min-height: 46px; }
.txn-bar__save:only-child { grid-column: 1 / -1; }

/* ── the scan sheet: totals, and a tag read again ── */
.scan__type { font-size: var(--kj-fs-sm); text-align: center; margin-top: 2px; }
.scan__count--weight .scan__count-val { font-size: var(--kj-fs-2xl); line-height: 1.35; }
.scan__count-note--c { color: var(--kj-gold-deep); font-weight: var(--kj-fw-medium); }
.scan__dup { position: absolute; inset-inline: 12%; top: 12%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--kj-radius-xl); background: var(--kj-success-deep); color: var(--kj-white); font-size: var(--kj-fs-lg); font-weight: var(--kj-fw-bold); box-shadow: var(--kj-shadow-lg); pointer-events: none; }
.scan__dup--bad { background: var(--kj-danger-deep); }
.scan__dup.is-on { animation: dupin .25s ease-out; }
@keyframes dupin { from { transform: scale(0.85); opacity: 0; } }
.item--dup { animation: dupflash 1.2s ease-out; }
@keyframes dupflash { 0%, 40% { background: var(--kj-success-soft); border-color: var(--kj-success); box-shadow: 0 0 0 3px var(--kj-success-soft); } 100% { background: var(--kj-white); } }
@media (prefers-reduced-motion: reduce) { .scan__dup.is-on, .item--dup { animation: none; } }

/* ── after the save: the voucher and the ways out ── */
.txn-saved { margin-bottom: var(--kj-sp-3); align-items: center; }
.txn-saved b { display: block; font-size: var(--kj-fs-md); }
.share-bar { margin-bottom: var(--kj-sp-4); }
.share-pdf .kj-icon { color: var(--kj-gold); }
.txn-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kj-sp-2); margin-top: var(--kj-sp-4); }
.txn-actions .btn { min-width: 0; }
.txn-del { color: var(--kj-danger-deep); }

/* ── the voucher document ── */
.vdoc { padding: var(--kj-sp-4); }
.vdoc__head { padding-bottom: var(--kj-sp-3); border-bottom: 1px solid var(--kj-gold); }
.vdoc__head h2 { font-size: var(--kj-fs-2xl); }
.vdoc__date { margin-top: 2px; font-size: var(--kj-fs-base); color: var(--kj-gray-600); }
.vdoc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kj-sp-3); padding: var(--kj-sp-3) 0; border-bottom: 0.5px solid var(--kj-gray-200); }
.vdoc__who { min-width: 0; }
.vdoc__who small { display: block; font-size: var(--kj-fs-xs); color: var(--kj-gray-500); }
.vdoc__who b { font-weight: var(--kj-fw-medium); overflow-wrap: anywhere; }
.vdoc__who .ltr { font-size: var(--kj-fs-sm); }
.vdoc__sec { margin-top: var(--kj-sp-3); }
.vdoc__sec-title { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: var(--kj-radius-md); background: var(--kj-gray-100); color: var(--kj-gray-700); font-weight: var(--kj-fw-medium); font-size: var(--kj-fs-base); }
.vdoc__sec-title small { font-weight: var(--kj-fw-normal); font-size: var(--kj-fs-xs); }
.vdoc__sec--out .vdoc__sec-title { background: var(--kj-success-soft); color: var(--kj-success-deep); }
.vdoc__sec--in .vdoc__sec-title { background: var(--kj-warning-soft); color: var(--kj-warning-deep); }
.vdoc__sec--pay .vdoc__sec-title { background: var(--kj-info-soft); color: var(--kj-info-deep); }
.vdoc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 4px; border-bottom: 0.5px solid var(--kj-gray-100); font-size: var(--kj-fs-sm); }
.vdoc__row-main { font-weight: var(--kj-fw-medium); font-size: var(--kj-fs-base); overflow-wrap: anywhere; }
.vdoc__row-sub { color: var(--kj-gray-500); font-size: var(--kj-fs-xs); }
.vdoc__row-amt { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vdoc__row-amt b { font-weight: var(--kj-fw-medium); }
.vdoc__row-price { font-size: var(--kj-fs-xs); }
.vdoc__sum { padding: 6px 4px; font-size: var(--kj-fs-sm); color: var(--kj-gray-700); font-variant-numeric: tabular-nums; }
/* the balance before, this transaction, the balance after — gold and labor side by side */
.vdoc__ledger { margin-top: var(--kj-sp-4); padding: 4px 12px 6px; background: var(--kj-gold-cream); border: 1px solid var(--kj-gold); border-radius: var(--kj-radius-lg); }
.vl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 8px 0; border-top: 0.5px solid var(--kj-gold-soft); font-size: var(--kj-fs-base); }
.vl--head { border-top: 0; padding-bottom: 2px; font-size: var(--kj-fs-xs); color: var(--kj-gray-600); font-weight: var(--kj-fw-medium); }
.vl > span:not(.vl__label) { text-align: center; }
.vl__label { color: var(--kj-dark); }
.vl--strong { border-top: 1.5px solid var(--kj-gold); font-size: var(--kj-fs-md); }
.vl--strong .vl__label { font-weight: var(--kj-fw-bold); }
.vdoc__val { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--kj-fs-sm); }
.vdoc__val b { font-weight: var(--kj-fw-medium); font-size: var(--kj-fs-base); }
.vl--strong .vdoc__val b { font-weight: var(--kj-fw-bold); font-size: var(--kj-fs-md); }
.vdoc__val.amt--zero { color: var(--kj-gray-500); }
.vdoc__note { display: flex; align-items: flex-start; gap: 4px; margin-top: var(--kj-sp-3); font-size: var(--kj-fs-sm); color: var(--kj-gray-700); }
.vdoc__foot { margin-top: var(--kj-sp-3); font-size: 10px; color: var(--kj-gray-500); }
@media (max-width: 360px) { .sline { grid-template-columns: minmax(0, 1fr) 76px 64px 26px; font-size: var(--kj-fs-sm); } .wbox { flex-basis: 116px; } }
@media print {
  .share-bar, .txn-actions, .txn-saved { display: none !important; }
  .vdoc { border: 0; box-shadow: none; padding: 0; }
}

/* «إضافة مجموعة»: the rep's own groups to pick from, a new one last */
.gpicks { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 var(--kj-sp-4); }
.gpicks__msg { padding: 12px; font-size: var(--kj-fs-base); text-align: center; }
.gpick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; background: var(--kj-white); border: 1.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); font: inherit; color: inherit; text-align: start; cursor: pointer; }
.gpick.is-active { border-color: var(--kj-gold); background: var(--kj-gold-cream); }
.gpick__dot { flex: none; width: 18px; height: 18px; border-radius: var(--kj-radius-full); border: 2px solid var(--kj-gray-300); background: var(--kj-white); }
.gpick.is-active .gpick__dot { border: 5px solid var(--kj-gold-deep); }
.gpick__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-weight: var(--kj-fw-medium); }
.gpick__sub { flex: none; font-size: var(--kj-fs-sm); color: var(--kj-gray-500); }
.gpick--new .gpick__name { color: var(--kj-gold-deep); }
.gpicks__new { margin-bottom: var(--kj-sp-2); }
.tform__for { margin: 0 0 var(--kj-sp-3); font-size: var(--kj-fs-base); color: var(--kj-gray-600); }

/* «آخر زيارة» (new transaction): in the party's box, under the balance after a light divider — a line per section, in the
   section's icon and color */
.tlast { margin-top: var(--kj-sp-3); padding-top: var(--kj-sp-3); border-top: 1px solid var(--kj-gold-soft); }
.tlast__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tlast__head b { font-size: var(--kj-fs-md); font-weight: var(--kj-fw-medium); }
.tlast__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--kj-radius-full); background: var(--kj-gold-soft); color: var(--kj-gold-deep); }
.tlast__when { margin-inline-start: auto; padding: 2px 10px; border-radius: var(--kj-radius-full); background: var(--kj-white); font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gray-700); white-space: nowrap; }
.tlast__line { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: var(--kj-fs-md); line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tlast__line b { font-weight: var(--kj-fw-bold); }
.tlast__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--kj-radius-full); background: var(--kj-gray-100); color: var(--kj-gray-600); }
.tlast__line--out .tlast__dot { background: var(--kj-success-soft); color: var(--kj-success-deep); }
.tlast__line--out b { color: var(--kj-success-deep); }
.tlast__line--in .tlast__dot { background: var(--kj-warning-soft); color: var(--kj-warning-deep); }
.tlast__line--in b { color: var(--kj-warning-deep); }
.tlast__line--pay .tlast__dot { background: var(--kj-info-soft); color: var(--kj-info-deep); }
.tlast__line--pay b { color: var(--kj-info-deep); }
.tlast__line.is-none { color: var(--kj-gray-500); }
.tlast__line.is-none .tlast__dot { background: var(--kj-white); color: var(--kj-gray-400); }
.tlast__note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: var(--kj-radius-lg); background: var(--kj-white); font-size: var(--kj-fs-base); color: var(--kj-gray-700); overflow-wrap: anywhere; }
.tlast__note .kj-icon { flex: none; margin-top: 3px; color: var(--kj-gold-mid); }

/* before saving: what was entered, and the balance it leaves as a sentence */
.presave__for { margin: 0; font-weight: var(--kj-fw-medium); color: var(--kj-gray-700); }
.presave__h { margin-top: var(--kj-sp-3); font-size: var(--kj-fs-sm); font-weight: var(--kj-fw-medium); color: var(--kj-gray-500); }
.presave__h--after { padding-top: var(--kj-sp-3); border-top: 1px solid var(--kj-gray-200); }
.presave .visit__line { margin-top: 4px; }
.presave__bal { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--kj-sp-2); }
.presave__bal > .kj-icon { flex: none; margin-top: 4px; color: var(--kj-gold-deep); }
.presave__say { font-size: var(--kj-fs-md); line-height: 1.6; overflow-wrap: anywhere; }
.presave__say b { font-weight: var(--kj-fw-bold); font-variant-numeric: tabular-nums; }