@import "variables.less";

// grid report
.grid-report .plot {
	margin: 15px;
	display: none;
	height: 300px !important;
	width: 97% !important;
}

.grid-report .ui-widget {
	border: none !important;
	outline: none !important;
	border-top: 1px solid @border-color !important;
	background-color: @light-bg !important;
}

.grid-report .show-zero {
	margin: 10px;
	display: none
}

// column picker
.column-picker-dialog {
	.column-list {
		margin: 15px 0;
		border: 1px solid @border-color;

		.column-list-item {
			padding: 10px;
			border-bottom: 1px solid @border-color;
		}

		.column-list-item:last-child {
			border-bottom: none;
		}

		.sortable-handle {
			cursor: move;
		}

		.sortable-chosen {
			background-color: @light-yellow;
		}

		.fa-sort {
			margin: 0px 7px;
			margin-top: 9px;
			margin-right: -15px;
		}

		.form-control {
			display: inline-block;
			width: 89%;

			@media (max-width: @screen-xs) {
				width: 77%;
			}
		}

		.close {
			margin: 2px 7px 0px;
		}
	}

	.add-btn {
		margin-bottom: 2px;
	}
}

.report-wrapper {
	overflow: auto;
}

.chart-wrapper {
	border-bottom: 1px solid @border-color;
}

.groupby-box {
	border-bottom: 1px solid #d1d8dd;
	padding: 10px 15px 3px;

	.remove-groupby {
		margin-top: 6px;
		margin-left: 15px;
	}

	.groupby-field {
		padding-right: 15px;
		width: calc(100% - 36px);

		.frappe-control {
			position: relative;
		}
	}
}

.report-summary {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-auto-rows: minmax(62px, 1fr);
	column-gap: 15px;
	row-gap: 20px;
	align-items: center;

	padding: 15px 15px;
	border-bottom: 1px solid @border-color;
	margin-right: 0px;
	margin-left: 0px;

	.summary-label {
		font-weight: normal !important;
	}

	.summary-value {
		margin-top: 8px;
		margin-bottom: 5px;
		overflow: hidden !important;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-feature-settings: "tnum";

		div {
			text-align: left !important;
			overflow: hidden !important;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

// for sm and above
@media (min-width: @screen-xs) {
	.groupby-box .row > div[class*="col-sm-"] {
		padding-right: 0px;
	}

	.groupby-field {
		width: 65% !important;

		.frappe-control {
			position: relative;
		}
	}
}

.tag-groupby-area {
	padding: 10px 150px 10px 10px;
	position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
}

// Enable tnum for report
.dt-scrollable .dt-cell__content {
	font-feature-settings: "tnum", "zero";
}