:root {
  --bs-primary: #c9a174;
  --bs-primary-rgb: 201, 161, 116;
  --bs-primary-text-emphasis: rgb(100, 80, 58);
  --bs-primary-bg-subtle: rgb(248, 239, 228);
  --bs-primary-border-subtle: rgb(226, 201, 170);
  --bs-focus-ring-color: rgba(201, 161, 116, 0.25);
}
.btn-primary {
  --bs-btn-bg: #c9a174;
  --bs-btn-border-color: #c9a174;
  --bs-btn-hover-border-color: rgb(248, 239, 228);
  --bs-btn-active-bg: rgb(248, 239, 228);
  --bs-btn-active-border-color: rgb(201, 161, 116);
  --bs-btn-disabled-bg: #c9a174;
  --bs-btn-disabled-border-color: #c9a174;
  --bs-btn-hover-bg: rgb(154, 123, 89);
}
.btn-secondary {
    --bs-btn-color: #555;
    --bs-btn-bg: #EEE;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: #EEE;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 94, 105, 115;
    --bs-btn-active-color: #111;
    --bs-btn-active-bg: #444;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #DDD;
    --bs-btn-disabled-border-color: #424e5a;
}
.btn-outline-primary {
	--bs-btn-color: #c9a174;
	--bs-btn-border-color: #c9a174;
	--bs-btn-hover-bg: #c9a174;
	--bs-btn-hover-border-color: #c9a174;
	--bs-btn-active-bg: #c9a174;
	--bs-btn-active-border-color: #c9a174;
	--bs-btn-disabled-color: #c9a174;
	--bs-btn-disabled-border-color: #e2dad0;
}
.btn-outline-secondary {
	--bs-btn-disabled-color: #ded6cc;
}

.btn {
    --bs-btn-padding-x: 9px;
    --bs-btn-padding-y: 6px;
}
.btn iconify-icon {
	vertical-align: middle;
}
.equipments-container .alert {
	margin-top: 20px;
}

.tab-content fieldset h3 {
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 15px;
	color: #17324B;
}

.card fieldset {
	border: 1px solid #EEE;
	border-radius: 10px;
	padding: 20px;
}
.card fieldset > fieldset {
	border: 0;
	padding: 20px;
	background-color: #F4F4F4;
}
.card fieldset:not(:last-child) {
	margin-bottom: 30px;
}

/* File upload en lecture seule : masquer le bouton supprimer */
.file-upload-readonly [data-action="click->file-upload#deleteFile"] {
	display: none !important;
}

/* Inventaire */
.accordion-collapse .equipment-hierarchy-ctn {
	width: 150px;
}
.accordion-collapse .state-icons-ctn {
	width: 230px;
}
.accordion-collapse .state-icons {
	flex-wrap: wrap !important;
}
.accordion-button:not(.collapsed) {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}
.accordion-collapse .photo-gallery-ctn {
	width: 170px;
}
.accordion-collapse .buttons-group {
	width: 40px;
	align-self: stretch;
}
.accordion-collapse .commentaire-ctn {
	flex: 1;
	align-self: stretch;
}
.accordion-collapse .commentaire-ctn textarea {
	height: 100%;
	padding: 15px 20px;
}
.accordion-collapse .number-ctn input {
	width: 48px;
}
.bg-info {
	font-size: 1em;
}
.piece-name {
	font-size: 1em;
}

.order-controls .btn {
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 0;
	background-color: #FFF;
}

