/*****************************************************************************************************
Ce ficher met en page les différents typed de champs générés par from-field.php

Structure du fichier:
    I. Reset Webkit (spécifique au formulaire)

    II. Général
        .input_container
        .groupe_input container
        .input_label
        'input', 'textarea', 'Date', 'Password', 'E-mail', 'select'

    III. Gestion des Etats   
        :focus
        
    IV. input types (spécifiques)
        'ul', 'ul-multiple'
        'color-list'
        'icon-list'

        'input-checkbox'
        'input-checkbox-list'
        'input-radio-list'
        'input-radio-evaluation'
        
        'input-file'
        'input-hidden',
    
    input types (Pas utilisés, à rajouter si besoin) 'datetime' 'time' 'datetimefield' 'evaluation' 'input-url' 'no-input' 'select-optgroup' 'select-multiple'
    
****** Comment créer un champ de formulaire ******

    1. Créer: <div classe="input_container> 

    2. Utiliser self::_render() avec le type de composant voulu (clé "type"),
        Exemple:
        <?php self::_render('components/form-field', [
            'name' => 'demande_file_description',
            'values' => $data...,
            'type' => 'input-text'
             etc ...
        ]); ?> 
    
    3. Fermer </div>

    !!!!ATTENTION!!!!
    1. Certains types de champs (clé 'type' dans le composant), ne sont pas encore parametrés dans le fichier "form-field.php"

        Si le label ne s'affiche pas au bon endroit, il faut:
        RAJOUTER class="input_label" (attention: il s'agit d'une autre classe utile pour le js et le backend)
        
        Si l'icône n'est pas au bon endroit
        RAJOUTER class="input_icon"
    
    2. Certains types de champs (clé 'type'=" ") ne sont pas DESIGNES sur ce fichier "form-field.css"
    
        A chaque nouveau composant de type de champ designé, il faut,
        dans la rubrique "II. input types" des commentaires de ce document:
        
        - Mettre un commentaire avec le titre du type de champ
        - Designer à la suite

    SVP: utiliser un maximum les classes globales et faire du spécifique seulement si nécessaire

date: 10.01.24
Créer par: Michaël Fiechter
*****************************************************************************************************/


/*** I Reset Webkit spécitique au formulaire ***/

/* Reset du placeholder */
input::placeholder,
textarea::placeholder {
	color: var(--blue-gray-200);
}


/**************** II Général *******************/
.input_container {
	position: relative;

}
/*
.input_container:first-of-type {
	
}

.infos-form_container>.input_container:first-of-type {
	
}
*/
#disponibilite{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.appointment_container{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.groupe_input_container {
	display: flex;
	flex-direction: row;
	gap: 48px;
	/*margin: 24px 0px;*/
}

.groupe_input_container>.input_container:first-of-type {
	width: 80%;
}

.groupe_input_container>.input_container {
	margin: 0px;
}

.groupe_title {
	font-size: 1em;
	font-weight: 400;
	color: var(--blue-gray-800);
}

#divEmailRefused{
	margin: 10px 0 0 0;
}

.groupe_input_emails_container{
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.groupe_input_emails_container_disabled{
	display: none;
}

.groupe_input_emails_container .input_container{
	width: 45%;
}

.groupe_input_emails_container  .input_checkbox_container{
	width:10% !important;
}

.input_label {
	/*place le label sur le bord du champ*/
	position: absolute;
	left: 16px;
	top: -9px;
		z-index: 9;
	padding: 0px 6px;

	background: var(--white);
	color: var(--blue-gray-400);

	font-size: var(--font-size-100);
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-radius: 2px;
}

/*Karim, ticket 24#381*/

input,
textarea,
select,
span.input /*C'est ce qui gère la couleur de tous les ul et select*/ {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 52px;
	max-height: 130px;
	/*margin: 10px;*/
	padding: 14px 16px;
	border: 1px solid var(--blue-gray-600);
	border-radius: 6px;
	font-size: var(--font-size-300);
	line-height: 22px;
	color: var(--blue-gray-700);
	background: var(--white);
}

input {
  /* color:red; */
color: var(--blue-gray-500);
}

span.input {
	/* color:red; */
	color: var(--blue-gray-500);
	cursor: default;
}

#intervenantsField > span.input {
	gap: 8px;
	flex-wrap: wrap;
	max-height: none;
	min-height: 52px;
}

