/* ==========================================================
   DIALOG : MON COMPTE / PROFIL UTILISATEUR
   Scope volontairement limité à .dlg-mon-compte
   ========================================================== */
.dlg-mon-compte {
	width: 540px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
}

.dlg-mon-compte .ui-dialog-content {
	max-height: 78vh; /* un peu plus confortable */
	overflow-y: auto;
	overflow-x: hidden;
}

.dlg-mon-compte .ui-dialog-titlebar {
	padding: 12px 16px;
}

.dlg-mon-compte .ui-dialog-title {
	font-size: 15px;
	font-weight: 600;
}

.dlg-parametres {
	width: 640px; /* base confortable */
	max-width: 90vw; /* ne dépasse jamais l'écran */
}

/* Forcer la dialog à scroller correctement en mobile */
.ui-dialog.dlg-parametres {
	max-height: 90vh !important;
	overflow: visible !important;
}

.ui-dialog.dlg-parametres .ui-dialog-content {
	max-height: calc(90vh - 50px) !important; /* 50px = header */
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* plein écran (presque) en mobile */
@media ( max-width : 480px) {
	.dlg-parametres {
		width: 96vw !important;
		max-width: 96vw !important;
	}
}

/* largeur 100% pour les composants qui n'occupent pas toute la colonne */
.w-100 {
	width: 100% !important;
}

/* Marges verticales entre champs en mobile, plus serrées en desktop */
@media ( max-width : 414px) { /* iPhone Max & grands Android */
	.EmptyBox20 {
		height: 16px;
	}
}

@media ( max-width : 390px) { /* iPhones "standard" */
	.EmptyBox20 {
		height: 14px;
	}
}

@media ( max-width : 360px) { /* Petits Android */
	.EmptyBox20 {
		height: 12px;
	}
}

/* Pour cacher LANGUE / DEVISE en mobile dans parametrage */
@media ( max-width : 480px) {
	.bloc-langue-devise-display-none {
		display: none !important;
	}
}

.ui-datascroller .ui-datascroller-item {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .2);
	margin: 0 5px 8px;
}

.ui-datascroller {
	border: none;
	background-color: #FBFCFD;
}

.ui-icon-closethick {
	background-color: #71CC8D;
}

.ui-panelgrid .ui-panelgrid-cell {
	padding: inherit;
}

/* Supprime les bordures sur les cellules */
.ui-panelgrid.grid-noborder .ui-panelgrid-cell {
	border: 0 !important;
}

/* Supprime toute bordure/contour ajoutée par ui-widget-content sur le tbody */
.ui-panelgrid.grid-noborder .ui-panelgrid-content.ui-widget-content {
	border: 0 !important;
	background: transparent !important;
	/* optionnel, pour neutraliser un fond */
}

/* (Ceinture et bretelles) Évite tout border sur table/tr/td dans ce bloc */
.ui-panelgrid.grid-noborder, .ui-panelgrid.grid-noborder table,
	.ui-panelgrid.grid-noborder tr, .ui-panelgrid.grid-noborder td {
	border: 0 !important;
	background: transparent; /* optionnel */
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-closethick
	{
	background-color: transparent;
}

.ui-steps {
	min-height: 40px;
	margin-top: 16px;
}

.ui-datatable-edary table tbody td {
	padding: 2px 10px !important;
}

.ui-messages-warn, ui-message-warn {
	color: black !important;
	background-color: transparent !important;
	border-color: black !important;
	font-size: 16px;
	font-weight: normal;
	padding: 6px !important;
}

.ui-selectcheckboxmenu-multiple .ui-selectcheckboxmenu-trigger .ui-icon
	{
	top: 14%;
}

/* Centrer le header en mobile */
.ui-dialog .ui-dialog-titlebar {
	text-align: center;
}

/* Réduire les marges/padding sur mobile */
@media ( max-width : 480px) {
	.ui-dialog .ui-dialog-content {
		padding: 10px !important;
	}
}

/* Optimiser la hauteur du calendrier PrimeFaces en mobile */
@media ( max-width : 480px) {
	.ui-datepicker {
		font-size: 13px;
	}
}

/* Fluidifier les champs en mobile */
@media ( max-width : 480px) {
	/* Passe tous les panelGrid "champs" en 1 colonne */
	.ui-dialog .ui-panelgrid.grid-noborder {
		width: 100% !important;
	}

	/* Les deux colonnes supérieures → empilées */
	.ui-dialog .ui-panelgrid.grid-noborder .col1, .ui-dialog .ui-panelgrid.grid-noborder .col2
		{
		display: block !important;
		width: 100% !important;
	}

	/* Les selectOneMenu et input number → full width */
	.ui-dialog .ui-selectonemenu, .ui-dialog .ui-inputnumber, .ui-dialog .ui-calendar
		{
		width: 90% !important;
	}

	/* Leur conteneur aussi (ton code met width:80% / 60%) */
	.ui-dialog .ui-panelgrid-blank[style*="width"] {
		width: 100% !important;
	}

	/* rendre le calendrier un peu plus compact */
	.ui-dialog .ui-calendar {
		min-width: 0 !important;
	}
}

/* Formulaires du tableau de bord */

/* --- Desktop (par défaut) --- */
#tb-forms-container {
	display: block;
}

