/* Supplier in a dedicated column; scoped to the financial list. */
.transaction-list-layout {
  --transaction-open:#ffac70; --transaction-open-bg:#462b1b;
  --transaction-paid:#91e0b2; --transaction-paid-bg:#193b2b;
  --transaction-cancelled:#c0c1c8; --transaction-cancelled-bg:#303136;
  --transaction-overdue:#ffaaa4; --transaction-overdue-bg:#442725;
  --transaction-upcoming:#a8ceff; --transaction-upcoming-bg:#24354c;
  --transaction-today:#ffe098; --transaction-today-bg:#42361c;
}
.transaction-list-layout .sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
html[data-layout="analytical"] .transaction-list-table {table-layout:fixed; font-size:14px; line-height:1.45}
.transaction-list-table .transaction-col-description {width:26%}
.transaction-list-table .transaction-col-party {width:auto}
.transaction-list-table .transaction-col-due {width:126px}
.transaction-list-table .transaction-col-kind {width:85px}
.transaction-list-table .transaction-col-status {width:150px}
.transaction-list-table .transaction-col-amount {width:var(--transaction-amount-width,145px)}
.transaction-list-table .transaction-col-open {width:56px}
html[data-layout="analytical"] .transaction-list-table th {font-size:12px; padding:10px 12px; letter-spacing:.2px; text-transform:none; white-space:normal}
html[data-layout="analytical"] .transaction-list-table th small {display:block; font-size:12px; font-weight:400; margin-top:2px; color:var(--muted)}
html[data-layout="analytical"] .transaction-list-table td {padding:10px 12px; line-height:1.45; color:var(--ink); border-color:var(--line); overflow-wrap:anywhere}
html[data-layout="analytical"] .transaction-list-table .transaction-description,
.transaction-mobile-list .transaction-description {font-size:16px; line-height:1.4; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink); text-align:left; background:transparent; border:0; padding:0; width:100%; overflow-wrap:anywhere}
.transaction-description:hover {text-decoration:underline; text-underline-offset:3px}
.transaction-party-name {display:block; font-size:14px; font-weight:550; line-height:1.45; overflow-wrap:anywhere}
.transaction-party-document {display:block; font-size:14px; color:var(--muted); line-height:1.45; margin-top:3px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.transaction-context {display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--muted)}
.transaction-context .area-badge {font-size:12px; padding:2px 6px}
.transaction-due-date {display:block; font-variant-numeric:tabular-nums; font-size:14px; white-space:nowrap}
.transaction-status,.transaction-due {display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:3px 7px; font-size:14px; line-height:1.4; font-weight:550; white-space:nowrap}
.transaction-status::before {content:""; width:5px; height:5px; background:currentColor; border-radius:50%; flex-shrink:0}
.transaction-due {margin-top:4px}
.transaction-status--open {color:var(--transaction-open); background:var(--transaction-open-bg)}
.transaction-status--paid {color:var(--transaction-paid); background:var(--transaction-paid-bg)}
.transaction-status--cancelled,.transaction-status--unknown,.transaction-due--unknown {color:var(--transaction-cancelled); background:var(--transaction-cancelled-bg)}
.transaction-status--review,.transaction-due--today {color:var(--transaction-today); background:var(--transaction-today-bg)}
.transaction-due--overdue {color:var(--transaction-overdue); background:var(--transaction-overdue-bg)}
.transaction-due--upcoming {color:var(--transaction-upcoming); background:var(--transaction-upcoming-bg)}
html[data-layout="analytical"] .transaction-list-table .transaction-amount,
.transaction-mobile-list .transaction-amount {font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap}
.transaction-payment {margin-top:5px}
html[data-layout="analytical"] .transaction-list-layout .transaction-payment .btn {font-size:12px; padding:5px 7px; min-height:30px; width:auto; white-space:normal}
html[data-layout="analytical"] .transaction-list-layout .transaction-open {width:42px; min-width:42px; height:42px; color:var(--accent,#ff792c)}
.transaction-period-notice {margin:8px 0 12px; gap:10px}
.transaction-period-notice p {font-size:14px; margin:0}
.transaction-list-filters {margin-bottom:12px}
.transaction-list-filters .field-search input {font-size:14px}
.transaction-list-intro {margin:14px 0 12px}
@media(max-width:1150px) {
  .transaction-list-layout .transaction-desktop {display:none}
  .transaction-list-layout .transaction-mobile-list {display:grid; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px; background:var(--surface)}
  .transaction-mobile-row {padding:12px 14px; border-bottom:1px solid var(--line)}
  .transaction-mobile-row:last-child {border-bottom:0}
  .transaction-mobile-title {display:flex; align-items:center; gap:12px}
  .transaction-mobile-title .transaction-description {flex:1; min-width:0; min-height:42px; -webkit-line-clamp:3}
  .transaction-mobile-title .transaction-context {display:none}
  .transaction-mobile-title:has(.transaction-context) {flex-wrap:wrap}
  .transaction-mobile-title .transaction-context {display:flex; width:calc(100% - 54px); order:3; margin-top:0}
  .transaction-mobile-party {margin:4px 0 10px}
  .transaction-mobile-values {display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
  .transaction-mobile-total {display:flex; align-items:flex-end; flex-direction:column; gap:4px}
  .transaction-kind {font-size:12px; color:var(--muted)}
  html[data-layout="analytical"] .transaction-mobile-list .transaction-payment .btn {min-height:42px; padding:7px 12px; font-size:14px}
}
@media(max-width:360px) {
  .transaction-mobile-row {padding:10px}
  .transaction-mobile-values {flex-wrap:wrap; gap:8px}
}