.selected-item {
	background-color: var(--primary-050, #E3F3FF);
	padding: 8px 16px;
	width: fit-content;
	border-radius: 16px;
	flex-wrap: wrap;
}

.selected-item-remove {
	font-weight: 800;
	cursor: pointer;
}

input::placeholder {
color: var(--blue-gray-500);
}

input[type="date"] {
color: var(--blue-gray-500);
}

input[type="date"]::content, input[type="date"]::placeholder, input[type="date"]::first-letter {
  /* color: var(--blue-gray-200); */
  color:gold;
}
::-webkit-calendar-picker-indicator {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23546E7A" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
textarea {
color: var(--blue-gray-500);
}

textarea::placeholder {
	color: var(--blue-gray-500);
}


select {
color: var(--blue-gray-500);
}

select::placeholder {
color: var(--blue-gray-500);
}

span.input::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
	right: 16px;
	width: 22px;
	height: 22px;
	background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_3280_8660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24"><rect x="0.00488281" width="22" height="22" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_3280_8660)"><path d="M12.0049 15.3748L6.00488 9.3748L7.07988 8.2998L12.0049 13.2498L16.9299 8.3248L18.0049 9.3998L12.0049 15.3748Z" fill="%2378909C"/></g></svg>');
	background-repeat: no-repeat;
	transform: rotate(0deg);
	transition: transform 0.2s ease-in-out;
}

.input_container.is_visible .input::after {
	transform: rotate(-180deg);
	transition: transform 0.2s ease-in-out;
}

.input_icon {
	position: absolute;
	right: 16px;
	top: 15px;
}
select {
	appearance: none;
	position: relative;
}

select.custom-select {
	background-image: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_3280_8660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24"><rect x="0.00488281" width="22" height="22" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_3280_8660)"><path d="M12.0049 15.3748L6.00488 9.3748L7.07988 8.2998L12.0049 13.2498L16.9299 8.3248L18.0049 9.3998L12.0049 15.3748Z" fill="%2378909C"/></g></svg>');
	background-repeat: no-repeat;
	transform: rotate(0deg);
	transition: transform 0.2s ease-in-out;
	background-position: 96% 14px;
}

select.custom-select:focus {
	background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_2699_18545" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25"><rect width="24" height="24" transform="matrix(1 0 0 -1 0.741699 24.3438)" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_2699_18545)"><path d="M12.7417 8.96914L6.7417 14.9691L8.1417 16.3691L12.7417 11.7691L17.3417 16.3691L18.7417 14.9691L12.7417 8.96914Z" fill="%2378909C"/></g></svg>')
}



/************ Gestion des Etats   ****************/

/*** Required (demande refusée) ***/
input.required,
textarea.required {
	border-color: var(--error);

}

input.required::placeholder,
textarea.required::placeholder,
.required.input_label {
	color: var(--error)
}

/**** :focus ****/
/*border*/
input:focus,
textarea:focus,
.is_visible span.input,
div[data-status="open"] {
	outline: 1px solid var(--blue-gray-700);
}

/*placholder*/
input:focus::placeholder,
textarea:focus::placeholder,
div[data-status="open"] {
	color: var(--blue-gray-900);
}

input.required:focus::placeholder,
textarea.required:focus::placeholder,
.required.input_label:focus {
	/* reset les champs requierd */
	color: var(--blue-gray-900);
}

/*Label*/
.input_container:focus-within .input_label,
div[data-status="open"] .input_label {
	color: var(--blue-gray-900);
}

/**** news character count error ****/
#description-input-container > textarea {
	resize: none;
}

.textinput-form-error {
	color: var(--error) !important;
	border-color: var(--error);
}

.char-count-error {
	color: var(--red-300) !important;
}

.textinput-form-error:focus {
	/* outline: 1px solid #ff0000; */
	outline: none;
}

#description-input-container {
	position: relative;
	display: flex;
}

.description-textarea {
	flex: 1;
}

#description-char-count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 12px;
	color: var(--blue-gray-300);
}
/*
input.required:focus,
textarea.required:focus {
	/* reset les champs requierd
		/* border-color: var(--blue-gray-900);
}*/


/************** II Input Type *****************/

/**** ul ****/
.input_type_ul, .input_type_ul_multiple {
	position: absolute;
	display: none;
	visibility: hidden;
	top: 64px;
	margin: 0 0;
	padding: 0 0;
	width: 100%;
	min-width: 110px;
	background: #FFF;
	border-radius: 14.167px;
	box-shadow: 0px 9.44444465637207px 18.88888931274414px 5.902778148651123px rgba(0, 0, 0, 0.15);
	color: var(--blue-gray-900);
	list-style: none;
	z-index: 2;
	font-size: var(--font-size-600);

}


