/* ============================================
   MODAL SYSTEM - STYLES
   ============================================ */

/* BACKDROP UNIQUE POUR TOUS LES MODAUX */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9010 !important;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.modal-backdrop.show {
  display: flex !important;
 /* animation: fadeIn 0.2s ease;*/
}

/* ============================================
   MODAL CONTAINER (pour tous les niveaux)
   ============================================
.modal-container {
  background: white !important;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: zoomIn 0.3s ease;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  transition: all 0.3s ease;
}
*/
	.modal-container
		{
			display: none;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			border-radius: 12px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
		/*	z-index: 999999;*/
			max-width: 90%;
			max-height: 90vh;
			overflow-y: auto;
		}
/* Z-index selon le niveau */
/*
#modal1 { z-index: 9011 ; }
#modal2 { z-index: 9012 ; }
#modal_last { z-index: 9013 ; }
*/
/* Modal visible */
.modal-container.show {
  display: flex !important;
}
.modal-container .logo img {
    width: 338px;
    padding-top: 0px;
    padding-bottom: 2px;
}
.modal-container:has(.modal_full) {
    width: 100%;
    max-width: 98%;
    max-height: 96vh;
}
.modal-in_container {
  width: 100%;
}
.modal-in_container {
    padding: 1.5rem;
	min-width:400px
}
/* Si modal-body existe : enlever le padding du parent */
.modal-in_container:has(.modal-body) {
    padding: 0;
	min-width:auto;
}

/* Mode plein écran */
.modal-container.fullscreen {
  width: 98% !important;
  max-width: 98% !important;
  height: 95vh !important;
  max-height: 95vh !important;
}

/* Cacher le bouton drag en mode fullscreen */
.modal-container.fullscreen .panel-drag-btn {
  display: none !important;
}

/* Désactiver les transitions pendant le drag */
.modal-container.dragging {
  transition: none !important;
}

/* ============================================
   MODAL HEADER
   ============================================ */
.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}


.modal-header-actions {
  display: flex;
  gap: 1px;
  align-items: center;
}


/* ============================================
   MODAL BUTTONS
   ============================================ */
.panel-drag-btn,
.panel-expand-btn,
.panel-close-btn {

}
.panel-expand-btn,.panel-drag-btn {
   color: #e7e8ec;
}
.panel-drag-btn:hover,
.panel-expand-btn:hover,
.panel-close-btn:hover {
  background: #f3f4f6;
  color: #1f2937;
}

/* État actif du bouton drag */
.panel-drag-btn.active {
  background: #dbeafe;
  color: #2563eb;
}

/* Curseur quand le modal est draggable */
.modal-container.draggable .modal-header {
  cursor: move;
}
.panel-header-btn {
   padding-bottom: 3px;
    background: none;
    border: none;
    font-size: 14px;
    color: #6b7280;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
   margin-top: -3px;
	margin-left: 5px;
}

.side-panel .panel-header-btn,
.overlay-panel .panel-header-btn {
   background: transparent;
   border: none;
   cursor: pointer;
}

.side-panel:has(.modal-header.BKG_champ) .panel-header-btn {
   background: #ccbda4bf;
   color: #000000;
   opacity: 0.3;
}

/* ============================================
   MODAL BODY
   ============================================ */
.modal-body {
  padding: 1.5rem;
  color: #374151;
  flex: 1;
  overflow-y: auto;
}

/* ============================================
   MODAL FOOTER
   ============================================ */
.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* ============================================
   MODAL LAST (Spécifique au dernier modal)
   ============================================ */
.modal-last {
  max-width: 400px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
}

