/* Reversible preview of the transaction type filter. */
.ux-transactions-toolbar { align-items: flex-end; }
.transaction-type-filter { max-width: 100%; }
.transaction-type-filter h2 { font-size: 16px; font-weight: 700; color: var(--heading-ink); margin: 0 0 10px; }
.transaction-type-options { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid #dce0e5; border-radius: 14px; background: #f0f2f4; }
.transaction-type-option { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 15px; border-radius: 10px; color: #414b57; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background .15s, color .15s; }
.transaction-type-option:hover { background: #e2e6eb; }
.transaction-type-option.active { background: #205b49; color: #fff; box-shadow: 0 2px 5px #143e2520; }
.transaction-type-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 6px; border-radius: 7px; background: #e0e4e9; color: #47515e; font-size: 13px; }
.transaction-type-option.active .transaction-type-count { color: #fff; background: #ffffff26; }
.transaction-type-option:focus-visible { outline: 3px solid #b48c36; outline-offset: 3px; }
.transaction-type-description { font-size: 14px; }
html[data-theme=dark] .transaction-type-options { background: #202a35; border-color: #3c4857; }
html[data-theme=dark] .transaction-type-option { color: #dce3eb; }
html[data-theme=dark] .transaction-type-option:hover { background: #344151; }
html[data-theme=dark] .transaction-type-option.active { background: #287257; color: #fff; }
html[data-theme=dark] .transaction-type-count { background: #364353; color: #e5ebf3; }
html[data-theme=dark] .transaction-type-option.active .transaction-type-count { background: #ffffff26; color: #fff; }
@media(max-width: 760px) {
 .transaction-type-filter { width: 100%; }
 .transaction-type-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .transaction-type-option { padding: 10px 8px; font-size: 14px; }
}

/* Keep all three creation actions together, without an orphaned final button. */
.transaction-page-heading:has(.transaction-create-actions){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
.transaction-page-heading>div:first-child{min-width:0}
.transaction-create-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:450px;max-width:100%;align-items:stretch;gap:8px}
.transaction-create-actions .btn{min-width:0;min-height:46px;padding:10px 12px;justify-content:center;text-align:center;white-space:normal;line-height:1.5;font-size:13px}
.transaction-create-actions .icon{flex:none;width:17px;height:17px}
.support-type-filter{margin:0 0 18px;width:fit-content;max-width:100%}
.support-type-filter .transaction-type-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.support-type-filter .transaction-type-option{min-width:0}
@media(max-width:1100px){
 .transaction-page-heading:has(.transaction-create-actions){grid-template-columns:minmax(0,1fr);gap:16px}
 .transaction-create-actions{width:100%}
}
@media(max-width:760px){
 .transaction-create-actions .btn{min-height:48px;padding:10px 8px;font-size:13px}
 .support-type-filter{width:100%}
 .support-type-filter .transaction-type-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .support-type-filter .transaction-type-option{flex-wrap:wrap;gap:5px 8px;text-align:center}
}
@media(max-width:420px){.transaction-create-actions{grid-template-columns:minmax(0,1fr)}.transaction-create-actions .btn{min-height:44px}}