.input_type_ul li, .input_type_ul_multiple li {
	height: 50px;
	padding: 0px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-300);
	border-bottom: 1px solid var(--blue-gray-200, #B0BEC5);
	transition: background-color 0.5s;
}

.input_type_ul li:first-of-type, .input_type_ul_multiple li:first-of-type {
	border-top: none;
	border-top-left-radius: 14.167px;
	border-top-right-radius: 14.167px;
}

.input_type_ul li:last-of-type, .input_type_ul_multiple li:last-of-type {
	border-bottom: none;
	border-bottom-left-radius: 14.167px;
	border-bottom-right-radius: 14.167px;
}

.input_type_ul li:hover, .input_type_ul_multiple li:hover {
	cursor: pointer;
	background-color: #e9e9e9;
}

.input_type_ul li.selected, .input_type_ul_multiple li.selected {
	cursor: pointer;
	background-color: #e9e9e9;
}

.input_type_ul>li>img, .input_type_ul_multiple>li>img {
	margin-right: 24px;
}

.input_type_ul li.isTouched, .input_type_ul_multiple li.isTouched {
	background-color: var(--blue-gray-050);
}

/* Etat visible -> lorsque la liste déroulante est visible */
.is_visible .input_type_ul:first-of-type, .is_visible .input_type_ul_multiple:first-of-type {
	display: block;
	visibility: visible;
		z-index: 999;
}

.is_visible>label>img {
	transform: rotate(180deg);
}


/**** color-list et icon-list ****/
.color-list-input,
.icon-list-input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--blue-gray-600);
	border-radius: 6px;

	display: flex;
	justify-content: space-between;

	font-size: var(--font-size-300);
	line-height: 22px;
	color: var(--blue-gray-600);
}

.color-list-value,
.icon-list-value img {
	min-width: 22px;
	height: 22px;
	flex-grow: 1;
}

.color-list-select,
.icon-list-select {
	background-color: white;
	padding: 15px;
	position: absolute;
	top: 60px;
	z-index: 1000;
	border-radius: 14.167px;
	box-shadow: 0px 9.44444465637207px 18.88888931274414px 5.902778148651123px rgba(0, 0, 0, 0.15);
	width: 100%;
}

.color-list-ul,
.icon-list-ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: var(--font-size-300);
	line-height: 22px;
	color: var(--blue-gray-600);
}

.color-list-ul li {
	height: 22px;
	margin: 6px 0;
}

.color-input-container .color-input-label {
	box-sizing: border-box;
	background: var(--white);
	color: var(--blue-gray-400);
	position: absolute;
	left: 17px;
	top: -4px;
	line-height: 10px;
	font-size: var(--font-size-200);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 0px 6px;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}

.footer-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 7vh;
	min-height: 40px;
	margin-top: 0px;
	padding: 30px 0px;
	border-top: 1px solid var(--Blue-Gray-200, #B0BEC5);

}

.cancel-btn {
	color: var(--Primary-Variant);
	margin: 0 10px;
}

/* Gestion du dropdown pour le type "icon-list" */
.icon-list-ul li {
	height: 22px;
	margin: 6px auto;
	display: flex;
	align-items: center;
	z-index: 10000;
}

.icon-list-ul li img {
	height: 22px;
}

.icon-list-ul li:hover {
	background-color: var(--blue-gray-050);
}


/**** input-radio-list ****/
/*en attente du UX figma */

.input-radio-list_container {
	padding: 14px 16px;
	border: 1px solid var(--blue-gray-600);
	border-radius: 6px;
}

.input-radio_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*.input-radio_container input[type="radio"]{

}
.input-radio_container label{

}*/


/*** checkbox ***/
/* Le check_switch sont les boutons oui/non */
.check_switch {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 54px;
}

.check_switch .checkbox,
.check_switch label {
	display: none;
	visibility: hidden;
}

