/* Transactions page. Cards, tables, fields, buttons, badges, stats and modals come from /css/adspot-ui.css. */

.tx-page { display: grid; gap: var(--ui-s3); align-content: start; }
.tx-page > * { min-width: 0; }
.tx-page .ui-pagehead { margin: 0; }
.tx-h2 { margin: 0; font-family: var(--ui-font-head); font-weight: var(--ui-head-weight); font-size: 18px; letter-spacing: var(--ui-head-track); color: var(--ui-ink); }

/* money colours: green in, red out (text colours are the darker shades so they read on white) */
.tx-in { color: #1f6b24; }
.tx-out { color: #a53b38; }

/* summary */
.tx-stats .ui-stat__value { font-size: 28px; }
.tx-stats.is-loading .ui-stat__value:not(#report_block_tokens) {
	color: transparent; width: 84px; height: 34px; border-radius: 8px; user-select: none;
	background: linear-gradient(90deg, #eceee9 25%, #f6f7f5 37%, #eceee9 63%); background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite;
}
.tx-overview-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: calc(-1 * var(--ui-s2)); }

/* filters */
.tx-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(190px, 1.2fr) minmax(190px, 1.2fr); gap: 0 12px; align-items: end; padding: 16px 18px; }
.tx-toolbar .ui-field { margin: 0; }
.tx-toolbar .ui-search { max-width: none; min-width: 0; }
.tx-filter-error { grid-column: 1 / -1; margin: 10px 0 0; }

/* cards that hold a table or charts */
.tx-card { padding: 0; overflow: hidden; }
.tx-card__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ui-line); }
.tx-count { flex: 1 1 auto; min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; }

/* table */
.tx-tablewrap { border: 0; border-radius: 0; box-shadow: none; }
.tx-table { table-layout: fixed; min-width: 640px; }
.tx-c-date { width: 128px; }
.tx-c-type { width: 168px; }
.tx-c-amount { width: 150px; }
.tx-c-balance { width: 136px; }
.tx-c-ref { width: 132px; }
.tx-table th { padding: 10px 16px; }
.tx-table td { padding: 12px 16px; overflow: hidden; }
.tx-table tbody tr { cursor: pointer; }
.tx-table tbody tr:focus-visible { outline: 2px solid var(--ui-sage); outline-offset: -2px; background: #fafbf9; }
.tx-sort { appearance: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tx-sort:hover { color: var(--ui-ink); }
th.num .tx-sort { flex-direction: row-reverse; }
.tx-table th[aria-sort="ascending"] .tx-sort, .tx-table th[aria-sort="descending"] .tx-sort { color: var(--ui-ink); }
.tx-table th[aria-sort="ascending"] .tx-sort::after { content: "\2191"; font-size: 14px; }
.tx-table th[aria-sort="descending"] .tx-sort::after { content: "\2193"; font-size: 14px; }

.tx-when { white-space: nowrap; }
.tx-day, .tx-time, .tx-main, .tx-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-day { color: var(--ui-ink); font-weight: 600; }
.tx-time { margin-top: 1px; font-size: 14px; color: var(--ui-muted); }
.tx-main { color: var(--ui-ink); font-weight: 600; }
.tx-sub { margin-top: 1px; font-size: 14px; color: var(--ui-muted); }
a.adspace_link { color: var(--ui-sage-dark); text-decoration: none; }
a.adspace_link:hover { text-decoration: underline; }
.tx-table .ui-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-table td.num { font-variant-numeric: tabular-nums; }
.tx-amount { font-weight: 700; }
.tx-bal { color: var(--ui-text); }
.tx-refid { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--ui-muted); }

.tx-skel td { padding: 16px; }
.tx-skel .ui-skel-line { margin: 0; }
.tx-row-state td { padding: 0; }
.tx-row-state:hover { background: transparent; }
.tx-row-state .ui-empty { padding: 56px 24px; }
.tx-table.is-loading tbody { opacity: .5; transition: opacity var(--ui-ease); pointer-events: none; }

.tx-pager { display: flex; justify-content: center; padding: 14px 20px; border-top: 1px solid var(--ui-line); background: #fafbf9; }
.tx-pager[hidden] { display: none; }
.tx-gap { padding: 0 2px; color: var(--ui-muted); }

/* insights */
.tx-insights { padding: 20px; }
.tx-kpis { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 20px; }
.tx-kpi__label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ui-muted); }
.tx-kpi__value { display: block; margin-top: 2px; font-size: 18px; font-weight: 700; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.tx-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tx-charts[hidden] { display: none; }
.tx-chart { margin: 0; min-width: 0; }
.tx-chart--wide { grid-column: 1 / -1; }
.tx-chart figcaption { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ui-ink); }
.tx-chartbox { position: relative; height: 230px; border-radius: var(--ui-radius-sm); background: var(--ui-tint); }
.tx-chartbox canvas { position: relative; background: #fff; }
.tx-hidden { visibility: hidden; }
.tx-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-sm); background: #fff; font-size: 14px; color: var(--ui-muted); }
.tx-chart-empty[hidden] { display: none; }
.tx-charts-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.tx-charts-note[hidden] { display: none; }