.order-controls .btn iconify-icon {
	font-size: 12px;
	pointer-events: none; /* Permet aux clics de passer au bouton parent */
}
.equipment-photo {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

/* Inventaire */

.accordion {
    --bs-accordion-btn-padding-x: 10px;
    --bs-accordion-btn-padding-y: 6px;
	--bs-accordion-btn-icon-width: 10px;
}
.accordion-button {
	background-color: transparent !important;
}

html[data-bs-theme=dark][data-sidebar-color=dark], html[data-bs-theme=dark][data-sidebar-color=light], html[data-bs-theme=light][data-sidebar-color=light], html[data-bs-theme=light][data-sidebar-color=dark] {
    --bs-sidebar-bg: #17324B;
    --bs-sidebar-item-color: #afb9cf;
    --bs-sidebar-item-hover-bg: #00000077;
    --bs-sidebar-item-hover-color: #ffffff;
    --bs-sidebar-border-color: #272f37;
}

.pagination {
	--bs-pagination-active-bg: #c9a174;
	--bs-pagination-active-border-color: #c9a174;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: #c9a174;
    border-color: #c9a174;
}
.form-check-input:checked {
	background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, * {
	font-family: "Questrial", sans-serif;
	font-weight: 400;
	font-style: normal;
}

footer.main-footer {
	backdrop-filter: blur(3px);
	background-color: #FFFFFFEE;
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1px solid #DDD;
	padding: 2px 6px;
	width: 100%;
	font-size: 0.7rem;
}

.logo-box .logo-lg {
	height: auto;
	width: 100%;
}


.custom-list-simple > ul > li {
	padding: 10px 0;
}
.custom-list-simple ul li:not(:first-child) {
	border-top: 1px solid #eee;
}

.custom-list-add ul {
	list-style: none;
	padding-left: 0;
}
.custom-list-add ul li:not(:first-child) {
	border-top: 1px solid #eee;
}
.custom-list-add > ul > li {
	padding: 20px 0;
}
.custom-list-add > ul > li {
	font-size: 20px;
	font-weight: bold;
}
.custom-list-add > ul > li ul li {
  	font-size: 15px;
  	font-weight: normal;
  	margin: 3px 0;
  	padding: 10px 0;
  	cursor: pointer;
}
.custom-list-add > ul > li ul li:hover {
	color: var(--bs-primary-text-emphasis);
}
.custom-list-add > ul > li ul {
  	margin-top: 5px;
}
.custom-list-add ul li:not(:has(ul)) {
	display: flex;
	position: relative;
}
.custom-list-add ul li:not(:has(ul)):after {
	content:"";
	width: 15px;
	height: 15px;
	content: "\ebc1";
	font-family: "boxicons" !important;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	position: absolute;
	right: 6px;
}
.custom-list-add.ajout-equipement > ul > li {
  	cursor: pointer;
}

.edit-page .card-header {
	border-bottom: 0 !important;
}



/* Check-out */


.accordion-collapse .equipments-container-check-out .state-icons-ctn {
	width: auto;
}

/* Check-out */


/* Data Table */

div.dts div.dt-scroll-body table, div.dts div.dataTables_scrollBody table {
	background: transparent;
}

.dataTable .nav-icon.drag, .dataTable tr:not(".dt-rowReorder-moving") .sorting_1:has(.drag) {
	display: flex;
	align-items: center;
}
.dataTable .nav-icon.drag {
	margin-right: 10px;
	cursor: pointer;
	padding: 6px;
}
.dt-container .dt-info, .dt-container .dt-paging {
	display: none;
}

.dt-scroll-body {
	overflow-y: hidden;
    max-height: 80vh;
}

.dataTable td, .dataTable th {
  white-space: nowrap;
  padding: 14px 20px;
  min-width: 120px;
}

.dataTable tr td, .dataTable tr th {
	overflow: hidden;
}

/* */
#table-inventaires {
  table-layout: fixed;
  width: 100%;
}

.dt-buttons .btn iconify-icon {
	vertical-align: top !important;
	font-size: 18px !important;
}

/*  */

div.dt-buttons {
	margin-bottom: 15px !important;
}
table.dataTable th, table.dataTable td {
    vertical-align: middle;
}

/* Datatable */

/* Réduction du padding/marge pour remonter le contenu (topbar + page-content) */
:root {
	--bs-topbar-height: 56px;
	--bs-footer-height: 24px;
}
.app-topbar .navbar-header {
	padding: 0 8px;
}
.page-content {
	padding-top: 0.25rem;
}
.topbar-page-title {
	max-width: min(50vw, 520px);
	overflow: hidden;
}
.topbar-page-title .breadcrumb {
	flex-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sidebar-env-switch .badge {
	white-space: normal;
}
@media (max-width: 991px) {
	.topbar-page-title {
		display: none;
	}
}

@media (max-width: 639px) {

	/* General*/

	html[data-sidebar-size=hidden] .app-topbar {
		padding: 0;
	}
	.app-topbar .navbar-header {
		padding: 0;
	}
	.page-content {
		padding-left: 0;
		padding-right: 0;
	}
	.card {
		border: none !important;
	}
	.card-body:not(.authentification .card-body), .accordion-body {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.row .col-lg-12, .row .col-lg-6, .row .col-lg-3 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.accordion-button .piece-name {
		flex: 1;
	}
	.btn {
		--bs-btn-padding-x: 9px;
		--bs-btn-padding-y: 6px;
	}

	/* Datatable */

	.dt-buttons .btn {
		padding: 4px 7px !important;

	}
	div.dt-container div.dt-search {
		text-align: left !important;
		margin-bottom: 15px !important;
		display: flex;
		align-items: center;
	}
	div.dt-container div.dt-search input {
		flex: 1;
	}
	.accordion-button::after {
		margin-left: 6px !important;
	}
	/* Datatable */

	/* Inventaire */
	.equipments-container .row > *:not(:last-child) {
		margin-bottom: 10px;
	}
	.equipments-container .row > * {
		width: 100%;
		padding: 0 !important;
	}
	.accordion-collapse .buttons-group {
		display: flex;
	}
	.accordion-collapse .buttons-group > *:not(:last-child) {
		margin-right: 5px;
	}
	.accordion-collapse .state-btn {
		padding: 2px !important;
		width: 40px;
		height: 35px;
	}
	.equipment-hierarchy-vertical {
		font-size: 1.1rem;
		line-height: 1.4;
	}
	.accordion-button .piece-name {
		min-width: 100px;
		width: 100%;
		height: 14px;
		overflow: hidden;
		display: inline-block;
	}
	#accordionInventaire .accordion-button {
		justify-content: space-between;
	}
	#accordionInventaire .btn-group-vertical {
		flex-direction: row;
	}
	#accordionInventaire .equipment-order-controls {
		width: 50px;
		padding-right: 20px !important;
	}
	#accordionInventaire .equipment-hierarchy-ctn {
		width: calc(100% - 70px);
	}
	#accordionInventaire .state-icons-ctn {
		width: calc(100% - 70px);
		margin-right: 20px;
	}
	#accordionInventaire .number-ctn {
		width: 50px;
	}
	/* Inventaire */

}

