/*
 * Citizen
 *
 * SkinStyles for Extension:Cargo
 * Module: ext.cargo.main
 * Version: REL1_39 b4c6314
 *
 * Date: 2023-01-03
*/

span.cargoFieldName {
	color: var( --color-subtle );
}

table.cargoTable.noMerge tr:nth-child( odd ) {
	background: var( --color-surface-0 );
}

table.cargoTable.noMerge tr:nth-child( even ) {
	background: var( --color-surface-2 );
}

table.cargoTable.mergeSimilarCells td.odd {
	background: var( --color-surface-0 );
}

table.cargoTable.mergeSimilarCells td.even {
	background: var( --color-surface-2 );
}

table.cargoTable {
	font-size: var( --font-size-small );
}

table.cargoTable thead tr {
	border-bottom: var( --border-width-base ) solid var( --border-color-base );
}

table.cargoTable tr + tr {
	border-top: var( --border-width-base ) solid var( --border-color-base );
}

table.cargoTable th,
table.cargoTable td {
	/* Sync with wikitable */
	padding: var( --space-xs ) var( --space-sm );
}

table.cargoTable th {
	/* Sync with wikitable */
	text-align: start;
}

table.cargoTable td {
	/* Border handled by tr */
	border: 0;
}

span.searchmatch {
	font-weight: var( --font-weight-semibold );
	color: var( --color-emphasized );
}

div.cargoReplacementTableInfo {
	background: var( --color-surface-3 );
	border-color: var( --border-color-base );
}

.addButton,
.deleteButton {
	/* BG color does not like filter */
	background-color: transparent;
	border-color: var( --border-color-base );
}

.cargoQueryTooltipIcon,
.addButton,
.deleteButton {
	filter: var( --filter-invert );
}

div.specialCargoQuery-extraPane {
	background: linear-gradient( transparent, var( --color-surface-2 ) 0.5em );
	border-color: var( --border-color-base );
}

.ui-state-focus {
	background: var( --color-progressive--active ) !important;
}

.ui-menu .ui-menu-item a {
	font-family: var( --font-family-base );
	color: var( --color-emphasized );
}

// Temporary responsiveness fix until Cargo patches it (#924)
.cargoDynamicTable.dataTable {
	display: block;
	max-width: max-content; // Needed for the border
	overflow-x: auto;
	border-radius: var( --border-radius-medium );
	box-shadow: var( --box-shadow-border );
}