/* 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; }

/* Scrim de fond — voile uni qui apparaît en fondu à l'ouverture
   (modernisé : remplace l'ancienne grille de points pointillée). */
@keyframes perf-bg-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.form-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: var(--overlay);
	opacity: 0;
	transition: opacity var(--transition);
}
#form_container.open .form-backdrop {
	animation: perf-bg-in var(--transition-slow) forwards;
}

.form-panel-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 20px;
	border-bottom: var(--separator);
	flex-shrink: 0;
}
.form-panel-header h5 {
	margin: 0;
	font-weight: 600;
	min-width: 0;            /* permet à h5 de rétrécir si overflow */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Slot où form-container.js injecte les boutons (Effacer, Enregistrer, …).
   Pousse les boutons à droite via margin-left:auto, avec un gap propre
   entre eux. Le ✕ (.btn-close) reste à l'extrême droite avec margin-left
   supplémentaire pour bien le séparer visuellement de la suite. */
.form-panel-header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}
.form-panel-header-actions:empty { display: none; }
/* btn-close TOUJOURS à l'extrême droite — margin-left:auto le pousse même
   quand le slot .form-panel-header-actions est vide (donc display:none).
   Le !important blinde contre toute surcharge externe / CSS d'application. */
.form-panel-header .btn-close,
.form-panel-header #form_container_close {
    margin-left: auto !important;
    flex-shrink: 0;
    order: 99;            /* dernier élément quel que soit l'ordre HTML */
}
/* Quand le slot d'actions est NON vide, le ✕ se colle juste après (8px) AU LIEU de
   garder sa propre marge auto. Sinon DEUX marges auto (slot d'actions + ✕) se partagent
   l'espace libre → les boutons (Effacer/Enregistrer) restent « coincés » au milieu du
   header au lieu d'être alignés à droite. Le sélecteur #id (et le :not(:empty)) battent
   la spécificité de la règle `#form_container_close { margin-left:auto !important }` ci-dessus.
   Slot vide (display:none) → la règle ne matche pas → le ✕ garde sa marge auto et reste à droite. */
.form-panel-header-actions:not(:empty) + .btn-close,
.form-panel-header-actions:not(:empty) + #form_container_close { margin-left: 8px !important; }

.form-panel-body { flex: 1; overflow-y: auto; padding: 20px; }

/* Drawer latéral (v2) — entre le breadcrumb et le footer, collé à droite,
   1/3 de largeur, marges 20px (haut/bas/droite), coins arrondis 4px,
   entrée fade + glissement depuis la droite, ease-in-out.
   (#form_container est fixe à top:48px → top relatif = ~viewport 148px.) */
.form-panel {
	position: absolute;
	top: 100px;            /* ~ sous le fil d'Ariane (viewport ≈148px) */
	right: 20px;
	bottom: 68px;          /* ~20px au-dessus du footer (48px) */
	left: auto;
	width: calc(100vw / 3);
	min-width: 320px;
	background: var(--bg-surface);
	border-radius: 4px;
	transform: translateX(calc(100% + 28px));
	opacity: 0;
	transition: transform var(--transition-slow, .3s) ease-in-out, opacity var(--transition, .2s) ease-in-out;
	display: flex;
	flex-direction: column;
	overflow: hidden;       /* coupe header/body au rayon */
	box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
}
#form_container.open .form-panel {
	transform: translateX(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.form-panel { transition: opacity var(--transition, .2s) ease; transform: none; }
	#form_container.open .form-panel { transform: none; }
}

.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(40px) scale(0.97);
	opacity: 0;
	transition: transform var(--transition-slow), opacity var(--transition);
	/* Bordures arrondies marquées pour les overlays — distingue visuellement
	   du drawer latéral qui est rectiligne sur 3 côtés. */
	border-radius: var(--radius-lg);
	overflow: hidden;        /* coupe les coins du header/body au radius */
	box-shadow: var(--shadow-lg);
}
.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) scale(1);
	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) {
	/* Le drawer (.form-panel par défaut) conserve son 1/3 (min-width 320px). */
	.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: 1px solid var(--line);
	border-radius: var(--radius-md);                /* aligné visuellement avec .lv-root */
	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: 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); }

/* (Retiré 2026-06-01) L'« omnibox patient » était un concept MÉTIER CMO (recherche
   patient dans frm_new_consultation / frm_new_rendez_vous) — il n'a pas sa place dans
   le composant framework form-container. Son CSS vit désormais dans css/app.css (CMO).
   Règle : iManage ne porte aucun CSS spécifique à une application. */