//@import "../../../abstracts/abstracts";

#classlist-dashboard-header,
#classlist-dashboard-footer {
	float: left;
	width: 100%;
	padding: ($padding-default / 2) $padding-default;
	border-radius: $border-radius-default;
	div[data-element-type="Graph"] {
		background: $graph-background;
		border-radius: $border-radius-default;
		margin-bottom: 10px;
		&:only-child {
			//height: calc(100% - 10px); // Commented out because it prevented the dashboard to take the full height.
			height: 100%;
		}
		.apexcharts-canvas {
			background-color: transparent !important;
			svg.apexcharts-svg {
				background-color: transparent !important;
			}
		}
	}
}

.classlist-search-list {
	#classlist-dashboard-header {
		padding: 0 0 $padding-default 0;
	}

	#classlist-dashboard-footer {
		padding: $padding-default 0 0 0;
	}
}

// .folder-document-class-list-dashboard-document {
// 	.dbq-form {
// 		.topic {
// 			.element:last-of-type  {
// 				margin-bottom: 0 !important;
// 			}
// 		}
// 	}
// }

// temporary - To-do: change all containers to flex containers, not only dashboards
.folder-document-class-list-dashboard-document {
	.topic[data-topic-type-code="Dashboard"] {
		.row {
			.flex-container{
				gap: $margin-default;

				.dbq-column {
					margin-right: 0px;
					display: flex;
					flex-direction: column;
					gap: $margin-default;

					.element-graph {
						margin: 0 !important;
					}
				}
			};
		}
	}
}

// Temporary fix for excessive height in dashboard cards
.folder-document-class-list-dashboard-document, .folder-document-class-list-dashboard-document .dbq-form {
	.topic[data-topic-type-code="Dashboard"] {
		.row.dbq-wrapper {
			h2 {
				margin-bottom: $margin-default;
			}

			h2, .dbqdb-element-header, p {
				//margin-left: $margin-default;
				//margin-right: $margin-default;
			}

			.flex-container {
				.dbq-column {
					gap: 0;
				}
			}
		}
	}
}

// end temporary

.element-graph {
	-webkit-box-shadow: $global-box-shadow;
	-moz-box-shadow: $global-box-shadow;
	box-shadow: $global-box-shadow;
	background: $graph-background;
	border-radius: $border-radius-default;
}

.classlist-dashboard {
	div[data-element-type="Graph"] {
		background: $graph-background;
		&.has-scrollbar {
			@include scrollbar($graph-background, $border-radius-default, $sidebar-scrollbar-thumb-color, $color-primary, 12px);
		}
	}
	.btn-default {
		border: 0;
		padding: 5px;
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
		svg {
			float: left;
			padding: 3px;
		}
	}
	.dbq-form {
		section {
			background: 0;
		}
	}
	div[data-topic-name="Dashboard"] {
		padding: 0;
		margin: 0;
	}
	div[data-element-type="Graph"] {
		padding: 0;
		width: 100%;
		height: 100%;
		//height: auto; // Commented out because the row element wasn't using the full height of the column (Tijdregistratie > overzicht > jaar)
	}
	div[type="graph"] {
		height: 100%;
		border-radius: $border-radius-default;
	}
	div[type="graph"].dbq-graph-full-screen {
		border-radius: 0;
	}
	div[data-element-type="Text"] {
		padding: 0;
	}
	div[data-element-type="Header"] {
		padding: 0;
		line-height: 20px;
		font-weight: 500;
		font-size: 18px;
		border-top: 0;
	}
	.ui-chart-legend-items-list {
		margin: 0;
	}
	.dbq-graph-scale {
		.btn-default {
			padding: 5px 10px !important;
			font-size: 14px !important;
			font-weight: 600 !important;
			line-height: 20px !important;
		}
	}
	.folder-document-class-list-dashboard-document {
		//padding: ($padding-default / 2) $padding-default; // Removed padding because of double padding; classlist-dashboard-container should handle the padding
	}
}

.folder-document-class-list-dashboard-document {
	float: left;
	width: 100%;
	position: relative;	
}


