/* iManage — form_container */

/* ════════════════════════════════════════════════
   Form Container — deux composants distincts :

   · .form-panel           (default)
       Drawer latéral 500px à droite, slide depuis la droite.
       Usage : saisie de formulaires courts (create/update).

   · .form-panel-overlay
       Modal plein écran centré, max 1320px, slide depuis le bas.
       Usage : fiche détail complète, consultation riche (niveau 2).
       (Anciennement .form-panel-xl — alias conservé pour compat.)

   · .form-panel-overlay-lg
       Variante large de l'overlay, max 1600px.
       (Anciennement .form-panel-xxl — alias conservé pour compat.)
   ════════════════════════════════════════════════ */
#form_container {
	display: none;
	position: fixed;
	top: 48px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
}
#form_container.open { display: block; }

.form-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
#form_container.open .form-backdrop { opacity: 1; }

.form-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	border-bottom: var(--separator);
	flex-shrink: 0;
}
.form-panel-header h5 { margin: 0; font-weight: 600; }
.form-panel-body      { flex: 1; overflow-y: auto; padding: 20px; }

.form-panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 500px;
	background: var(--bg-surface);
	transform: translateX(100%);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
#form_container.open .form-panel {
	transform: translateX(0);
	opacity: 1;
}

.form-panel.form-panel-overlay,
.form-panel.form-panel-overlay-lg,
.form-panel.form-panel-xl,
.form-panel.form-panel-xxl {
	top: 10px;
	bottom: 10px;
	left: 50%;
	right: auto;
	width: 100%;
	transform: translateX(-50%) translateY(30px);
	opacity: 0;
	border-radius: var(--radius-md);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.form-panel.form-panel-overlay,
.form-panel.form-panel-xl    { max-width: 1320px; }
.form-panel.form-panel-overlay-lg,
.form-panel.form-panel-xxl   { max-width: 1600px; }
#form_container.open .form-panel.form-panel-overlay,
#form_container.open .form-panel.form-panel-overlay-lg,
#form_container.open .form-panel.form-panel-xl,
#form_container.open .form-panel.form-panel-xxl {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

@media (max-width: 575.98px) {
	.form-panel,
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-overlay-lg,
	.form-panel.form-panel-xl,
	.form-panel.form-panel-xxl {
		width: 100%;
		left: 0; right: 0;
		max-width: none;
		transform: translateY(100%);
		opacity: 0;
	}
	#form_container.open .form-panel,
	#form_container.open .form-panel.form-panel-overlay,
	#form_container.open .form-panel.form-panel-overlay-lg,
	#form_container.open .form-panel.form-panel-xl,
	#form_container.open .form-panel.form-panel-xxl {
		transform: translateY(0);
		opacity: 1;
	}
}
@media (min-width: 576px) and (max-width: 991.98px) {
	.form-panel { width: 80%; }
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 100%; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 960px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.form-panel.form-panel-overlay,
	.form-panel.form-panel-xl { max-width: 1140px; }
}

/* ════════════════════════════════════════════════
   Panel section — card utilisée dans les rapports/détails
   Regroupe des informations liées avec un fond contrasté.
   ════════════════════════════════════════════════ */
.panel-section {
	background: var(--bg-primary);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 20px;
}
.panel-section:last-child  { margin-bottom: 0; }
.panel-section h6 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--text-primary);
}
.panel-section h6:first-child { margin-top: 0; }
.panel-section .table { --bs-table-bg: transparent; margin-bottom: 0; }

/* ════════════════════════════════════════════════
   App theming — form panel visual overrides
   ════════════════════════════════════════════════ */
.form-panel {
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.form-panel-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
}
.form-panel-body { padding: 20px; background: var(--canvas); }