/**
 * @file plugins/themes/material/styles/backend/index.less
 *
 * Copyright (c) 2021 Madi Nuralin
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Material backend theme stylesheet
 *
 */

@import "variables.less";
@import "../fonts/montserrat.less";

/**
 * Generic improvement on backend stylesheet
 */

* {
	font-family: @font;
}

body {
	overflow-y: scroll;
}

header {
	nav {
		width: 100%;
	}
}

.app__contextTitle {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	padding: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 1px;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1;
	color: #000;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: @radius;
	text-transform: uppercase;

	&:hover {
		color: #000;
		border-color: transparent;
	}

	&:focus {
		outline: none;
		border-color: transparent;
		color: #000;
	}
}

.pkpPublication__header {
	margin: 0;
}

input[type="date"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="week"],
textarea,
select,
.tagit {
	-webkit-appearance: none !important; /* Override Safari search input styles */
	//display: inline-block !important;
	width: 100% !important;
	max-width: 100% !important;
	//padding:.1rem .75rem !important;
	font-size: 0.9rem !important;
	/*line-height: 180%;*/
	color: #212121 !important;
	vertical-align: middle !important;
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	font-weight: 400 !important;
	border-radius: 5px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.05) inset !important;
	outline: none !important;

	&:focus {
		outline: none !important;
		border-color: #5889fa !important;
		box-shadow: 0 0 0 0.2rem rgba(6, 66, 205, 0.25) !important;
	}
}	

.border, .pkpFormField--options, .pkpFormField--upload__preview {
	padding: 10px !important;
	border-radius: 8px !important;
	border-color: #ddd !important;
}

.pkp_helpers_half, .pkp_helpers_quarters, .pkp_helpers_quarter, .pkp_helpers_threeQuarter {
	width: 100% !important;
}

.pkp_form .inline {
	padding-right: 0;
}

.ui-helper-hidden-accessible, .ui-datepicker {
	display: none !important;
}

.pkpFormField--color, .vc-chrome {
	border-radius: 8px !important;
	border-color: #ddd !important;
	width: 100% !important;
}

.pkp_modal_panel {
	border-radius: 8px !important;
	.close.pkpModalCloseButton {
		&:hover, &:focus, &:active {
			border-color: transparent;
		}
	}
}

.pkpFormGroup {
	padding: 1rem !important;
}

.modal {
	position: relative !important;
	display: block !important;
}

.pkpDateRange__inputGroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	legend {
		font-size: 0.75rem;
	}

	label {
		display: block;
	}
}

.pkpDateRange__optionGroup .pkpButton, .pkpDateRange__form .pkpButton {
	width: 100% !important;
        margin-top: 2px !important;
}

/**
 * Adaptive stylesheet
 */

@media (max-width: @break-width) {

	.listPanel__itemSummary {
		flex-direction: column;
		width: 100%;
	}

	.listPanel__itemIdentity {
		flex-direction: column;
		width: 100%;
		padding: 0;
	}

	.listPanel__item--submission__id {
		position: relative;
	}

	.listPanel__itemActions {
		flex-direction: column;
		width: 100%;

		.pkpButton, .expander {
			width: 100%;
			margin: 4px 2px 4px 2px;
		}

	}

	// Header
	.pkpHeader {
		flex-direction: column;
	}

	.pkpHeader__actions {
		width: 100%;
		flex-direction: column;
		justify-content: space-around;

		.pkpButton {
			width: 100%;
			margin: 4px 2px 4px 2px;
		}

		.pkpSearch {
			width: 100%;
			margin: 4px 2px 4px 2px;
			label {
				width: 100%;
				.pkpSearch__input {
					width: 100%;
				}
			}
		}
		& >:first-child {
			margin-left: 0;
		}
	}

	.pkpPagination {
		display: flex;
		justify-content: center;
	}

	.pkpButton, .pkp_button, .cancelButton, .cancel, .ok, .pkpModalConfirmButton, .pkpModalCloseButton {
		width: 100%;
		margin: 4px 2px 4px 2px;
		text-align: center;
	}

	.pkpFormPage__buttons {
		width: 100%;
	}

	.pkp_workflow_sidebar {
		width: 100% !important;
	}

	.pkp_workflow_content {
		width: 100% !important;	
	}

	table {
		tbody, thead, tr, colgroup col, th, td {
			display: block;
			width: 100% !important;
		}
	}

	.pkp_uploader_drop_zone {
		.pkp_uploader_button {
			margin-top: 16px;
		}
	}

	.pkp_helpers_half, .pkp_helpers_quarters, .pkp_helpers_quarter, .pkp_helpers_threeQuarter {
		width: 100% !important;
	}

	.pkp_form .inline {
		padding-right: 0;
	}

	.pkpFormGroup__heading, .pkpFormGroup__fields {
		width: 100% !important;
		padding-left: 0 !important;
		float: left !important;
	}

	.pkpFormGroup__locale {
		padding: 0 !important;
		width: 100% !important;
		margin-top: 5px;
	}

	.pkpStats__graphSelectors {
		flex-direction: column;

		.pkpStats__graphSelector {
			flex-direction: column;
			margin-left: 0 !important;
		}
	}

	.pkpStats--editorial__stageWrapper {
		.pkpStats--editorial__stageChartWrapper {
			float: none !important;
			width: 100% !important;
		}
		.pkpStats--editorial__stageList {
			position: unset !important;
			width: 100% !important;
			-webkit-transform: none !important;
    		transform: none !important;
    		display: flex !important;
    		flex-direction: column !important;
    		align-items: center !important;
    		text-align: center !important;
		}
	}
}