.check_switch p {
	color: var(--blue-gray-800, #37474F);
	font-family: Inter;
	font-size: 1em;
	margin-left: 16px;
}

.check_switch>div {
	height: 30px;
	cursor: pointer;
	width: 60px;
	background-color: var(--primary-050, #E3F3FF);
	border: 2px solid #0C1137;
	border-radius: 50px;
}

.check_switch>div span {
	color: var(--primary-050, #E3F3FF);
	background-color: #0C1137;
	border: 2px solid #0C1137;
	font-family: Inter;
	font-size: 8px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
	margin: 1px 0 0 1px;
	width: 24px;
	height: 24px;
	border-radius: 18px;
	display: block;
	transition: all 0.3s;
	cursor: pointer;
}

.check_switch.checked>div {
	background-color: #0C1137;
}

.check_switch.checked>div>span {
	color: #0C1137;
	background-color: var(--primary-050, #E3F3FF);
	margin-left: 30px;
}


/* File load */

label.input_label_file .modale_dropdown_zone {
	position: relative;
}

.input_file_info {
	font-size: 0.8em;
	padding: 8px 0px;
}

.modale_dropdown_zone {
	margin: 48px 0px 0px 0px;
	padding: 16px 16px;
	background-color: white;
	border-radius: 6px;
	border: 2px dashed var(--Blue-Gray-600, #546E7A);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 12px;
	width: 100%;
}

.modale_dropdown_zone input[type="file"] {
	display: none;
}
.contenu_dropdown_zone{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: var(--font-size-300);
	color: var(--blue-gray-600);
}
.logo_dropdown_zone{
	padding-right: 16px;
}
.text_dropdown_zone{
	display: flex;
	flex-direction: column;
}
.input_file_loader_format {
	width: 100%;
}

.icon-file {
	width: 20px;
	height: 20px;
	background-size: 20px;
	vertical-align: bottom;
	display: inline-block;
	background-image: url(../../../img/file-outline.svg);
	background-repeat: no-repeat;
}

.icon-file-image {
	background-image: url(../../../img/file-image-outline.svg);
}

.icon-file-pdf {
	background-image: url(../../../img/file-pdf-outline.svg);
}


/* File load - Files list */
.files_loaded>div {
	display: flex;
}

.files_loaded_list {
	width: 100%;
	margin: 0;
}

.files_loaded_element {
	margin: 10px 0px;
	padding: 5px 25px 5px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:10px;
	background-color: var(--blue-gray-100);
	background-image: url(../../../img/file-loaded.svg);
	background-repeat: no-repeat;
	background-position:right 10px top 50%;
}

.files_loaded_element_link {
	color: var(--blue-gray-800);
	cursor: pointer;
	font-size: var(--font-size-300);
	position: relative;
}

.files_loaded_element a[target="_blank"]::after {
	content: '';
	position: absolute;
	top: 3px;
	margin-left: 5px;
	display: inline-block;
	background-image: url(../../../img/file-target_blank_btn.svg);
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}

@media only screen and (max-width: 1023px) {
	.files_loaded_element a[target="_blank"]::after {
		top: 0px;
	}
}

.files_loaded_element_icon {
	cursor: pointer;
	width: 15px;
	margin-right: 6px;

}


/* File load - Alert */
label.input_label_file.alert .modale_dropdown_zone {
	border: 2px dashed #ff0033;
}

label.input_label_file.alert .modale_dropdown_zone span {
	color: #ff0033;
}

label.input_label_file.alert .file-upload-error {
	display: block;
}

label.input_label_file .file-upload-error {
	display: none;
}


/* File load - Progress bar */
label.input_label_file progress {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 15px;
	left: 45px;
	margin: 37px 0 0 96px;
	width: calc(100% - 180px);
	max-width: 250px;
	height: 22px;
	background-color: #eeeeee;
	border: 1px solid #707070;
	outline: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
	border-radius: 2px;
	display: none;
}

label.input_label_file progress::-webkit-progress-bar {
	background-color: #eeeeee;
	outline: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}

label.input_label_file progress::-webkit-progress-value {
	background-color: #0081c8;
}

label.input_label_file.loading progress {
	display: block;
}

label.input_label_file.loading .modale_dropdown_zone>p {
	opacity: 0.25;
}

.input_container.login_input_container {
	margin: 5px 0px;
  }

.user-account_change-button {
	display: flex;
	justify-content: flex-end;
}

input[name="button_clicked"] {
	opacity: 0;
}

/* ex-600px */
@media only screen and (max-width: 1023px) {
	.groupe_input_container {
		display: flex;
		flex-direction: column;
		gap: 12px;
		/*margin: 24px 0px;*/
	}

	.groupe_input_container > .input_container:first-of-type {
		width: 100%;
	}

	.modale_dropdown_zone {
		margin-top: 12px;
	}
	
}