/* ajout depuis modalPour_hitAjax.php */
/* ajout depuis modalPour_hitAjax.php */
/* ajout depuis modalPour_hitAjax.php */

		.modal-container
		{
			display: none;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			border-radius: 12px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
			z-index: 999999;
			max-width: 90%;
			max-height: 90vh;
			overflow-y: auto;
		}

		/* Titre */
		.modal-title
		{
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 10px;
			text-align: center;
		}

		.modal-subtitle
		{
			text-align: center;
			color: #666;
			margin-bottom: 20px;
		}

		.panel-mess {
			min-height:20px;
		}

		/* Zone d'upload */
		.upload-area
		{
			border: 2px dashed #ddd;
			border-radius: 8px;
			padding: 7px;
			text-align: center;
			background: #f8f8f8;
			margin-bottom: 5px;
			cursor: pointer;
			transition: all 0.3s;
		}

		.upload-area:hover
		{
			border-color: #999;
			background: #f0f0f0;
		}

		.upload-area.dragover
		{
			border-color: #c92a2a;
			background: #ffe0e0;
		}

		.upload-icon
		{
			font-size: 30px;
		/*	margin-bottom: 15px; */
		}

		.upload-text
		{
			color: #666;
		}

		.upload-text-primary
		{
			color: #c92a2a;
			font-weight: 500;
		}

		.upload-text-secondary
		{
			font-size: 14px;
			margin-top: 5px;
		}

		/* Input file caché */
		input[type="file"]
		{
			display: none;
		}

		/* Nom du fichier sélectionné */
		.file-name
		{
			margin: 0px 0 0px 0;
			padding: 10px;
			background: #e8f5e9;
			border-radius: 4px;
			color: #2e7d32;
			display: none;
			height:15px;
		}

		/* Boutons */
		.modal-buttons
		{
			margin-top: 30px;
			display: flex;
			gap: 15px;
			justify-content: center; /* Centre les boutons */
		}
		.modal-buttons button
		{
			max-width:153px
		}
		.modal-buttons button.btnLarge
		{
			max-width:none;
		}

		.btn
		{
			flex: 1;
			padding: 12px 24px;
			border: none;
			border-radius: 4px;
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-cancel
		{
			background: #f0f0f0;
			color: #333;
		}

		.btn-cancel:hover
		{
			background: #e0e0e0;
		}

		.btn-submit
		{
			background: #c92a2a;
			color: white;
		}

		.btn-submit:hover
		{
			background: #a52020;
		}

		.btn-submit:disabled
		{
			background: #ccc;
			cursor: not-allowed;
		}

		/* Message de succès/erreur */
		.message
		{
			padding: 15px;
			border-radius: 4px;
			margin-bottom: 20px;
			display: none;
		}

		.message.success
		{
			background: #e8f5e9;
			color: #2e7d32;
			border: 1px solid #4caf50;
		}

		.message.error
		{
			background: #ffebee;
			color: #c62828;
			border: 1px solid #f44336;
		}
		.panel-mess > div
		{
			padding: 9px 20px; border-radius: 4px; margin-bottom: 0px;
		}
		.panel-mess > p
		{
			margin: 0;
		}
		.panel-mess > div.nok { background:#ffebee;color:#c62828;  }
		.panel-mess > div.ok { background:#e8f5e9;color:#2e7d32;   }
		.panel-mess > div.warn { background:#fff3cd;color:#856404; }


/* MODAL D EDITION DE CHAMP **************************/
#modal3 button.btn
{
	flex: 0;
	padding: 5px 10px;
	font-size: 12px;
}
#modal3 .modal-header {
	padding: 1.0rem;
}
#modal3 .modal-footer {
	padding: 0.8rem;
}
.btn-submit:hover {
	color: #FFFFFF;
}
#modal3 	.modal-body {
	padding:  20px 1.5rem 0rem 1.5rem;
}
#modal3 .form-control
{
	padding: .175rem .75rem;
}
#modal3 .panel-mess {
    min-height: 10px;
    padding: 10px 0;
}
#modal3 .panel-mess > div
{
	padding: 1px 12px 3px 12px;
}
/* MODAL D EDITION DE CHAMP **************************/

/* Center (défaut)  */
.modal.position-center,
.panel.position-center
{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Left */
.modal.position-left,
.panel.position-left
{
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: auto !important;
    max-width: calc(100vw - 40px);
}

/* Right */
.modal.position-right,
.panel.position-right
{
    right: 20px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: calc(100vw - 40px);
}

/* Top-left */
.modal.position-top-left,
.panel.position-top-left
{
    left: 20px !important;
    top: calc(var(--header-height) + 20px) !important;
    transform: none !important;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - var(--header-height) - 40px);
}

/* Top-right */
.modal.position-top-right,
.panel.position-top-right
{
    right: 20px !important;
    left: auto !important;
    top: calc(var(--header-height) + 20px) !important;
    transform: none !important;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - var(--header-height) - 40px);
}

/* Bottom-left */
.modal.position-bottom-left,
.panel.position-bottom-left
{
    left: 20px !important;
    bottom: 20px !important;
    top: auto !important;
    transform: none !important;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - var(--header-height) - 40px);
}

/* Bottom-right */
.modal.position-bottom-right,
.panel.position-bottom-right
{
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
    top: auto !important;
    transform: none !important;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - var(--header-height) - 40px);
}

/* Gestion du contenu qui déborde */
.modal .modal-in_container,
.panel .panel-in_container
{
    max-height: calc(100vh - var(--header-height) - 160px);
    overflow-y: auto;
}

/* Responsive - sur petits écrans, forcer le centrage */
@media (max-width: 768px)
{
    .modal.position-left,
    .modal.position-right,
    .modal.position-top-left,
    .modal.position-top-right,
    .modal.position-bottom-left,
    .modal.position-bottom-right,
    .panel.position-left,
    .panel.position-right,
    .panel.position-top-left,
    .panel.position-top-right,
    .panel.position-bottom-left,
    .panel.position-bottom-right
    {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: calc(100vw - 20px);
    }
}