/* --- Mobile : réorganisation --- */
@media ( max-width : 480px) {
	#tb-forms-container {
		display: flex !important;
		flex-direction: column !important;
		gap: 20px;
	}
	#id_tableaudebord_formulaire_3 {
		order: 1;
	}
	#id_tableaudebord_formulaire_1 {
		order: 2;
	}
	#id_tableaudebord_formulaire_2 {
		order: 3;
	}

	/* Chaque form en bloc mobile */
	#tb-forms-container>form {
		width: 100% !important;
	}
}

/* Active un scroll horizontal sur mobile */
.gestionpersonnes-table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Force la datatable à ne pas compresser les colonnes */
.gestionpersonnes-table-responsive .ui-datatable-tablewrapper {
	min-width: 900px; /* Ajuste selon ton besoin */
}

/* Mobile : 1 seule colonne */
@media ( max-width : 768px) {
	/* Le tableau du panelGrid devient un bloc vertical */
	.grid-onecol-responsive table, .grid-onecol-responsive tbody,
		.grid-onecol-responsive tr, .grid-onecol-responsive td {
		display: block !important;
		width: 100% !important;
	}
	/* Chaque cellule sur sa propre ligne */
	.grid-onecol-responsive td {
		margin-bottom: 12px;
	}
	/* Combos en pleine largeur */
	.ui-selectonemenu {
		width: 100% !important;
	}
	.ui-outputlabel.ui-widget {
		margin-bottom: -14px !important;
		display: block;
	}
	/* Fieldset contenu aussi responsive */
	.responsive-fieldset {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px;
	}
	/* On fait disparaitre les spacers PrimeFaces uniquement en mobile */
	img[id*="j_idt"][src*="spacer"] {
		display: none !important;
	}
}

/* ==============================
DESKTOP Vue Globale
============================== */

/* Version desktop = identique à avant */
.anneeDesktop {
	width: 8% !important;
	float: left !important;
	margin-bottom: 15px !important;
}

.moisDesktop {
	width: 6% !important;
	float: left !important;
	margin-bottom: 15px !important;
}

.imprimerDesktop {
	float: right !important;
	margin-bottom: 15px !important;
}

/* ==============================
   RESPONSIVE Vue Globale
   ============================== */
@media ( max-width : 768px) {
	/* Champs année + mois */
	.anneeDesktop, .moisDesktop {
		width: 94% !important;
		float: none !important;
		margin-bottom: 15px !important;
	}
	/* Bouton imprimer */
	.imprimerDesktop {
		float: none !important;
		width: 100% !important;
		display: block !important;
		margin-top: 15px !important;
	}
	/* Débloque le scroll du tableau */
	#id_vueglobale_formulaire\:id_vueglobale_cotisations table {
		table-layout: auto !important;
	}
	/* Conteneur scrollable */
	.datatable-responsive-wrapper {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		display: block !important;
		width: 100% !important;
	}
	/* Wrapper interne PrimeFaces */
	.datatable-responsive-wrapper .ui-datatable-tablewrapper {
		width: max-content !important;
	}
	/* Largeur du tableau */
	.datatable-responsive-wrapper table {
		width: max-content !important;
		min-width: 650px !important;
	}
}

