/* Styles specific to the wallet TX history page.
   Tokens come from styles.css. */

#addressList {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.address-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	font-size: 15px;
	word-break: break-all;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.remove-address {
	flex-shrink: 0;
	color: var(--red);
	cursor: pointer;
	transition: transform 0.2s var(--ease);
}

.remove-address:hover {
	transform: scale(1.15);
}

#msgField {
	width: 100%;
	background: transparent;
	border: 0;
	padding-left: 0;
}

#button_wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

#currencyDropdown select {
	padding: 9px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color 0.2s var(--ease);
}

#currencyDropdown select:hover {
	border-color: var(--border-hi);
}

#loadingIndicator {
	display: none;
	margin-top: 12px;
	font-weight: 500;
	color: var(--blue);
}

/* Wider than .content so more columns fit, but not flush to the viewport edge.
   Overflows horizontally on narrow screens, which the container scrolls. */
#wallethistory_table_container {
	width: min(1600px, 94%);
	margin: 24px auto 0;
	padding: 0 12px 12px;
}

#pleasedelegate {
	display: none;
}

/* ----- DataTables in dark -------------------------------------------------
   The table carries class="display", which is DataTables shorthand for
   stripe + hover + row-border + order-column. Those built-in rules hard-code
   light greys (#f9f9f9 stripes, #f1f1f1 sorted column, #f5f5f5 hover), and
   they out-specify plain element selectors — hence the id-scoped overrides
   below. Keep them in sync if the DataTables version changes. */

table#dataTable.dataTable {
	font-size: 15px;
	color: var(--text);
	background-color: transparent;
	border-collapse: collapse;
}

/* Header */
table#dataTable.dataTable thead th,
table#dataTable.dataTable thead td {
	position: sticky;
	top: 0;
	z-index: 1;
	color: var(--heading);
	font-weight: 500;
	background-color: var(--surface-2);
	border-bottom: 1px solid var(--border-hi);
}

/* Body. Each rule matches the specificity of the DataTables rule it replaces,
   so the cascade order below is what decides: transparent, then stripe, then
   sorted-column tint, then hover. */
table#dataTable.dataTable tbody tr,
table#dataTable.dataTable tbody tr.even,
table#dataTable.dataTable tbody tr.even > .sorting_1,
table#dataTable.dataTable tbody tr.even > .sorting_2,
table#dataTable.dataTable tbody tr.even > .sorting_3 {
	background-color: transparent;
}

table#dataTable.dataTable tbody tr.odd,
table#dataTable.dataTable tbody tr.odd > .sorting_1,
table#dataTable.dataTable tbody tr.odd > .sorting_2,
table#dataTable.dataTable tbody tr.odd > .sorting_3 {
	background-color: rgba(255, 255, 255, 0.028);
}

table#dataTable.dataTable tbody tr.odd > .sorting_1,
table#dataTable.dataTable tbody tr.even > .sorting_1 {
	background-color: rgba(77, 139, 255, 0.07);
}

table#dataTable.dataTable tbody td {
	border-top: 1px solid var(--border);
}

table#dataTable.dataTable.hover tbody tr:hover,
table#dataTable.dataTable.display tbody tr:hover,
table#dataTable.dataTable.display tbody tr:hover > .sorting_1,
table#dataTable.dataTable.display tbody tr:hover > .sorting_2,
table#dataTable.dataTable.display tbody tr:hover > .sorting_3 {
	background-color: rgba(77, 139, 255, 0.13);
}

/* "No data available" / processing rows */
table#dataTable.dataTable tbody td.dataTables_empty {
	color: var(--text-dim);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: var(--text-dim) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 5px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--text) !important;
	border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--heading) !important;
	background: var(--surface-2) !important;
	border-color: var(--border-hi) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	color: var(--text-dim) !important;
	opacity: 0.5;
}

/* DataTables draws the sort arrows with ::before/::after glyphs on the header
   cells; inherit the header colour so they are not black on dark. */
table#dataTable.dataTable thead .sorting::before,
table#dataTable.dataTable thead .sorting::after,
table#dataTable.dataTable thead .sorting_asc::before,
table#dataTable.dataTable thead .sorting_asc::after,
table#dataTable.dataTable thead .sorting_desc::before,
table#dataTable.dataTable thead .sorting_desc::after {
	color: var(--heading);
}