/* Workflow Employeur & Justification du Score (Feature 006) */

/* --- Rangée de filtres (recherche, offre, statut, tri) : tout sur UNE seule ligne --- */
/* Sur desktop large, recherche + offre + statut + "Trier par" tiennent sur une seule ligne
   (Image #10) : nowrap + tailles réduites. Repli en wrap sous 1024px (T035 : la largeur réellement
   disponible dans la colonne de contenu — réduite par la barre latérale employeur — ne suffit à tout
   aligner sur une ligne qu'à partir d'environ 1280px de large ; mesuré en dessous sur tablette portrait
   768px ET paysage 1024px, qui débordaient hors écran avant ce correctif). */
.mihantek-filters-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

@media (max-width: 1024px) {
	.mihantek-filters-row {
		flex-wrap: wrap;
	}
}

/* Le champ de recherche et le select "offre" (select2 natif) ne doivent jamais s'étirer au-delà
   d'une taille raisonnable, quelle que soit la longueur du texte contenu (retour utilisateur :
   "si la taille d'un job est grande le design se déforme"). */
.mihantek-search-form .flex-middle {
	flex-wrap: nowrap;
	max-width: 100%;
	gap: 8px;
}

/* T035 : le filtre de statut (US6) est injecté par JS À L'INTÉRIEUR de ce même conteneur
   (research.md §8), qui reste "nowrap" ci-dessus indépendamment du repli de `.mihantek-filters-row`
   — sans ce correctif, recherche + offre + statut débordent hors écran sur mobile/tablette au lieu
   de passer à la ligne (constaté à la validation manuelle, Constitution Principe V). */
@media (max-width: 1024px) {
	.mihantek-search-form .flex-middle {
		flex-wrap: wrap;
	}

	.mihantek-status-filter-wrapper {
		margin-left: 0;
	}
}

.mihantek-search-form .mihantek-search-input {
	flex-shrink: 1;
	min-width: 60px;
	max-width: 110px;
}

/* select2 (job_id natif + filtre de statut) : largeurs réduites et plafonnées pour laisser la
   place au tri sur la même ligne, avec troncature du texte au lieu de déformer la mise en page.
   select2 pose parfois une largeur en style inline — !important nécessaire pour la neutraliser. */
.mihantek-search-form .select2-container {
	width: 150px !important;
	max-width: 150px !important;
	flex-shrink: 0;
}

.mihantek-status-filter-wrapper .select2-container {
	width: 140px !important;
	max-width: 140px !important;
	flex-shrink: 0;
}

/* Le bloc de tri "Trier par" ne se réduit pas et reste sur la même ligne. */
.mihantek-filters-row .sort-applicants-form {
	flex-shrink: 0;
}

.mihantek-filters-row .sort-applicants-form .orderby {
	max-width: 130px;
}

.mihantek-search-form .select2-selection__rendered,
.mihantek-status-filter-wrapper .select2-selection__rendered {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Filtre de statut : même style/couleur que le select "Filtrer par emploi" (select2), au lieu
   du rendu natif du navigateur (retour utilisateur). Initialisé en select2 par employer-workflow.js. */
.mihantek-status-filter-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: 8px;
}

/* Repli si select2 n'a pas pu s'initialiser (ex. dépendance manquante) : le <select> natif garde
   quand même une taille raisonnable et un texte tronqué plutôt que de casser la ligne. */
.mihantek-status-filter-wrapper .mihantek-status-filter {
	width: auto;
	max-width: 160px;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Compteurs de statut (5 pastilles cliquables) : toujours sur une seule ligne --- */
/* FR-018 : chaque pastille est un lien qui règle le filtre "Statut". Les décomptes sont indépendants
   du filtre actif et se rafraîchissent en direct après chaque transition (employer-workflow.js).
   Design D'ORIGINE du thème restauré (retour utilisateur, Image #13) : les pastilles reprennent
   exactement le style natif `.job-applicants .inner-result > div` (texte orange = couleur du thème,
   soulignement orange sous la rangée via `.inner-result`, onglet actif blanc sur orange). Comme nos
   pastilles sont des <a> (et non des <div>), on redéclare ces règles en ciblant `> a`. */
.mihantek-status-counters {
	flex-wrap: nowrap;
	overflow-x: auto;
	max-width: 100%;
}

.job-applicants .inner-result > a.mihantek-status-counter {
	font-size: 14px;
	padding: 2px 15px;
	color: var(--superio-theme-color);
	cursor: pointer;
	border-radius: 4px 4px 0 0;
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
}

.job-applicants .inner-result > a.mihantek-status-counter:hover {
	color: var(--superio-theme-color);
	text-decoration: none;
	opacity: 0.8;
}

/* Onglet actif (filtre de statut sélectionné) : blanc sur orange, comme les onglets natifs du thème. */
.job-applicants .inner-result > a.mihantek-status-counter.active {
	color: #fff;
	background: var(--superio-theme-color);
}

/* La rangée d'en-tête (titre de l'offre + compteurs) passe en flex pour laisser assez de place
   aux 5 compteurs plutôt que la répartition Bootstrap 8/4 colonnes trop étroite. */
.job-applicants .heading.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.job-applicants .heading.row > [class*="col-"] {
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
}

/* Retour utilisateur : sur mobile/tablette, quand le titre (col-sm-8) se retrouve seul sur sa
   ligne (les compteurs passant à la ligne suivante), `justify-content: space-between` ci-dessus le
   pousse à droite au lieu de le laisser à gauche (un seul élément sur la ligne n'a rien dont
   "space-between" ; les navigateurs le collent alors au bord de fin). Sous 1024px (seuil aligné sur
   celui des filtres, T035), chaque colonne reprend 100% de la largeur : titre et compteurs
   s'empilent chacun sur leur propre ligne, alignés à gauche. */
@media (max-width: 1024px) {
	.job-applicants .heading.row {
		justify-content: flex-start;
	}

	.job-applicants .heading.row > [class*="col-"] {
		width: 100%;
	}
}

/* --- Boutons d'action de la candidature : alignement propre même en cas de retour à la ligne --- */
.applicant-action-button.action-button {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	row-gap: 8px;
}

.applicant-action-button.action-button .btn-action-icon {
	flex: 0 0 auto;
}

/* --- Score IA + explication --- */
.mihantek-score-analysis {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #eee;
}

.mihantek-score-analysis .mihantek-score {
	font-weight: 600;
}

.mihantek-score-analysis .mihantek-score-explanation {
	margin: 4px 0 0;
	color: #6b7280;
}

.mihantek-badge-retenue {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: #16a34a;
	color: #fff;
	font-size: 12px;
	margin-right: 8px;
}

/* Force score analysis to take full width inside the flex container */
.candidate-list {
    flex-wrap: wrap;
}
.candidate-list .mihantek-score-analysis {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
}