@media (min-width: 640px) {
	/* Inventaire */
	.accordion-collapse .buttons-group > *:not(:last-child) {
		margin-bottom: 5px;
	}

	.accordion-collapse .state-btn {
		padding: 2px !important;
		width: 35px;
	}

	.accordion-collapse .number-ctn input {
		padding: 0 10px !important;
		width: 48px;
    	height: 48px;
	}
	.equipment-hierarchy-vertical {
		font-size: .8em;
		line-height: 1.2;
	}
	/* Inventaire */
}

/* =====================================================================
   INVENTAIRE — Refonte UX mobile de l'onglet "Détail" (accordéons)
   Scopé sous #accordionInventaire / #detail : n'affecte que cette page.
   Placé en fin de fichier pour gagner la cascade sur les règles ci-dessus.
   ===================================================================== */

@media (max-width: 639px) {

	/* --- Réservation de l'espace des icônes (MOBILE uniquement) : évite le
	   reflow / "saut" quand iconify récupère le SVG au chargement. Scopé au
	   mobile pour ne rien changer au rendu desktop. */
	#detail iconify-icon {
		display: inline-block;
		width: 1em;
		height: 1em;
		vertical-align: -0.125em;
	}

	/* --- Filet anti-débordement horizontal (bug WebKit/Safari) ---------
	   min-width:0 autorise les enfants flex à rétrécir sous leur contenu ;
	   on neutralise aussi la gouttière négative des .row internes. */
	#accordionInventaire,
	#accordionInventaire .accordion-item,
	#accordionInventaire .accordion-body {
		min-width: 0;
		max-width: 100%;
		border: 0;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	#accordionInventaire .accordion-body .row {
		--bs-gutter-x: 0;
		margin-left: 0;
		margin-right: 0;
	}
	#accordionInventaire .equipment-item .row > *,
	#accordionInventaire .equipment-hierarchy-ctn,
	#accordionInventaire .state-icons-ctn,
	#accordionInventaire .commentaire-ctn {
		min-width: 0;
	}

	/* --- En-tête d'accordéon sur UNE ligne (mobile) -------------------------
	   [ nom (tronque) + badges + chevron ] [ photo ] [ kebab ]
	   Une seule ligne → rendu identique ouvert ET fermé (pas de bande
	   flottante). Le réordonnancement de pièce est déplacé dans le kebab. */
	#accordionInventaire .accordion-header > .d-flex {
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		padding: 0;
	}
	/* Réordonnancement pièce masqué sur mobile (présent dans le menu kebab) */
	#accordionInventaire .order-controls {
		display: none;
	}
	/* Le toggle prend l'espace restant ; le nom tronque proprement */
	#accordionInventaire .accordion-button {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 48px;
		padding: 10px 6px 10px 0;
	}
	#accordionInventaire .accordion-button .piece-name {
		height: auto;
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* Badges et chevron ne rétrécissent pas : seul le nom absorbe la contrainte,
	   donc le chevron reste toujours à l'intérieur du bouton. */
	#accordionInventaire .accordion-button .badge,
	#accordionInventaire .accordion-button::after {
		flex-shrink: 0;
	}
	/* Badges : même hauteur exacte (nombre d'éléments vs nombre de photos),
	   marge gauche réduite pour laisser plus de place au nom */
	#accordionInventaire .accordion-button .badge {
		display: inline-flex;
		align-items: center;
		height: 22px;
		padding: 0 7px;
		margin-left: 4px !important;
	}
	/* Marges des actions retirées (l'espacement est géré par gap) */
	#accordionInventaire .upload-piece-photo-btn,
	#accordionInventaire .piece-actions-menu {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Flèche de repli (chevron Bootstrap) : plus grande, jamais collée au bord
	   (photo + kebab la suivent) */
	#accordionInventaire .accordion-button::after {
		width: 1.3rem;
		height: 1.3rem;
		background-size: 1.3rem;
		margin-left: 8px !important;
	}

	/* Actions visibles (photo + kebab) : ≥44px, taille fixe */
	#accordionInventaire .upload-piece-photo-btn,
	#accordionInventaire .piece-actions-toggle {
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Icônes du cluster d'en-tête : lisibles dans les cibles 44px */
	#accordionInventaire .upload-piece-photo-btn iconify-icon,
	#accordionInventaire .piece-actions-toggle iconify-icon {
		font-size: 20px;
	}
	/* Items du menu kebab : hauteur confortable au doigt */
	#accordionInventaire .piece-actions-menu .dropdown-item {
		display: flex;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#accordionInventaire .piece-actions-menu .dropdown-item iconify-icon {
		font-size: 18px;
	}

	/* --- Item équipement : hiérarchie plus compacte, alignée à gauche ---- */
	#accordionInventaire .equipment-hierarchy-ctn {
		width: calc(100% - 120px);
	}
	#accordionInventaire .equipment-order-controls {
		width: 120px;
	}
	#accordionInventaire .equipment-order-controls .btn {
		min-width: 48px;
		min-height: 42px;
		padding: 8px;
	}
	#accordionInventaire .equipment-order-controls .btn iconify-icon {
		font-size: 18px;
	}
	#accordionInventaire .equipment-hierarchy-vertical {
		font-size: 1rem;
		line-height: 1.3;
		text-align: left;
	}

	/* Niveau de contrôle (œil / case / photo) : cibles ≥44px, pleine largeur */
	#accordionInventaire .control-level-ctn { width: 100%; }
	#accordionInventaire .control-level-ctn .btn-group { width: 100%; }
	#accordionInventaire .control-level-btn {
		min-height: 46px;
		flex: 1;
	}
	#accordionInventaire .control-level-btn iconify-icon { font-size: 20px; }

	/* Boutons d'état (5 smileys) : hauteur ≥44px, répartis sur la largeur */
	#accordionInventaire .state-icons-ctn { width: 100%; margin-right: 0; margin-top: 10px; }
	#accordionInventaire .state-icons,
	#accordionInventaire .state-icons .btn-group { width: 100%; }
	#accordionInventaire .state-btn {
		height: 46px;
		width: auto;
		flex: 1;
	}
	#accordionInventaire .state-btn iconify-icon { font-size: 22px; }

	/* Commentaire : pleine largeur (évite l'écrasement vertical) */
	#accordionInventaire .commentaire-ctn {
		width: 100%;
		flex: 0 0 100%;
	}
	#accordionInventaire .commentaire-ctn textarea {
		min-height: 70px;
		padding: 10px 12px;
	}

	/* Quantité : champ confortable */
	#accordionInventaire .number-ctn { width: 100%; flex: 0 0 100%; }
	#accordionInventaire .number-ctn input {
		width: 100%;
		height: 46px;
		text-align: center;
	}

	/* Actions bas de carte équipement (photo / supprimer) : ≥44px */
	#accordionInventaire .buttons-group .btn {
		min-width: 46px;
		min-height: 46px;
	}
	#accordionInventaire .buttons-group .btn iconify-icon { font-size: 20px; }

	/* Actions destructives de la pièce (bas d'accordéon) : pleine largeur */
	#accordionInventaire .accordion-item > .d-block .btn {
		min-height: 44px;
	}

	/* Wrapper contrôle+états : neutre sur mobile (les enfants restent pleine
	   largeur, empilés comme avant). */
	#accordionInventaire .control-state-stack {
		display: block;
		width: 100%;
	}
}

