/* Seznam prijav (/seznam-prijav): DataTables tabela #signupTable */

.signupList {
	--signupList__line: var(--color__silver);
	--signupList__muted: hsl(0 0% 35%);
	--signupList__rowHover: var(--color__silver--light);
}

/* Iskanje in število zapisov */
.tableWrap div.dt-container .dt-search input {
	max-width: 16em;
	padding: var(--spacing1) var(--spacing3) var(--spacing1) 2.2em;
	border-color: var(--color__gray);
	background: var(--color__white) url(/images/search.svg) no-repeat 0.75em 50% / 0.9em;
}

	.tableWrap div.dt-container .dt-search input:focus {
		border-color: var(--color__primary);
		outline: 2px solid var(--color__primary);
		outline-offset: 1px;
	}

.tableWrap div.dt-container .dt-length select {
	border-color: var(--color__gray);
	border-radius: 6px;
}

.tableWrap div.dt-container .dt-layout-row:first-child {
	margin-bottom: var(--spacing4);
}

/* Tabela */
.tableWrap table.dataTable > thead > tr > th {
	white-space: nowrap;
	border-bottom: 2px solid var(--color__primary);
}

.tableWrap table.dataTable > tbody > tr > td {
	vertical-align: middle;
}

@media (min-width: 65em) {
	
	.tableWrap table.dataTable > tbody > tr:hover > td {
		background-color: var(--signupList__rowHover);
	}
}

.tableWrap table.dataTable > tbody > tr > td:last-child {
	white-space: nowrap;
}

/* Status prijave */
.signupStatus {
	--signupStatus__hsl: var(--hslColor__gray);

	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 2em;
	background-color: hsl(var(--signupStatus__hsl) / 0.12);
	color: hsl(var(--signupStatus__hsl));
	font-size: var(--size__body--smallest);
	font-weight: var(--weight__bold);
	line-height: 1.2;
	white-space: nowrap;
}

.signupStatus--paid {
	--signupStatus__hsl: var(--hslColor__green);
}

/* Temnejši toni od --hslColor__warning/danger zaradi kontrasta besedila */
.signupStatus--pending {
	--signupStatus__hsl: 32 100% 32%;
	background-color: hsl(var(--hslColor__warning) / 0.25);
}

.signupStatus--cancelled {
	--signupStatus__hsl: 354 65% 42%;
}

.signupStatus--refunded {
	--signupStatus__hsl: 208 100% 35%;
}

/* Paginacija */
.tableWrap div.dt-container .dt-paging .dt-paging-button {
	min-width: 2em;
	height: 2em;
	padding: 0 0.5em;
	font-size: 0.8em;
}

.tableWrap div.dt-container .dt-info {
	color: var(--signupList__muted);
	font-size: var(--size__body--small);
}

/* Telefoni: vsaka prijava v svoji vrstici, ime teka pod imenom */
@media (max-width: 49.99em) {
	.tableWrap {
		overflow: visible;
	}

	.tableWrap div.dt-container div.dt-layout-row:not(.dt-layout-table) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing3);
		margin-block: var(--spacing4);
	}

	.tableWrap div.dt-container div.dt-layout-row:not(.dt-layout-table) .dt-layout-cell {
		display: block;
		margin: 0;
		text-align: left;
	}

	.tableWrap div.dt-container .dt-layout-row:first-child .dt-layout-end {
		order: -1;
	}

	.tableWrap div.dt-container .dt-search {
		display: flex;
		flex-direction: column;
		gap: var(--spacing1);
	}

	.tableWrap div.dt-container .dt-search input {
		width: 100%;
		margin-left: 0;
	}

	.tableWrap div.dt-container .dt-length {
		font-size: var(--size__body--small);
	}

	.tableWrap div.dt-container div.dt-layout-row:last-child:not(.dt-layout-table) .dt-layout-cell {
		text-align: center;
	}

	.tableWrap table.dataTable,
	.tableWrap table.dataTable > thead,
	.tableWrap table.dataTable > tbody {
		display: block;
		width: 100% !important;
	}

	.tableWrap table.dataTable > colgroup,
	.tableWrap table.dataTable > tfoot {
		display: none;
	}

	/* Glava tabele postane vrstica gumbov za razvrščanje */
	.tableWrap table.dataTable > thead > tr {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing1);
		padding-bottom: var(--spacing3);
		border-bottom: 2px solid var(--color__primary);
	}

	.tableWrap table.dataTable > thead > tr > th {
		display: block;
		padding: 0.3em 0.4em 0.3em 0.7em;
		border: 1px solid var(--signupList__line);
		border-radius: 2em;
		font-size: var(--size__body--smallest);
		cursor: pointer;
	}

	.tableWrap table.dataTable > thead > tr > th.dt-ordering-asc,
	.tableWrap table.dataTable > thead > tr > th.dt-ordering-desc {
		border-color: var(--color__primary);
		background-color: hsl(var(--hslColor__green) / 0.08);
		color: var(--color__primary);
	}

	.tableWrap table.dataTable > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 0.3em;
		row-gap: var(--spacing1);
		padding: var(--spacing2) 0;
		border-bottom: 1px solid var(--signupList__line);
	}

	.tableWrap table.dataTable > tbody > tr > td {
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		overflow-wrap: anywhere;
	}

	/* Ime teka v svoji vrstici pod imenom, status desno ob imenu */
	.tableWrap table.dataTable > tbody > tr > td:nth-child(3) {
		flex-basis: 100%;
		order: 3;
		color: var(--signupList__muted);
		font-size: var(--size__body--small);
	}

	.tableWrap table.dataTable > tbody > tr > td:nth-child(4) {
		order: 2;
		margin-left: auto;
	}

	.tableWrap table.dataTable > tbody > tr > td.dt-empty {
		flex-basis: 100%;
		text-align: center;
	}
}