/* ==============================
DESKTOP Depenses
============================== */

/* Version desktop = identique à avant */
.moisDesktopDepenses {
	width: 6% !important;
	float: right !important;
	margin-bottom: 15px !important;
}

.anneeDesktopDepenses {
	width: 8% !important;
	float: right !important;
	margin-bottom: 15px !important;
}

.imprimerDesktop {
	float: right !important;
	margin-bottom: 15px !important;
}

/* ==============================
   RESPONSIVE Depenses
   ============================== */
@media ( max-width : 768px) {
	/* Champs année + mois */
	.moisDesktopDepenses, .anneeDesktopDepenses {
		width: 94% !important;
		float: none !important;
		margin-bottom: 15px !important;
	}
	/* Bouton imprimer */
	.imprimerDesktop {
		float: none !important;
		width: 100% !important;
		display: block !important;
		margin-top: 15px !important;
	}
	/* Débloque le scroll du tableau */
	#id_depenses_formulaire\:id_depenses_tableau table {
		table-layout: auto !important;
	}
	/* Conteneur scrollable */
	.datatable-responsive-wrapper {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		display: block !important;
		width: 100% !important;
	}
	/* Wrapper interne PrimeFaces */
	.datatable-responsive-wrapper .ui-datatable-tablewrapper {
		width: max-content !important;
	}
	/* Largeur du tableau */
	.datatable-responsive-wrapper table {
		width: max-content !important;
		min-width: 650px !important;
	}
}

/* ==============================
DESKTOP Situation et suivi des Paiements
============================== */
.anneeSituationPaiements {
	width: 10% !important;
}

.immeubleSituationPaiements {
	width: 6% !important;
}

.imprimerSituationPaiements {
	float: right !important;
}

.actualiserSituationPaiements {
	float: right !important;
}

.sauvegarderSuiviPaiements {
	width: 40%;
}

.annulerSuiviPaiements {
	width: 40%;
}

/* ==============================
RESPONSIVE Situation et suivi des Paiements
============================== */
@media ( max-width : 768px) {
	/* Champs année + immeuble */
	.anneeSituationPaiements, .immeubleSituationPaiements {
		width: 94% !important;
		float: none !important;
		margin-bottom: 15px !important;
	}
	.outputLabelSituationPaiements.ui-outputlabel.ui-widget {
		margin-bottom: 0px !important;
	}
	/* Boutons */
	.imprimerSituationPaiements, .actualiserSituationPaiements,
		.sauvegarderSuiviPaiements, .annulerSuiviPaiements {
		float: none !important;
		width: 100% !important;
		display: block !important;
		margin-top: 15px !important;
	}
	/* Débloque le scroll du tableau */
	#id_situationPaiements_formulaire\:id_situationPaiements_cotisations table
		{
		table-layout: auto !important;
	}
	#id_suiviPaiements_formulaire\:id_suiviPaiements_cotisations table {
		table-layout: auto !important;
	}
}

/* ==============================
DESKTOP Support
============================== */
.typeSupport {
	width: 40% !important;
}

.objetMessageSupport {
	width: 60% !important;
}

.messageSupport {
	width: 100%;
	margin-bottom: 4%;
}

.envoyerMessage {
	width: 100%;
}

/* ==============================
RESPONSIVE Support
============================== */
@media ( max-width : 768px) {
	.typeSupport, .objetMessageSupport {
		width: 94% !important;
		float: none !important;
		margin-bottom: 15px !important;
	}
	.outputLabelSituationPaiements.ui-outputlabel.ui-widget {
		margin-bottom: 0px !important;
	}
	/* Boutons */
	.envoyerMessage {
		float: none !important;
		width: 100% !important;
		display: block !important;
		margin-top: 15px !important;
	}
}

/* ==========================================================
   FIX DEFINITIF - OVERFLOW HORIZONTAL DASHBOARD
   Source : spark-layout.css (.layout-portlets-box)
   ========================================================== */

/* 1. Sécurise le conteneur */
#layout-portlets-cover {
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* 2. Corrige les portlets Spark qui débordent */
#layout-portlets-cover .layout-portlets-box {
	width: 100%;
	box-sizing: border-box;
	float: none;
}