/* =====================================================================
   INVENTAIRE — Empilement "niveau de contrôle" + "états" sur desktop
   Sur petit desktop, le groupe de contrôle (col-md-1, trop étroit) et le
   groupe d'états se chevauchaient. On les empile verticalement dans un même
   emplacement : contrôle au-dessus, états en dessous. La hauteur obtenue
   correspond à celle des flèches d'ordre (déjà sur 2 lignes).
   ===================================================================== */
@media (min-width: 640px) {
	.accordion-collapse .control-state-stack {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 6px;
		align-self: center;
		flex: 0 0 auto;
		/* neutralise le .row > *{width:100%} du thème qui gonflait le bloc
		   à toute la largeur de la rangée */
		width: auto !important;
	}
	/* Dans la pile, chaque groupe se dimensionne à son contenu (plus de
	   largeur fixe qui écrasait le groupe de contrôle) */
	.accordion-collapse .control-state-stack .control-level-ctn,
	.accordion-collapse .control-state-stack .state-icons-ctn {
		width: auto;
		padding: 0;
		flex: 0 0 auto;
	}
	/* Les deux groupes gardent la même largeur pour un alignement net */
	.accordion-collapse .control-state-stack .state-icons {
		flex-wrap: nowrap !important;
	}
}

/* =====================================================================
   INVENTAIRE — Rangée "Ajouter équipement" alignée à droite
   L'en-tête (dans .accordion-header) et le corps (.accordion-body, padding
   horizontal ~20px) n'ont pas le même bord de contenu. On annule le padding
   droit du corps pour cette rangée : son conteneur atteint alors le même
   bord que l'en-tête, et le me-2 du btn-group reproduit exactement le retrait
   du dernier picto d'action de l'en-tête → alignement parfait à droite. */