/* receipt */
.tx-receipt__top { display: grid; justify-items: center; gap: 10px; margin-bottom: 16px; padding: 18px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-tint); text-align: center; }
.tx-receipt__amount { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.tx-receipt__amount.tx-in { color: #1f6b24; }
.tx-receipt__amount.tx-out { color: #a53b38; }
.tx-receipt__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tx-kv { grid-template-columns: minmax(96px, 120px) 1fr; }
.tx-kv dd { font-weight: 600; }

@media (max-width: 1180px) {
	.tx-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.tx-search { grid-column: span 2; }
	.tx-toolbar .ui-field:nth-child(4), .tx-toolbar .ui-field:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 700px) {
	.tx-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tx-search { grid-column: 1 / -1; }
	.tx-toolbar .ui-field:nth-child(4), .tx-toolbar .ui-field:nth-child(5) { grid-column: auto; }
}
@media (max-width: 960px) {
	.tx-c-ref, .tx-table td.tx-ref, .tx-table th:last-child { display: none; }
	.tx-c-date { width: 118px; }
	.tx-c-type { width: 156px; }
	.tx-c-amount { width: 136px; }
	.tx-c-balance { width: 124px; }
	.tx-table th, .tx-table td { padding-left: 12px; padding-right: 12px; }
	.tx-charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.tx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* printing a receipt: only the receipt itself */
@media print {
	body:not(.tx-printing) > *:not(#transaction_modal) { display: none !important; }
	body:not(.tx-printing) #transaction_modal { position: static; display: block; padding: 0; background: #fff; animation: none; }
	body:not(.tx-printing) #transaction_modal[hidden] { display: none !important; }
	#transaction_modal .ui-modal__dialog { width: 100%; max-height: none; box-shadow: none; animation: none; }
	#transaction_modal .ui-modal__x, #transaction_modal .ui-modal__foot { display: none; }
}

/* folder tabs (earnings / spending / refunds); the Type menu below stays in step */
.tx-tabs { margin: 0 0 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tx-tabs::-webkit-scrollbar { display: none; }
.tx-tab { white-space: nowrap; }
.tx-tab:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 520px) {
	.tx-toolbar { grid-template-columns: minmax(0, 1fr); }
	.tx-toolbar .ui-input, .tx-toolbar .ui-select { min-width: 0; max-width: 100%; }
	.tx-toolbar .ui-field:nth-child(4), .tx-toolbar .ui-field:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	/* on a phone the table keeps date, details and amount in view; type and balance are in the receipt */
	.tx-c-type, .tx-c-balance, .tx-table th:nth-child(2), .tx-table td:nth-child(2), .tx-table th:nth-child(5), .tx-table td:nth-child(5) { display: none; }
	.tx-c-date { width: 96px; }
	.tx-c-amount { width: 112px; }
}

/* phone: the table must fit the screen (amount stays visible), so drop the desktop minimum width and tighten the cells */
@media (max-width: 520px) {
	.tx-table { min-width: 0; width: 100%; }
	.tx-c-date { width: 108px; }
	.tx-c-amount { width: 100px; }
	.tx-table th, .tx-table td { padding-left: 10px; padding-right: 10px; }
	.tx-day { font-size: 14px; }
	.tx-card__head { padding: 12px 14px; }
}

/* row icons: money in or out at a glance */
.tx-detwrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tx-detxt { min-width: 0; flex: 1 1 auto; }
.tx-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-tint); color: var(--ui-muted); }
.tx-ico--in { background: var(--ui-ok-soft); color: #1f6b24; }
.tx-ico--out { background: var(--ui-bad-soft); color: #a53b38; }
@media (max-width: 700px) { .tx-ico { display: none; } }

/* export menu (same look as the analytics export: format cards, one status line) */
.tx-export__body { display: grid; gap: 18px; }
.tx-export__intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ui-text); }
.tx-export__legend { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ui-muted); }
.tx-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tx-fmt { appearance: none; display: grid; gap: 2px; justify-items: start; padding: 11px 14px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: #fff; cursor: pointer; font: inherit; text-align: left; transition: border-color var(--ui-ease), background-color var(--ui-ease); }
.tx-fmt b { font-size: 15px; color: var(--ui-ink); }
.tx-fmt span { font-size: 13px; line-height: 1.35; color: var(--ui-muted); }
.tx-fmt:hover:not(:disabled) { border-color: var(--ui-sage); background: var(--ui-sage-soft); }
.tx-fmt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-sage-ring); }
.tx-fmt:disabled { opacity: .55; cursor: not-allowed; }
.tx-fmt.is-busy { border-color: var(--ui-sage); background: var(--ui-sage-soft); opacity: 1; }
.tx-export__status { margin: 0; min-height: 21px; font-size: 14px; color: var(--ui-muted); overflow-wrap: anywhere; }
.tx-export__status.is-ok { color: var(--ui-ok); font-weight: 600; }
.tx-export__status.is-warn { color: #8a5300; }
.tx-export__status.is-bad { color: var(--ui-bad); }
.tx-export__note { margin: 0; font-size: 13px; color: var(--ui-muted); }
@media (max-width: 560px) { .tx-formats { grid-template-columns: minmax(0, 1fr); } }

/* the printed / PDF statement (built by exportPrint, only shown while printing) */
#tx_printview { display: none; }
@media print {
	@page { size: A4; margin: 14mm; }
	body.tx-printing { background: #fff !important; }
	body.tx-printing > *:not(#tx_printview) { display: none !important; }
	body.tx-printing #tx_printview { display: block !important; }
	.tx-print { font-family: var(--ui-font, Arial, sans-serif); color: #222; font-size: 10pt; line-height: 1.4; }
	.tx-print__head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid #4f6b4b; }
	.tx-print__brand { font-size: 22pt; font-weight: 800; letter-spacing: -.5px; color: #2b2f2a; }
	.tx-print__head span { font-size: 11pt; color: #5f665e; }
	.tx-print__title { margin: 14px 0 2px; font-size: 18pt; line-height: 1.2; }
	.tx-print__meta { margin: 0 0 10px; color: #5f665e; font-size: 9.5pt; }
	.tx-print__table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
	.tx-print__table th, .tx-print__table td { padding: 4px 6px; border-bottom: 1px solid #ddd; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
	.tx-print__table th { background: #eef1ec; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.tx-print__table .num { text-align: right; white-space: nowrap; }
	.tx-print__nowrap { white-space: nowrap; }
	.tx-print__table thead { display: table-header-group; }
	.tx-print__table tfoot { display: table-footer-group; }
	.tx-print__table tr { break-inside: avoid; }
	.tx-print__total td { font-weight: 700; border-top: 1px solid #999; border-bottom: 0; }
	.tx-print__table .tx-in { color: #1f6b24; }
	.tx-print__table .tx-out { color: #a53b38; }
	.tx-print__note { margin: 8px 0 0; font-size: 9.5pt; color: #8a5300; }
}