/* ════════════════════════════════════════════════
   MyQMa — Charte graphique
   Primaire : cyan MyQMa    Accent : vert émeraude (logo Q|Myqma)
   ════════════════════════════════════════════════ */
:root {
	--brand-cyan:        #00B4D8;
	--brand-cyan-dark:   #0096B8;
	--brand-cyan-darker: #007A96;
	--brand-green:       #10B981;
	--brand-green-dark:  #0E9F70;
	--brand-ink:         #0F172A;
	--brand-surface:     #F8FAFC;

	--accent:              var(--brand-green);
	--accent-hover:        var(--brand-green-dark);

	--bs-primary:          var(--brand-cyan);
	--bs-primary-rgb:      0, 180, 216;
	--bs-link-color:       var(--brand-cyan-dark);
	--bs-link-hover-color: var(--brand-cyan-darker);
}

.btn-primary {
	--bs-btn-bg:                    var(--brand-cyan);
	--bs-btn-border-color:          var(--brand-cyan);
	--bs-btn-hover-bg:              var(--brand-cyan-dark);
	--bs-btn-hover-border-color:    var(--brand-cyan-dark);
	--bs-btn-active-bg:             var(--brand-cyan-darker);
	--bs-btn-active-border-color:   var(--brand-cyan-darker);
	--bs-btn-disabled-bg:           var(--brand-cyan);
	--bs-btn-disabled-border-color: var(--brand-cyan);
}

.btn-outline-primary {
	--bs-btn-color:              var(--brand-cyan-dark);
	--bs-btn-border-color:       var(--brand-cyan);
	--bs-btn-hover-bg:           var(--brand-cyan);
	--bs-btn-hover-border-color: var(--brand-cyan);
	--bs-btn-active-bg:          var(--brand-cyan-dark);
}

.btn-accent {
	--bs-btn-color:              #fff;
	--bs-btn-bg:                 var(--brand-green);
	--bs-btn-border-color:       var(--brand-green);
	--bs-btn-hover-bg:           var(--brand-green-dark);
	--bs-btn-hover-border-color: var(--brand-green-dark);
	--bs-btn-active-bg:          var(--brand-green-dark);
}

.badge.bg-primary { background-color: var(--brand-cyan) !important; }
.badge.bg-accent  { background-color: var(--brand-green) !important; color: #fff; }

a { color: var(--brand-cyan-dark); }
a:hover { color: var(--brand-cyan-darker); }

.page-item.active .page-link {
	background-color: var(--brand-cyan);
	border-color:     var(--brand-cyan);
}

.login-brand-col {
	background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-cyan-darker) 100%);
}

/* ════════════════════════════════════════════════
   Utilitaires MyQMa
   ════════════════════════════════════════════════ */
.text-accent     { color: var(--brand-green) !important; }
.text-primary    { color: var(--brand-cyan-dark) !important; }
.brand-gradient  { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green)); color: #fff; }

/* Language picker dans la barre utilisateur */
#language_picker {
	display: inline-flex;
	gap: 4px;
	margin-right: 10px;
	vertical-align: middle;
}
#language_picker .lang-btn {
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-secondary, #6c757d);
	cursor: pointer;
	background: transparent;
}
#language_picker .lang-btn.active {
	color: var(--brand-cyan-dark);
	border-color: var(--brand-cyan);
	background: rgba(0, 180, 216, 0.08);
}
#language_picker .lang-btn:hover:not(.active) {
	color: var(--brand-cyan-dark);
}

/* Catégories de processus (ISO 9001) */
.cat-badge        { text-transform: capitalize; font-weight: 500; }
.cat-leadership   { background: var(--brand-cyan);        color: #fff; }
.cat-core         { background: var(--brand-green);       color: #fff; }
.cat-support      { background: #64748b;                  color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   Form Container (panel custom — drawer / overlay centré)
   ═══════════════════════════════════════════════════════════════ */

#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: 1px solid rgba(0,0,0,0.10);
	flex-shrink: 0;
}

.form-panel-header h5 { margin: 0; font-weight: 600; }

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

/* Normal : drawer droite 500px */
.form-panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 500px;
	background: #fff;
	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;
}

/* xl : centré, largeur max Bootstrap, bas → haut + fondu */
.form-panel.form-panel-xl {
	top: 10px;
	bottom: 10px;
	left: 50%;
	right: auto;
	width: 100%;
	max-width: 1320px;
	transform: translateX(-50%) translateY(30px);
	opacity: 0;
	border-radius: 12px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

#form_container.open .form-panel.form-panel-xl {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* xxl : quasi plein écran */
.form-panel.form-panel-xxl {
	top: 10px;
	bottom: 10px;
	left: 50%;
	right: auto;
	width: 100%;
	max-width: 1600px;
	transform: translateX(-50%) translateY(30px);
	opacity: 0;
	border-radius: 12px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

#form_container.open .form-panel.form-panel-xxl {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* Responsive */
@media (max-width: 575.98px) {
	.form-panel,
	.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-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-xl { max-width: 100%; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.form-panel.form-panel-xl { max-width: 960px; }
}

/* KVP priorities */
.prio-low      { background: #6c757d; color: #fff; }
.prio-medium   { background: #0dcaf0; color: #000; }
.prio-high     { background: #ffc107; color: #000; }
.prio-critical { background: #dc3545; color: #fff; }

/* KPI status */
.status-on_track  { background: #10B981; color: #fff; }
.status-off_track { background: #dc3545; color: #fff; }
.status-no_data   { background: #e9ecef; color: #6c757d; }