.dbqdcld-collapsible-container {
	float: left;
	position: relative;
    width: 100%;
	margin: 0 0 $margin-default 0;
    padding: $padding-default;
    border: 1px solid $modal-border-color;
    border-radius: $border-radius-default;

	.dbqdcld-collapse-button {
		position: absolute;
		z-index: 2;
		bottom: -15px;
		left: calc(50% - 15px);
		background: $global-background-color-default;
		color: $text-color-default;
		border: none;
		padding: 0;
		cursor: pointer;
		width: 30px;
		height: 30px;
		outline: 0;
		border-radius: 50%;
		//transition: all 0.5s ease;
		box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.4);

		svg {
			fill: $text-color-default;
		}

		.dbqdlcd-collapse-button-name {
			font-weight: 500;
			margin-left: 10px;
		}
	}

	// 0 = Collapsed
	&[data-collapsed-state="0"] {
		border-width: 1px; // Setting border width to 1px. When we're collapsed the border bottom and top will stick to each other. Combined they will be 2px again.
		padding: 0;
		margin-top: $margin-default;

		.dbqdcld-collapse-button {
			display: flex;
			align-items: center;
			background: $color-primary;
			color: $color-white;
			width: initial;
			border-radius: $border-radius-default;

			svg {
				fill: $color-white;
			}
		}

		.folder-document-class-list-dashboard-document {
			display: none;
		}	
	}

	// 1 = Expanded
	&[data-collapsed-state="1"] {
		.dbqdcld-collapse-button {
			transform: rotate(180deg);
		}

		.dbqdlcd-collapse-button-name {
			display: none;
		}
	}

	.dbq-form .row[data-element-type=Button], .action-button a, p.dbqdb-insert-property {
		margin-bottom: 0;
	}
}

// Processing container for ExecuteHeader & ExecuteFooter dashboards, which is used when GetListState returns a ListState of Processing.
.dbqdcld-processing-container {
    position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
    background: $loader-background;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

// When the processing container is displayed inside a collapsible container, it should have the same border radius.
.dbqdcld-collapsible-container {
	.dbqdcld-processing-container {
		border-radius: $border-radius-default;
	}
}

// Processing container for ExecuteHeader & ExecuteFooter dashboards, which is used when GetListState returns a ListState of Processing.
.dbqdcld-processing-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $loader-background;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

// When the processing container is displayed inside a collapsible container, it should have the same border radius.
.dbqdcld-collapsible-container {
    .dbqdcld-processing-container {
        border-radius: $border-radius-default;
    }
}

// Styling used for collapsible containers inside a sidepanel
.dbqdcltg-sidepanel {
	.dbqdcld-collapsible-container {
		width: calc(100% - 30px);
		margin: $margin-default;
		padding: 0;
		
		// 0 = Collapsed
		&[data-collapsed-state="0"] {
			margin: ($margin-default * 2) $margin-default;
		}
	}
}

 // Dashboard resource details container
.dbq-resource-details-container {
	margin-bottom: 0px !important;

	.dbqdb-element {
		justify-content: center;
		align-self: center;

		.dbqdb-form-group.dbqmd-form-group {
			box-shadow: none !important;
			border-radius: 0 !important;

			.dbq-image-file-upload.dbq-has-image-preview {
				background: none !important;
				border: none !important;
				margin-right: $margin-default;

				.dbqdb-image-preview {
					margin: 0;
				}
			}

			.dbqmd-title-label {
				display: none !important;
			}
			
			.dbqmd-input, .dbqmd-input:disabled {
				background: none !important;
				border: none !important;
			}

			input[type="text"] {
				font-size: 18px;
				font-weight: bold;
			}

			.dbqmd-ripple {
				display: none;
			}
		}

		.dbqdb-insert-property-header {
			display: none;
		}

		p.dbqdb-insert-property {
			margin-left: 15px;
			font-size: 18px !important;
			font-weight: bold !important;
		}
	}

	.dbqmd-col:has(.dbq-round-image) {
		flex-direction: row;

		.dbq-round-image:has(p.dbq-round-image) {
			flex: 0 0 100px;
			margin-bottom: 0;
			
			p.dbq-round-image {
				max-height: 100px;
				max-width: 100px;
				min-height: inherit;

				& > img.dbqdb-image {
					min-width: 85px;
    				min-height: 85px;
				}
			}
		}

		input.dbqmd-input.dbqmd-has-value {
			padding-top: 0;
		}
	}
}

// Containers for responsive views
#classlist-dashboard-container {
	container-type: inline-size;
	container-name: dashboard-container-width;
}

#dashboard-list-container {
	container-type: inline-size;
	container-name: dashboard-list-container-width;
}

.dbqdcltg-sidepanel {
	container-type: inline-size;
	container-name: sidepanel-width;
}

// Dashboard resource overview
.dbqmd-col:has(.dbq-resource-overview) {
	[data-element-type="Line"] {	// Remove magin from hr's (lines) in dashboard overviews
		margin-bottom: 0px;
	}
}

