/*
	Panou lateral (drawer) pentru formularele modulelor din Anexa 1.
	Inlocuieste panoul care se deschidea deasupra tabelului si muta scroll-ul paginii.
	Continutul vine din aceleasi functii draw_* si pastreaza marcajul Dashforge.
*/

:root {
	--erpa-bara-scroll: 0px;
}

.erpa-drawer-fundal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(27, 36, 51, 0.44);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.24s ease, visibility 0s linear 0.24s;
	z-index: 1040;
}

.erpa-drawer-fundal.este-deschis {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.24s ease, visibility 0s linear 0s;
}

.erpa-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 720px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border-left: 1px solid #e5e9f2;
	box-shadow: -12px 0 32px rgba(27, 36, 51, 0.14);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s;
	z-index: 1045;
}

/* Inchis, panoul iese complet din pagina: altfel latimea lui ar da scroll orizontal. */
.erpa-drawer[hidden] {
	display: none;
}

.erpa-drawer.este-deschis {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

.erpa-drawer.erpa-drawer-lat {
	width: 1040px;
}

.erpa-drawer-continut {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px 24px 20px;
}

/* Formularele vin cu propriul card-header; il tinem lipit de marginea de sus. */
.erpa-drawer-continut .card-header {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0 -20px 16px -20px;
	padding: 16px 20px;
	background-color: #fff;
	border-bottom: 1px solid #e5e9f2;
}

.erpa-drawer-continut .card-header h6 {
	margin-bottom: 0;
	line-height: 1.6;
}

.erpa-drawer-continut .card {
	border: 0;
	box-shadow: none;
	background-color: transparent;
}

.erpa-drawer-continut .card-body {
	padding-left: 0;
	padding-right: 0;
}

/* Butonul de inchidere din antetul formularului, marit ca sa fie usor de nimerit. */
.erpa-drawer-continut .card-header .close {
	float: right;
	font-size: 24px;
	line-height: 1;
	opacity: 0.8;
}

.erpa-drawer-continut .card-header .close:hover {
	opacity: 1;
}

/* Pagina de sub drawer nu mai deruleaza, dar isi pastreaza pozitia. */
body.erpa-drawer-blocat {
	overflow: hidden;
	padding-right: var(--erpa-bara-scroll, 0px);
}

body.erpa-drawer-blocat .navbar-header-fixed,
body.erpa-drawer-blocat .fixed-top {
	margin-right: var(--erpa-bara-scroll, 0px);
}

/*
	Select2 si datetimepicker isi deseneaza panourile in <body>, cu pozitie calculata
	fata de document. Pagina din spate nu deruleaza cat e drawer-ul deschis, deci
	pozitia ramane buna; le ridicam doar peste panou.
*/
.select2-container--open,
.xdsoft_datetimepicker {
	z-index: 1060;
}

@media (max-width: 1200px) {
	.erpa-drawer.erpa-drawer-lat {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.erpa-drawer {
		width: 100%;
	}

	.erpa-drawer-continut {
		padding: 0 15px 20px 15px;
	}

	.erpa-drawer-continut .card-header {
		margin: 0 -15px 12px -15px;
		padding: 14px 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erpa-drawer,
	.erpa-drawer-fundal {
		transition: none;
	}
}