/*
   Copyright (C) 2016 Cuckoo Foundation.
   This file is part of Cuckoo Sandbox - http://www.cuckoosandbox.org
   see the file 'docs/LICENSE' for copying permission.
 */

.cuckoo-table {
	width: 100%;
	background-color: #fff;
	text-align: left;
	font-size: 12px;
	border-collapse: collapse;
	border: 1px solid #ccc;

	thead {
		border-bottom: 2px solid #ccc;
		th { white-space: nowrap; }

		tr:not(.table-display-config) {
			th {
				.fa {
					margin-right: 10px;
					&:before {
						content: "\f0dc";

						.sorting-asc & { content: "\f0de"; }
						.sorting-desc & { content: "\f0dd"; }
					}
				}
			}
		}

	}

	tbody {
		tr:not(:last-child) { border-bottom: 1px solid #ccc; }
		tr:nth-child(odd) { background-color: #f5f5f5;  }
		td:empty:before { content: "-"; color: #999; }

		tr.clickable {
			&:hover {
				cursor: pointer;
				background-color: #ddd;
			}
		}

		td {
			&.postsubmit-status-display {
				width: 235px;
				& > div {
					display: flex;
					flex-direction: row-reverse;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}

	thead,
	tbody {
		th, td {
			padding: 10px;

			&.cell-xs { width: 10%; }
			&.cell-sm { width: 20%; }
			&.cell-md { width: 30%; }
			&.cell-lg { width: 50%; }
			&.cell-fill { width: 100%; }

		}

		td {
			&.no-result {
				background-color: #f5f5f5;
				text-align: center;
				padding: 20px 0;

				@include cuckoo-theme('cyborg') {
					background-color: #030e10;
				}
			}
		}

	}

	tfoot {
		text-align: left;
		border-top: 2px solid #ccc;

		td {
			padding: 5px;
			p {
				margin: 0;
			}
		}
	}

	.table-display-config > th,
	.table-display-config > td {
		font-weight: 400;
		padding: 15px;
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #ccc;
	}

	.small-integer { width: 50px; }

	.results-per-page {

		float: right;
		display: inline-flex;
		align-items: center;
		line-height: 21px;

		& > * {
			margin: 0 5px;
		}

		input {
			border: 1px solid #ccc;
			width: 50px;
			text-align: center;
			border-radius: 2px;
		}

	}

	.pagination {
		display: inline-flex;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 3px 0 0 0;

		& > li {
			border: 1px solid #ddd;
			border-left: 0;
			overflow: hidden;

			&:first-child {
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				border-left: 1px solid #ddd;
			}
			&:last-child {
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			& > a {
				display: block;
				padding: 5px 10px;
				line-height: 12px;
				text-decoration: none;
				background-color: #fefefe;
				color: #444;

				.active & {
					background-color: #2980b9;
					color: #fff;
					font-weight: 400;
				}

				.disabled & {
					opacity: .5;
					border-color: rgba(0,0,0,.1);
				}
			}

			&.disabled:hover,
			&.disabled:hover a {
				cursor: default;
			}

		}

	}

	&.table-key-value {
		td {
			width: 50%;
			border-right: 1px solid #ccc;

			&:last-child { border: 0; }

			.col-3 & { width: 33%; }
		}
	}

	.loading {
		margin: 0;
	}

	.less-entries > td {
		text-align: center;

		.badge {
			background-color: #ccc;
		}

		&:nth-child(odd) {
			background-color: #f5f5f5;
		}
	}

	&__fullscreen {

		@extend .cuckoo-table;
		table-layout: fixed;
		max-width: 100%;
		font-size: 14px;

		thead {
			& > tr:first-child th {
				border-top: 0;
			}
		}

		tbody {

			td {
				padding: 15px;
				word-wrap: break-word;
			}

		}

		.pagination {

			a {
				padding: 8px 10px;
			}

			.first a,
			.prev a,
			.next a,
			.last a {
				padding: 4px 10px 4px 10px;
			}

		}

	}

	@include cuckoo-theme('cyborg') {

		border-color: $cyborg_border_color;
		background-color: $cyborg_primary_color;

		thead {
			@extend %cyborg-heading;
			border-bottom: 1px solid $cyborg_border_color;
		}

		tbody tr,
		tfoot {
			border-color: $cyborg_border_color;
		}

		tr:nth-child(odd) {
			background-color: $cyborg_primary_color;
		}

		tbody tr.clickable:hover {
			background-color: rgba(0,0,0,.2);
			color: #fff;
		}

		.table-display-config > th,
		.table-display-config > td {
			border-color: lighten($cyborg_border_color, 10);

			input {
				border: 1px solid darken($cyborg_border_color, 10);
			}
		}

		.pagination {

			& > li {
				border-color: lighten($cyborg_border_color, 10);
			}

		}

		.less-entries td {
			background-color: darken($cyborg_primary_color, 5);

			.badge {
				background-color: $cyborg_primary_color;
			}
		}

	}

	@include cuckoo-theme('night') {

		border-color: $night_border_color;
		background-color: $night_primary_color;

		tr:nth-child(odd) {
			background-color: lighten($night_primary_color, 5);
		}

		thead {
			background-color: $night_panel_color;
			border-bottom: 1px solid $night_border_color;
		}

		tbody tr,
		tfoot {
			border-color: $night_border_color;
		}

		tbody tr.clickable:hover {
			background-color: rgba(0,0,0,.2);
		}

		.table-display-config {
			background-color: #152d3b;
		}

		.table-display-config > th,
		.table-display-config > td {
			border-color: lighten($night_border_color, 10);

			input {
				border: 1px solid darken($night_border_color, 10);
				background-color: lighten($night_primary_color, 5);
			}
		}

		.pagination {

			& > li {
				border-color: lighten($night_border_color, 0);

				& > a {
					background-color: $night_primary_color;
					border: 0;
					color: $night_text_color;
				}
			}

		}

		.less-entries td {
			background-color: #202225;

			.badge {
				background-color: #3a3e44;
			}
		}

	}

	&#submission-task-table {

		// status circles
		.status {
			display: inline-block;
			vertical-align: middle;
			background-color: #bbb;
			width: 8px;
			height: 8px;
			border-radius: 50%;

			&.status-pending { background-color: #bbb; }
			&.status-running { background-color: #d2e24c; }
			&.status-completed { background-color: #66ca4d; }
			&.status-reported {
				background-color: transparent;
				color: #66ca4d;
				width: auto;
				height: auto;
				&:before {
					@extend .fa;
					content: "\f00c";
				}
			}

		}

	}

	.badge {

		padding: 8px 15px;
		color: #fff;
		font-weight: 700;
		border-radius: 4px;

		&.danger { background-color: #F4014F; }
		&.warning { background-color: #FF9F00; }
		&.success { background-color: #94BE69; }

	}

}