.dbq-resource-overview {
	h1, h2, h3 {
		color: $text-color-default;
		font-size: 1.6rem;
	}

	.flex-container {
		gap: 0px !important;

		.dbq-column {
			position: relative;
			padding: 7.5px 15px;
			border-radius: 0;
			gap: 0px !important;
			background: $color-layer-2;

			&:first-of-type {
				flex: 0 0 25%;
				background: #72e0a0; 
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;

				&:not(:last-of-type) {
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						right: -10px;
						transform: translateY(-50%);
						z-index: 1;
						
						/* Create triangle */
						width: 0; 
						height: 0; 
						border-top: 10px solid transparent; 
						border-bottom: 10px solid transparent; 
						border-left: 10px solid #72e0a0;
					}
				}
			}

			&:nth-of-type(n+3) {
				&::before {
					content: '+';
					position: absolute;
					left: -15px;
					top: 50%;
					transform: translateY(-50%);
					font-size: 18px;
					font-weight: bold;
					color: $text-color-default;
					pointer-events: none;
				}

				&.dbq-resource-overview-seperate-last-column:last-of-type::before {
					content: none;
				}
			}

			&:last-of-type {
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
			}

			h1, h2, h3, h4 {
				color: $text-color-default;
				font-size: 1.4rem;
			}

			h4 {
				font-size: 1rem;
			}

			.dbqdb-element {
				margin-bottom: 0px;
			}

			&.dbq-resource-overview-seperate-last-column:last-of-type {
				&::before {
					content: '';
				}
			}
		}
		
		&.dbq-resource-overview-subtract {
			.dbq-column {
				&:nth-of-type(n+3) {
					&::before {
						content: '-';
					}
				}
			}
		}

		&.dbq-resource-overview-seperate-last-column {
			.dbq-column {
				&:last-of-type {
					background: $color-layer-4;

					&::before {
						content: none;
					}
				}
			}
		}
	}

	.dbq-resource-overview-total,
	.dbq-resource-overview-subtotal {
		hr {
			width: 25%;
			margin-top: 0px !important;
			border-top: 1px solid #5ab88c;
		}

		.flex-container {
			.dbq-column {
				flex: 0 0 25%;
				background: #72e0a0; 

				&:first-of-type {    
					&:not(:last-of-type) {
						&::after {
							display: none;
						}
					}
				}
			}
		}
	}

	.dbq-resource-overview-total {
		.flex-container {
			.dbq-column {
				flex: 0 0 25%;
				background: #72e0a0; 

				&:first-of-type {
					background: #5ab88c;

					h1, h2, h3, h4 {
						color: $color-white;
					}
				}
			}
		}
	}

	&.dbq-max-width-800 {
		max-width: 800px;
	}

	&.dbq-max-width-1024 {
		max-width: 1024px;
	}
}

// Dashboard control flex columns
.flex-container.dbq-resource-overview-flex {
	flex-direction: column;

	.dbq-column {
		& > [data-element-type="Line"]:first-child {
			margin-top: 15px;
		}
	}
}

@container dashboard-container-width (min-width: 1024px) {
	.dashboard-list-item,
	.folder-document-class-list-dashboard-document {
		.flex-container.dbq-resource-overview-flex {
			flex-direction: row;
			gap: 30px;

			.dbq-column {
				& > [data-element-type="Line"]:first-child {
					display: none;
				}
			}
		}
	}
}

@container dashboard-list-container-width (min-width: 1024px) {
	.dashboard-list-item,
	.folder-document-class-list-dashboard-document {
		.flex-container.dbq-resource-overview-flex {
			flex-direction: row;
			gap: 30px;

			.dbq-column {
				& > [data-element-type="Line"]:first-child {
					display: none;
				}
			}
		}
	}
}

// Change background color for dashboard in side panels
.dbqdcltg-sidepanel {
	.dbq-resource-overview {
		.flex-container {
			.dbq-column:not(:first-of-type) {
				background-color: $color-layer-0;
			}

			&.dbq-resource-overview-flex {
				flex-direction: column;
			}
		}
	}
}

@container sidepanel-width (min-width: 1024px) {
	.dbqdcltg-sidepanel {
		.folder-document-class-list-dashboard-document {
			.flex-container.dbq-resource-overview-flex {
				flex-direction: row;
				gap: 30px;

				.dbq-column {
					& > [data-element-type="Line"]:first-child {
						display: none;
					}
				}
			}
		}
	}
}