/* ERP UI kit (public/js/admin/erp-ui.js). Tokens from admin.css only (--panel --line --ink --muted --brand --accent --ok --warn --danger --info + *-soft);
   logical properties everywhere so RTL just works; touch targets >= 40px on phone. */

/* ------------------------------------------------------------ status bar (chevron breadcrumb) */
.sb { min-width: 0; max-width: 100%; }
.sb-steps { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sb-step { flex: 0 0 auto; margin-inline-start: -10px; }
.sb-step:first-child { margin-inline-start: 0; }
.sb-btn { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 24px 20px; border: 0; background: var(--panel-3); color: var(--muted); font-weight: 650; font-size: 13px; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.sb-step:first-child .sb-btn { padding-inline-start: 16px; border-start-start-radius: 17px; border-end-start-radius: 17px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
:root[dir="rtl"] .sb-btn { clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%, calc(100% - 12px) 50%); }
:root[dir="rtl"] .sb-step:first-child .sb-btn { clip-path: polygon(100% 0, 12px 0, 0 50%, 12px 100%, 100% 100%); }
button.sb-btn { cursor: pointer; font-family: inherit; }
button.sb-btn:hover { filter: brightness(.96); color: var(--ink); }
button.sb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sb-step.done .sb-btn { background: var(--accent-soft); color: var(--accent-d); }
.sb-step.current .sb-btn, .sb-pill { background: var(--accent-solid); color: #fff; }
:root[data-theme="dark"] .sb-step.current .sb-btn, :root[data-theme="dark"] .sb-pill { color: #06201d; }
.sb-step.current.kind-danger .sb-btn, .sb-pill.kind-danger { background: var(--danger); color: #fff; }
.sb-step.current.kind-warn .sb-btn, .sb-pill.kind-warn { background: var(--warn); color: #fff; }
.sb-step.current.kind-ok .sb-btn, .sb-pill.kind-ok { background: var(--ok); color: #fff; }
:root[data-theme="dark"] .sb-step.current.kind-danger .sb-btn, :root[data-theme="dark"] .sb-pill.kind-danger,
:root[data-theme="dark"] .sb-step.current.kind-warn .sb-btn, :root[data-theme="dark"] .sb-pill.kind-warn,
:root[data-theme="dark"] .sb-step.current.kind-ok .sb-btn, :root[data-theme="dark"] .sb-pill.kind-ok { color: #16100b; }
.sb-compact { display: none; align-items: center; gap: 10px; }
.sb-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 13px; }

/* ------------------------------------------------------------ document header */
.doc-head { display: contents; }
.dh-sentinel { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; }
.dh-bar { position: sticky; top: 62px; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.dh-bar .icon-btn.back { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }
.dh-title { display: grid; min-width: 0; flex: 1 1 220px; }
.dh-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.dh-number { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.dh-name { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dh-ribbon { padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--ok-soft); color: var(--ok-ink); }
.dh-ribbon.kind-danger { background: var(--danger-soft); color: var(--danger-ink); }
.dh-ribbon.kind-warn { background: var(--warn-soft); color: var(--warn-ink); }
.dh-ribbon.kind-info { background: var(--info-soft); color: var(--info-ink); }
.dh-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dh-status { margin-inline-start: auto; min-width: 0; max-width: 100%; }
.dh-smart { display: flex; flex-wrap: wrap; gap: 8px; }
.smart-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px 6px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); text-align: start; transition: border-color .15s, background .15s; }
:root[dir="rtl"] .smart-btn { padding: 6px 14px 6px 16px; }
.smart-btn .ico { color: var(--accent-d); }
.smart-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.sm-txt { display: grid; line-height: 1.2; }
.sm-count { font-size: 15px; font-variant-numeric: tabular-nums; }
.sm-label { font-size: 12px; color: var(--muted); font-weight: 650; }
.smart-btn.zero .ico, .smart-btn.zero .sm-count { color: var(--muted); }
.btn.is-busy { position: relative; color: transparent; }
.btn.is-busy > * { opacity: 0; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); border-top-color: var(--accent); animation: erp-spin .7s linear infinite; }
.btn-primary.is-busy::after { border-color: rgba(255, 255, 255, .5); border-top-color: #fff; }
@keyframes erp-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ document page layout */
.doc-page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.dp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-page.has-side .dp-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.dp-main, .dp-side { min-width: 0; }
.dp-side { display: grid; gap: 16px; align-content: start; }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 22px; }
.side-card h3 { font-size: 14px; margin-bottom: 12px; }
.dp-footer { display: grid; gap: 16px; }
.fields-grid .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields-ro .field input:disabled, .fields-ro .field select:disabled, .fields-ro .field textarea:disabled { background: transparent; border-color: transparent; padding-inline: 0; color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; appearance: none; background-image: none; font-weight: 600; }
.fields-ro .ss.readonly .ss-input { border-color: transparent; background: transparent; padding-inline: 0; -webkit-text-fill-color: var(--ink); font-weight: 600; }
.fields-ro .field-toggle { background: transparent; border-color: transparent; padding-inline: 0; }
@media (max-width: 1100px) { .doc-page.has-side .dp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .dh-bar { top: 108px; } }
@media (max-width: 720px) {
  .dh-bar { padding: 8px 12px; gap: 8px 10px; }
  .dh-eyebrow { display: none; }
  .dh-number { font-size: 18px; }
  .dh-title { flex: 1 1 0; }
  .dh-status { margin-inline-start: 0; flex: 1 1 100%; order: 3; }
  .dh-actions { flex: 1 1 100%; order: 4; }
  .dh-actions .btn { flex: 1 1 auto; min-height: 42px; }
  .sb-steps { display: none; }
  .sb-compact { display: flex; }
  .dh-bar.is-stuck { flex-wrap: nowrap; }
  .dh-bar.is-stuck .dh-status, .dh-bar.is-stuck .dh-actions .btn:not(.btn-primary) { display: none; }
  .dh-bar.is-stuck .dh-title { flex: 1 1 0; }
  .dh-bar.is-stuck .dh-actions { flex: 0 0 auto; order: 0; }
  .dh-bar.is-stuck .dh-actions .btn { flex: 0 0 auto; }
  .dh-smart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-btn { min-height: 48px; }
  .sheet { padding: 14px; }
  .fields-grid .form-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ totals */
.totals-box { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.tb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; }
.tb-label { min-width: 0; overflow-wrap: anywhere; }
.tb-val { font-weight: 650; text-align: end; white-space: nowrap; }
.tb-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 800; }
.tb-row.total .tb-val { font-weight: 800; }
.tb-row.sub { color: var(--muted); border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; }
.tb-row.wht .tb-label { color: var(--warn-ink); }
.tb-row.paid { font-size: 13px; color: var(--muted); font-style: italic; }
.tb-row.due { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 18px; font-weight: 800; background: var(--warn-soft); color: var(--warn-ink); }
.tb-row.due .tb-val { font-weight: 800; }
.tb-row.due.settled { background: var(--ok-soft); color: var(--ok-ink); }
.tb-val.neg { color: inherit; }

/* ------------------------------------------------------------ searchable combobox */
.ss { position: relative; display: block; min-width: 0; }
.ss-input { width: 100%; min-height: 40px; padding: 8px 34px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; text-overflow: ellipsis; }
:root[dir="rtl"] .ss-input { padding: 8px 12px 8px 34px; }
.ss-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ss-input:disabled { background: var(--panel-3); color: var(--muted); }
.ss-clear { position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.ss-clear:hover { background: var(--panel-3); color: var(--ink); }
.ss-pop { position: fixed; z-index: 400; margin: 0; padding: 4px; list-style: none; overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.ss-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.ss-opt.active { background: var(--accent-soft); }
.ss-opt[aria-selected="true"] .ss-main { font-weight: 750; }
.ss-main { display: grid; min-width: 0; overflow-wrap: anywhere; }
.ss-sub { color: var(--muted); font-size: 12px; font-weight: 500; }
.ss-right { color: var(--brand); font-weight: 700; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-create { justify-content: flex-start; color: var(--accent-d); font-weight: 650; }
.ss-status { padding: 12px; color: var(--muted); text-align: center; font-size: 13px; }

/* ------------------------------------------------------------ lines editor */
.le { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; container: le / inline-size; }
.le-wrap { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.le-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13.5px; }
.le.readonly .le-table { min-width: 0; }
.le-table th { text-align: start; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.le-table th.num, .le-table td.num { text-align: end; }
.le-table td { padding: 4px 5px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.le-table tbody tr:last-child td { border-bottom: 0; }
.le-table td.t-product { min-width: 230px; }
.le-table td.t-text { min-width: 170px; }
.le-h { width: 32px; padding-inline: 2px !important; }
.le-x { width: 44px; padding-inline: 2px !important; }
.le-in { width: 100%; min-height: 38px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; outline: 0; }
.le-in:hover, .le-row .ss-input:hover { border-color: var(--line); }
.le-in:focus, .le-row .ss-input:focus { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.le-row .ss-input { min-height: 38px; border-color: transparent; background: transparent; padding-block: 6px; }
.le-in.num { text-align: end; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.le-in.num::-webkit-inner-spin-button, .le-in.num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select.le-in { cursor: pointer; }
.le-static { display: block; padding: 0 8px; min-height: 22px; overflow-wrap: anywhere; }
.le-static.num { text-align: end; font-variant-numeric: tabular-nums; }
.le-grip { display: inline-grid; place-items: center; width: 28px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: grab; }
.le-grip:hover { background: var(--panel-3); color: var(--ink); }
.le-del { opacity: .5; }
.le-line:hover .le-del, .le-del:focus-visible { opacity: 1; }
.le-section td { background: var(--panel-2); }
.le-sec { font-weight: 800; font-size: 14px; }
.le-notein { font-style: italic; color: var(--muted); }
.le-calc { display: block; padding: 0 8px; text-align: end; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.le-taxes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.le-chip { padding: 2px 8px; font-size: 12px; }
.le-chip.wht { background: var(--warn-soft); border-color: transparent; color: var(--warn-ink); }
.le-tax-add { appearance: none; -webkit-appearance: none; width: 34px; height: 28px; padding: 0; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); text-align-last: center; cursor: pointer; }
.le-tax-add:hover { border-color: var(--accent); color: var(--accent-d); }
.le-stepper { display: flex; align-items: center; gap: 4px; }
.le-stepper .le-in { width: 62px; text-align: center; min-height: 42px; border-color: var(--line); background: var(--panel); }
.le-step { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.le-step:active { background: var(--panel-3); }
.le-add { display: flex; flex-wrap: wrap; gap: 8px; }
.le-line.dragging { opacity: .4; }
.le-line.over-top > td { box-shadow: inset 0 3px 0 var(--accent); }
.le-line.over-bottom > td { box-shadow: inset 0 -3px 0 var(--accent); }
.le-line.invalid, .le-row.invalid { outline: 2px solid var(--danger); outline-offset: -2px; }
.le-card.invalid { border-color: var(--danger); }
.le-in.invalid, .le-in.invalid:hover { border-color: var(--danger); background: var(--danger-soft); }
.le-row.has-issue > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.le-error { color: var(--danger-ink); font-weight: 650; font-size: 13px; }
.le-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; text-align: center; }
.le-empty-cell { padding: 0 !important; }
/* narrow container (document next to a side panel, tablets): every line becomes a two-row grid with captions instead of a scrolling table */
@container le (max-width: 940px) {
  .le-table { display: block; min-width: 0; }
  .le-table thead { display: none; }
  .le-table tbody { display: grid; }
  .le-table tr.le-row { display: grid; grid-template-columns: 30px repeat(12, minmax(0, 1fr)) 40px; gap: 2px 8px; align-items: end; padding: 10px 4px 12px; border-bottom: 1px solid var(--line-2); }
  .le-table tbody tr:last-child { border-bottom: 0; }
  .le-table tr.le-row > td { display: block; width: auto; min-width: 0 !important; padding: 0 !important; border: 0; }
  .le-table tr.le-row > td.le-c { grid-column: span 3; grid-row: 2; }
  .le-table tr.le-row > td.le-c::before { content: attr(data-label); display: block; margin: 0 0 1px 8px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .le-table tr.le-row > td.le-h { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .le-table tr.le-row > td.le-x { grid-column: 14; grid-row: 1 / span 3; align-self: center; }
  .le-table tr.le-row > td.t-product { grid-column: 2 / span 5; grid-row: 1; }
  .le-table tr.le-row > td.t-text { grid-column: 7 / span 4; grid-row: 1; }
  .le-table tr.le-row > td.t-computed { grid-column: 11 / span 3; grid-row: 1; }
  .le-table tr.le-row > td.t-qty { grid-column: 2 / span 3; }
  .le-table tr.le-row > td.t-uom { grid-column: 5 / span 3; }
  .le-table tr.le-row > td.t-money { grid-column: 8 / span 3; }
  .le-table tr.le-row > td.t-percent { grid-column: 11 / span 3; }
  .le-table tr.le-row > td.t-taxes { grid-column: 2 / span 12; grid-row: 3; margin-top: 4px; }
  .le-table tr.le-row > td.t-taxes::before { display: inline; margin-inline-end: 8px; }
  .le-table tr.le-row > td.t-taxes .le-taxes { display: inline-flex; vertical-align: middle; }
  .le-table tr.le-row > td.num::before { margin-inline: 0 8px; text-align: end; }
  .le-table tr.le-section, .le-table tr.le-note { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; align-items: center; border-bottom: 1px solid var(--line-2); }
  .le-table tr.le-section > td, .le-table tr.le-note > td { display: block; width: auto; padding: 4px 0; border: 0; }
  .le-table tr.le-section > td.le-c::before, .le-table tr.le-note > td.le-c::before { display: none; }
  .le-table tr:not(.le-line) { display: block; }
}
.le-cards { display: grid; gap: 8px; }
.le-card { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.le-card.section { background: var(--panel-2); border-style: dashed; }
.le-card.note { font-style: italic; color: var(--muted); }
.le-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.le-card-name { min-width: 0; overflow-wrap: anywhere; }
.le-card-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.le-card-meta { font-size: 13px; font-variant-numeric: tabular-nums; }
.le-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.le-card-actions .btn { min-height: 42px; }
.le-edit { min-width: 42px; }
@media (max-width: 720px) { .le-edit > span:not(.ico) { display: none; } }
.le-card-move { display: inline-flex; }
.le-card-move .icon-btn { width: 42px; height: 42px; }
.le-sheet { display: grid; gap: 12px; }
@media (max-width: 720px) {
  .backdrop:has(.sheet-modal) { place-items: end stretch; padding: 0; }
  .sheet-modal { width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; animation: erp-sheet .2s; }
  .sheet-modal .modal-foot .btn { flex: 1 1 0; min-height: 44px; }
  .sheet-modal .le-in, .sheet-modal .ss-input { min-height: 44px; }
}
@keyframes erp-sheet { from { transform: translateY(40px); opacity: .6; } }

/* ------------------------------------------------------------ kanban */
.kb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.kb-col { flex: 1 0 260px; min-width: 240px; max-width: 360px; display: grid; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--panel-3); scroll-snap-align: start; }
.kb-head { display: flex; align-items: center; gap: 8px; min-height: 34px; padding-bottom: 8px; border-bottom: 3px solid var(--col); }
.kb-dot { display: none; }
.kb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-count { padding: 0 9px; border-radius: 999px; background: var(--panel); font-size: 12px; font-weight: 800; }
.kb-add { width: 34px; height: 34px; }
.kb-list { display: grid; gap: 8px; align-content: start; min-height: 64px; }
.kb-list:empty::before { content: attr(data-empty); padding: 14px 8px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: 13px; text-align: center; }
.kb-card { position: relative; padding: 10px 12px; padding-inline-start: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); cursor: grab; outline: 0; }
.kb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-card:hover { border-color: var(--muted); }
.kb-grip { position: absolute; inset-inline-start: 3px; top: 6px; display: grid; place-items: center; width: 22px; height: 32px; color: var(--muted); touch-action: none; cursor: grab; }
.kb-card.kb-dragging { opacity: .35; }
.kb-ghost { position: fixed !important; inset: 0 auto auto 0 !important; z-index: 500; pointer-events: none; box-shadow: var(--shadow-lg); opacity: .96; margin: 0; }
.kb-drop { border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); }
.kb.is-dragging, .kb.is-dragging * { user-select: none; cursor: grabbing; }
@media (max-width: 720px) {
  .kb-col { flex-basis: 84%; max-width: 84%; }
  .kb-grip { width: 36px; height: 44px; inset-inline-start: 0; top: 2px; }
  .kb-card { padding-inline-start: 38px; }
}

/* ------------------------------------------------------------ activity / chatter */
.chatter { display: grid; gap: 12px; }
.cht-title { font-size: 14px; }
.cht-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cht-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.cht-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; }
.cht-item.kind-state .cht-avatar, .cht-item.kind-create .cht-avatar { background: var(--ok-soft); color: var(--ok-ink); }
.cht-item.kind-payment .cht-avatar { background: var(--info-soft); color: var(--info-ink); }
.cht-item.kind-change .cht-avatar { background: var(--warn-soft); color: var(--warn-ink); }
.cht-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cht-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cht-changes { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.cht-changes s { color: var(--muted); }
.cht-composer textarea { width: 100%; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; resize: vertical; }
.cht-composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cht-composer-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.cht-empty { padding: 8px 0; }

/* ------------------------------------------------------------ QR + printable document */
.qr-box { background: #fff; padding: 4px; border-radius: 6px; line-height: 0; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.edoc { font-size: 12px; line-height: 1.45; color: #1b1b1b; background: #fff; }
.edoc h4 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #666; }
.edoc-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 3px solid #6f4e37; }
.edoc-co { display: flex; align-items: flex-start; gap: 12px; }
.edoc-logo { width: 56px; height: 56px; object-fit: contain; }
.edoc-coname { font-size: 16px; }
.edoc-small { font-size: 11px; color: #444; }
.edoc-ids { margin-top: 2px; color: #1b1b1b; }
.edoc-title { text-align: end; }
.edoc-title h1 { margin: 0; font-size: 22px; }
.edoc-no { margin-top: 2px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.edoc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.edoc-box { padding: 8px 10px; border: 1px solid #d6cfc7; border-radius: 6px; }
.edoc-pname { font-size: 13px; }
.edoc-k { color: #666; }
.edoc-lines { width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.edoc-lines th { padding: 5px 6px; text-align: start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #333; background: #f6f2ed; border-bottom: 1.5px solid #333; }
.edoc-lines td { padding: 5px 6px; vertical-align: top; border-bottom: 1px solid #e5e0da; }
.edoc-lines tr { break-inside: avoid; }
.edoc-lines .n { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.edoc-sec td { font-weight: 800; background: #f3eee8; }
.edoc-note td { font-style: italic; color: #555; }
.edoc-bottom { display: grid; grid-template-columns: 1fr 280px; gap: 18px; break-inside: avoid; }
.edoc-totals { display: grid; gap: 3px; align-content: start; font-variant-numeric: tabular-nums; }
.edoc-trow { display: flex; justify-content: space-between; gap: 12px; }
.edoc-trow.sub { color: #555; border-top: 1px dashed #999; padding-top: 3px; }
.edoc-trow.grand { margin-top: 3px; padding-top: 4px; border-top: 2px solid #1b1b1b; font-size: 14px; }
.edoc-trow.due { margin-top: 3px; padding: 4px 6px; background: #f3eee8; font-size: 14px; }
.edoc-trow.paid { color: #555; font-style: italic; }
.edoc-words { margin-bottom: 8px; padding: 8px 10px; border: 1px solid #d6cfc7; border-radius: 6px; background: #faf7f3; }
.edoc-words p { margin: 2px 0; font-weight: 600; }
.edoc-notes { margin-bottom: 8px; }
.edoc-notes p { margin: 0; }
.edoc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 24px; break-inside: avoid; }
.edoc-sign { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 14px; flex: 1; }
.edoc-sign > div { height: 78px; padding: 4px 8px; border: 1px solid #bbb; border-radius: 6px; font-size: 10.5px; color: #555; }
.edoc-qr { flex: 0 0 auto; width: 112px; text-align: center; }
.edoc-qr svg { display: block; width: 112px; height: 112px; }
.edoc-qr small { font-size: 9.5px; color: #555; }
@media (max-width: 720px) { .edoc-parties, .edoc-bottom { grid-template-columns: 1fr; } .edoc-head { flex-direction: column; } .edoc-title { text-align: start; } }

@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 1.4s; } }

/* Save / Discard bar of a document: stick under the stuck document header instead of behind it */
.doc-page .form-bar { top: calc(62px + var(--dh-h, 64px) + 6px); }
@media (max-width: 900px) { .doc-page .form-bar { top: calc(108px + var(--dh-h, 64px) + 6px); } }
/* inputs flagged by a dialog's own validation (outside createForm's .field.invalid) */
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); }