/**
 * Choices.js customizations and enforced CSS for FLEXIcontent
 * Matching the select2 overrides in flexi_shared.less / flexi_form.less
 */

/* ===========================
   SINGLE SELECT - Core sizing
   =========================== */

#flexicontent .choices,
.choices {
	margin: 0;
	min-height: calc(var(--form-inp-height) - 2px);
	line-height: calc(var(--form-inp-height) - 4px);
	vertical-align: baseline;
	padding: 0;
}

#flexicontent .choices .choices__inner,
.choices .choices__inner {
	padding: 0 7px !important;
	margin: 0 !important;
	font-weight: normal !important;
	display: flex !important;
	align-items: center !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
	height: auto !important;
	box-sizing: border-box !important;
	background: var(--form-control-bg, #fff) !important;
	border-radius: var(--border-radius, 0) !important;
	border: var(--form-control-border, 1px solid var(--input-border-color, #aaa)) !important;
}

/* Frontend : Cassiopeia ne définit pas --form-control-* mais définit
   --border-radius (.25rem). On fige 5px uniquement hors backend pour
   donner aux selects choices un bord arrondi cohérent sur le front,
   indépendant des variables du template. En backend (body.admin), ce sont
   les variables Atum qui s'appliquent. */
body:not(.admin) .choices {
	--border-radius: 5px;
}

#flexicontent.fcconfig-form .choices .choices__inner {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
}

html[dir="rtl"] .choices .choices__inner {
	padding: 0 8px 0 0 !important;
}

.choices .choices__item--selectable {
	color: inherit;
	white-space: pre-wrap !important;
	padding: 0 !important;
	min-height: calc(var(--form-inp-height) - 4px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
}

.choices .choices__list--single .choices__item--selectable {
	padding: 0 7px !important;
}

/* The base choices.css adds 4px top/bottom padding to .choices__list--single,
   which makes the closed box 6px taller than a same-height input placed
   beside it (single-select textselect field). Zero it so the box matches
   the input height and they align vertically. */
/* Single-select list: restore the original padding (0 top/bottom, 16px right
   for the arrow reserve, 4px left) so the closed box keeps its original look,
   while the vertical padding fix still applies. */
.choices .choices__list--single {
	padding: 0 16px 0 4px !important;
}

/* The template .form-control (Atum .5rem / Bootstrap .375rem vertical padding)
   makes the input taller than the choices box next to it, because flexicontent
   forces min-height --form-inp-height but not the vertical padding. Neutralize
   the vertical padding on inputs in the inline (.fc-xpended) layouts so the
   input and the choices box have exactly the same height. */
#flexicontent .fc-xpended > input,
#flexicontent .fc-xpended-row > input {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.choices .choices__button {
	border-left: 0px solid #aaa !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 2px !important;
	background-image: url('../images/select2.png') !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
}

/* Form validation failed */
.choices.invalid .choices__inner {
	border-color: red !important;
}

/* Placeholder text */
.choices .choices__placeholder {
	color: #999 !important;
	opacity: 1 !important;
}

/* Focus state */
.choices.is-focused .choices__inner {
	border-color: #5897fb !important;
	outline: 0 !important;
	box-shadow: none !important;
}


/* ===========================
   MULTI SELECT - Core
   =========================== */

.choices .choices__list--multiple {
	list-style-type: none !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	padding: 0px !important;
	margin: 0 !important;
	white-space: normal !important;
	width: auto !important;
	min-width: 2rem !important;
	min-height: 1.9rem !important;
	line-height: 1.9rem !important;
	display: flex !important;
	flex-wrap: wrap !important;
}

.choices .choices__list--multiple .choices__item {
	box-sizing: content-box !important;
	display: inline-flex !important;
	align-items: center !important;
	border-radius: var(--border-radius, 0) !important;
	margin: 1px !important;
	padding: 0 4px !important;
	min-height: 1.7rem !important;
	line-height: 1.7rem !important;
	font-size: 0.9rem !important;
	background-color: var(--choices-list-multiple-item-bg, var(--form-control-bg, #fff)) !important;
	border: 1px solid var(--choices-list-multiple-item-bg, var(--input-border-color, #aaa)) !important;
	color: var(--choices-list-multiple-item, inherit) !important;
	word-break: break-word !important;
}

.choices .choices__list--multiple .choices__button {
	background-image: url('../images/select2.png') !important;
	background-position: right -22px !important;
	background-repeat: no-repeat !important;
	text-indent: 0 !important;
	padding: 0 2px 0 2px !important;
	margin: -1px 0 0 0 !important;
	font-size: 0 !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	background-color: transparent !important;
	color: #999 !important;
}

.choices .choices__list--multiple .choices__button:hover {
	color: #666 !important;
}

/* Search field in multi-select */
.choices .choices__input--cloned {
	padding: 0px !important;
	margin: 0px 2px !important;
	line-height: 1em !important;
	position: relative !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.choices .choices__list--dropdown .choices__input,
.choices__input--cloned {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
	padding: 0 7px !important;
	margin-top: 1px !important;
	box-sizing: content-box !important;
	background: #fff !important;
	background-image: url('../images/select2.png') !important;
	background-repeat: no-repeat !important;
	background-position: 93% -22px !important;
	border: 0px solid lightgray !important;
	cursor: pointer !important;
	min-width: 32px !important;
	width: 22px !important;
}

.choices.is-open .choices__input--cloned {
	min-width: 124px !important;
	width: auto !important;
	cursor: default !important;
	padding: 2px 6px 2px 26px !important;
	background-position: -32px -22px !important;
}


/* ===========================
   DROPDOWN
   =========================== */

.choices__list--dropdown {
	padding: 0px !important;
}

/* Search input inside dropdown (single-select) */
.choices__list--dropdown .choices__input {
	display: block !important;
	width: 100% !important;
	padding: 6px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #ddd !important;
	font-size: 0.9rem !important;
	background: #f7f7f7 !important;
	box-sizing: border-box !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.choices__list--dropdown .choices__input:focus {
	outline: 0 !important;
	background: #fff !important;
}

.choices__list--dropdown .choices__list {
	padding: 0px !important;
	max-height: 400px !important;
	overflow-y: auto !important;
}

.choices__list--dropdown .choices__item {
	padding: 0 2px 0 1rem !important;
	font-size: 0.9rem !important;
	line-height: 1.9rem !important;
	min-height: 1.9rem !important;
	cursor: pointer !important;
	white-space: normal !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: #d8d8d8 !important;
	color: #fff !important;
}

.choices__list--dropdown .choices__item--disabled {
	opacity: 0.6 !important;
	font-style: italic !important;
}

/* Dropdown border when active */
.choices.is-open .choices__list--dropdown {
	border: 1px solid #aaa !important;
	border-radius: 0 0 var(--border-radius, 0) var(--border-radius, 0) !important;
}


/* ===========================
   FILTER BOX OVERRIDES
   =========================== */

#flexicontent .fc_filter_box .choices,
.fc_filter_box .choices {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__inner,
.fc_filter_box .choices .choices__inner {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__input--cloned,
.fc_filter_box .choices .choices__input--cloned {
	height: unset !important;
	min-height: calc(var(--filts-inp-height) - 2px) !important;
	line-height: calc(var(--filts-inp-height) - 2px) !important;
	padding: 0 4px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__list--multiple,
.fc_filter_box .choices .choices__list--multiple {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* ===========================
   BACKEND MANAGER FILTER BOX (#fc-filters-box) — MULTI-SELECT FIX
   =========================== */
/* The outer .choices__inner is display:flex nowrap (see above) while the
   cloned search input is a sibling of the chips list. The input expands to
   min-width:124px on .is-open, so with nowrap it stole the row width and the
   chips list (.choices__list--multiple) got squeezed. Allow wrapping so the
   input moves to its own line instead of compressing the list. */

#fc-filters-box .choices[data-type*="select-multiple"] .choices__inner {
	flex-wrap: wrap !important;
}

#fc-filters-box .choices[data-type*="select-multiple"] .choices__list--multiple {
	flex: 1 1 auto !important;
}

#fc-filters-box .choices[data-type*="select-multiple"] .choices__input--cloned {
	flex: 0 0 auto !important;
}

#fc-filters-box .choices[data-type*="select-multiple"].is-open .choices__input--cloned {
	flex: 1 1 100% !important;
}


/* ===========================
   INPUT GROUP SIZING (form-inp-height)
   =========================== */

.input-prepend .choices,
.input-append .choices,
.input-group .choices {
	height: unset !important;
	min-height: var(--form-inp-height) !important;
	line-height: var(--form-inp-height) !important;
	box-sizing: border-box !important;
}

.input-prepend .choices .choices__inner,
.input-append .choices .choices__inner,
.input-group .choices .choices__inner {
	height: unset !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.input-prepend .choices .choices__input--cloned,
.input-append .choices .choices__input--cloned,
.input-group .choices .choices__input--cloned {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.input-prepend .choices .choices__list--multiple,
.input-append .choices .choices__list--multiple,
.input-group .choices .choices__list--multiple {
	min-height: var(--form-inp-height) !important;
	line-height: var(--form-inp-height) !important;
}


/* ===========================
   MANAGER INPUT GROUP SIZING (fcman-inp-height)
   =========================== */

#j-main-container .fc-xpended .choices,
#j-main-container .btn-group .choices {
	min-height: var(--fcman-inp-height) !important;
	line-height: var(--fcman-inp-height) !important;
}

#j-main-container .fc-xpended .choices .choices__inner,
#j-main-container .btn-group .choices .choices__inner {
	min-height: calc(var(--fcman-inp-height) - 2px) !important;
	line-height: calc(var(--fcman-inp-height) - 2px) !important;
}

#j-main-container .fc-xpended .choices .choices__input--cloned,
#j-main-container .btn-group .choices .choices__input--cloned {
	min-height: calc(var(--fcman-inp-height) - 2px) !important;
	line-height: calc(var(--fcman-inp-height) - 2px) !important;
}

#j-main-container .fc-xpended .choices .choices__list--multiple,
#j-main-container .btn-group .choices .choices__list--multiple {
	min-height: var(--fcman-inp-height) !important;
	line-height: var(--fcman-inp-height) !important;
}


/* ===========================
   FLOATED-LABEL MODE
   =========================== */

.flexicontent > div.use_select2_lib .choices,
.flexicontent > .choices {
	width: 100% !important;
}

.flexicontent > div.use_select2_lib .choices .choices__inner,
.flexicontent > .choices .choices__inner {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-bottom: 1px solid gray !important;
	padding: 0 0 0 0px !important;
}

.flexicontent > div.use_select2_lib:not(.is-focused) .choices .choices__inner,
.flexicontent > .choices:not(.is-focused) .choices__inner {
	background: transparent !important;
	box-shadow: unset !important;
}


/* ===========================
   CHECKBOX MODE (multi-select with checkboxes)
   =========================== */

/* Force vertical stacking inside the checkbox dropdown */
.choices__list--dropdown .choices__list--choice {
	display: block !important;
	width: 100% !important;
}

.fc-choices-checkbox-item {
	display: flex !important;
	align-items: center !important;
	padding: 2px 8px !important;
	cursor: pointer !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.fc-choices-checkbox {
	margin-right: 6px !important;
	cursor: pointer !important;
}

.fc-choices-checkbox-label {
	cursor: pointer !important;
	line-height: 1.9rem !important;
}


/* ===========================
   SORTABLE
   =========================== */

.fc-choices-ghost {
	opacity: 0.4 !important;
}

.fc-choices-drag {
	background: #e8e8e8 !important;
	border: 1px dashed #aaa !important;
}

/* Drag handle prepended to each sortable tag */
.fc-select2-handle {
	display: inline-block !important;
	width: 1rem !important;
	min-width: 1rem !important;
	text-align: center !important;
	cursor: grab !important;
	user-select: none !important;
	opacity: 0.7 !important;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	color: inherit !important;
}

.fc-select2-handle:hover {
	opacity: 1 !important;
}

.fc-select2-handle:active {
	cursor: grabbing !important;
}


/* ===========================
   INNER LABELS & PROMPTS
   =========================== */

.fc_has_inner_label_choices,
.fc_has_inner_prompt_choices {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	color: #999;
	font-style: italic;
	padding: 0 7px;
	line-height: calc(var(--form-inp-height) - 4px);
	min-height: calc(var(--form-inp-height) - 4px);
}

.fc_has_inner_prompt_choices {
	display: none;
}

.choices__inner {
	position: relative !important;
}


/* ===========================
   MARKER IMAGE (addressint)
   =========================== */

.fc-marker-img {
	max-height: 20px;
	vertical-align: middle;
	margin-right: 4px;
}


/* ===========================
   RTL SUPPORT
   =========================== */

html[dir="rtl"] .choices .choices__inner {
	padding: 0 8px 0 0 !important;
}

html[dir="rtl"] .choices .choices__list--multiple .choices__item {
	margin-left: 0 !important;
	margin-right: 1px !important;
}

html[dir="rtl"] .choices .choices__button {
	margin-left: 0 !important;
	margin-right: 2px !important;
}

html[dir="rtl"] .fc_has_inner_label_choices,
html[dir="rtl"] .fc_has_inner_prompt_choices {
	right: 0;
	left: auto;
}


/* ===========================
   DARK MODE (Joomla 5/6, data-bs-theme)
   =========================== */

[data-bs-theme="dark"] .choices .choices__inner {
	background: var(--body-bg, #26282b) !important;
	border-color: var(--border-color, #4a4a4a) !important;
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices.is-focused .choices__inner,
[data-bs-theme="dark"] .choices.is-open .choices__inner {
	border-color: #4c8bf5 !important;
}

[data-bs-theme="dark"] .choices .choices__placeholder {
	color: var(--text-muted, #999999) !important;
}

[data-bs-theme="dark"] .choices .choices__item {
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__item {
	background: var(--template-bg-dark-40, #3a3d42) !important;
	border-color: var(--border-color, #555) !important;
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices .choices__button {
	background-image: none !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__button {
	background-image: none !important;
	color: var(--text-muted, #999) !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__button:hover {
	color: var(--body-color, #fff) !important;
}

[data-bs-theme="dark"] .choices .choices__input--cloned,
[data-bs-theme="dark"] .choices__list--dropdown .choices__input {
	background: var(--body-bg, #26282b) !important;
	background-image: none !important;
	color: var(--body-color, #dee1e6) !important;
	border-bottom-color: var(--border-color, #4a4a4a) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__input:focus {
	background: var(--body-bg, #26282b) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown {
	background: var(--body-bg, #26282b) !important;
	border-color: var(--border-color, #4a4a4a) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--template-bg-dark-40, #4a4d52) !important;
	color: var(--body-color, #fff) !important;
}

[data-bs-theme="dark"] .choices[data-type*=select-one]::after {
	border-color: var(--body-color, #dee1e6) transparent transparent transparent;
}

[data-bs-theme="dark"] .choices[data-type*=select-one].is-open::after {
	border-color: transparent transparent var(--body-color, #dee1e6);
}

[data-bs-theme="dark"] .choices.is-disabled .choices__inner,
[data-bs-theme="dark"] .choices.is-disabled .choices__input {
	background-color: var(--template-bg-dark-80, #1f2124) !important;
}

[data-bs-theme="dark"] .fc-choices-checkbox-label {
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .fc_has_inner_label_choices,
[data-bs-theme="dark"] .fc_has_inner_prompt_choices {
	color: var(--text-muted, #999) !important;
}

[data-bs-theme="dark"] .flexicontent > div.use_select2_lib .choices:not(.is-focused) .choices__inner,
[data-bs-theme="dark"] .flexicontent > .choices:not(.is-focused) .choices__inner {
	border-bottom-color: var(--border-color, #4a4a4a) !important;
}


/* ===========================
   BACKEND (Joomla admin / Atum) — theme CSS variables
   COULEURS & ARRONDI issus des variables du thème (template.css)
   =========================== */

body.admin .choices .choices__inner {
	background: var(--form-control-bg, var(--body-bg, #fff)) !important;
	border: var(--form-control-border, 1px solid var(--input-border-color, #aaa)) !important;
	border-radius: var(--border-radius, 0.25rem) !important;
	color: var(--body-color, inherit) !important;
}

body.admin .choices.is-focused .choices__inner {
	border-color: var(--focus, #39f) !important;
	box-shadow: 0 0 0 0.2rem var(--focus-shadow, transparent) !important;
}

body.admin .choices .choices__placeholder {
	color: var(--choices-input-placeholder, var(--text-muted, #999)) !important;
}

body.admin .choices .choices__list--dropdown {
	background: var(--dropdown-bg, var(--body-bg, #fff)) !important;
	border: var(--dropdown-border-width, var(--border-width, 1px)) solid var(--dropdown-border-color, var(--border-color, #dee2e6)) !important;
	border-radius: var(--dropdown-border-radius, var(--border-radius, 0.25rem)) !important;
	box-shadow: var(--dropdown-box-shadow, 0 1px 1px #00000026) !important;
}

body.admin .choices .choices__list--dropdown .choices__item {
	color: var(--dropdown-link-color, var(--body-color, inherit)) !important;
}

body.admin .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--atum-dropdown-link-hover-bg, var(--dropdown-link-hover-bg, var(--template-bg-dark-5, #e9ecef))) !important;
	color: var(--atum-dropdown-link-hover-color, var(--dropdown-link-hover-color, var(--body-color, inherit))) !important;
}

body.admin .choices .choices__input,
body.admin .choices .choices__input--cloned,
body.admin .choices__list--dropdown .choices__input {
	background-color: var(--form-control-bg, var(--body-bg, #fff)) !important;
	color: var(--body-color, inherit) !important;
}

body.admin .choices .choices__list--multiple .choices__item {
	background: var(--choices-list-multiple-item-bg, var(--template-bg-dark)) !important;
	border-color: var(--choices-list-multiple-item-bg, var(--template-bg-dark)) !important;
	color: var(--choices-list-multiple-item, var(--template-text-light, #fff)) !important;
	border-radius: var(--border-radius-sm, 0.2rem) !important;
}

body.admin .choices .choices__list--multiple .choices__button {
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: 1.25rem !important;
	min-height: 1.25rem !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 8px 8px !important;
	color: var(--choices-list-multiple-item, var(--template-text-light, #fff)) !important;
	opacity: 0.8 !important;
}

body.admin .choices .choices__list--multiple .choices__button:hover {
	opacity: 1 !important;
}

body.admin .choices .choices__button:focus {
	box-shadow: var(--choices__button_joomla-focus-box-shadow, 0 0 0 #00bcd4) !important;
	outline: 0 !important;
}

body.admin .choices .choices__button {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236b6b6b' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 8px 8px !important;
	opacity: 0.8 !important;
}

body.admin .choices .choices__button:hover {
	opacity: 1 !important;
}

body.admin .fc_has_inner_label_choices,
body.admin .fc_has_inner_prompt_choices {
	color: var(--choices-input-placeholder, var(--text-muted, #999)) !important;
}

/* Native scrollbar for filter value lists (vertical/horizontal) —
   replaces the jQuery mCustomScrollbar (mCSB) used in legacy (select2js) mode,
   since this stylesheet is only loaded when choices.js is active. */
.fc_add_scroller {
	overflow-y: auto !important;
	max-height: 220px !important;
	-webkit-overflow-scrolling: touch;
}
.fc_add_scroller_horizontal {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}