@media (min-width: 640px) {
	#accordionInventaire .equipment-add-row {
		margin-right: calc(-1 * var(--bs-accordion-body-padding-x, 1.25rem));
	}
}

/* =====================================================================
   INVENTAIRE — Mobile : quantité sur la même ligne que photo & supprimer
   La quantité prenait toute la largeur (bloc dédié) au-dessus des boutons
   photo/supprimer. On la ramène sur la même ligne, largeur ≈ celle d'un
   bouton (46px), boutons alignés à droite. Desktop non affecté.
   ===================================================================== */
@media (max-width: 639px) {
	#accordionInventaire .number-ctn {
		width: 46px !important;
		flex: 0 0 46px !important;
	}
	#accordionInventaire .number-ctn input {
		width: 46px;
		padding: 0 4px;
	}
	#accordionInventaire .accordion-collapse .buttons-group {
		flex: 1 1 auto !important;
		width: auto !important;
		justify-content: flex-end;
		align-items: center;
	}
	#form-edit-checkout #accordionPieces h2 {
		font-size: 14px;
	}
	#form-edit-checkout #accordionPieces span {
		word-wrap: anywhere;
	}
	#form-edit-checkout > .row > .col-12, #form-edit-checkout .col-md-12:not(.card-body .col-md-12), #form-edit-checkout .card-body .card-body {
		padding: 0 !important;
	}
	#form-edit-checkout fieldset {
		padding: 0;
		border: 0;
	}
}