* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin:0; padding:0; color:#333; background:#fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.site-header { background:#05a85a; padding:2.5rem 0; color:#fff; text-align:center; }
.site-header h1 { margin:0; font-size:2rem; }
.main-nav { background:#fff; border-bottom:1px solid #e5e5e5; }
.main-nav ul { list-style:none; padding:0.25rem 0; display:flex; gap:1rem; flex-wrap:wrap; margin:0; align-items:center; }
.main-nav .nav { justify-content:flex-start; }
.main-nav a { text-decoration:none; padding:0.4rem 0.6rem; background:transparent; border-radius:4px; color:#222; border:0; transition: background-color .15s ease, color .15s ease; }
.main-nav a.nav-link.active { color:#0b66ff; font-weight:600; background:transparent !important; border-color:transparent !important; }
.main-nav a.nav-link:hover { color:#0b66ff; background:rgba(11,102,255,0.08); }

/* Override Bootstrap pills to avoid persistent blue background */
.main-nav .nav-pills .nav-link.active,
.main-nav .nav-pills .show > .nav-link {
	color:#0b66ff;
	background-color: transparent;
}
.container { padding:1rem; }
.container { max-width: 100% !important; }

/* Table responsive wrapper */
.table-responsive { width:100%; overflow-x:auto; }
.table { width:100%; border-collapse: collapse; /* remove fixed layout to let columns size naturally */ table-layout: auto; }
.table th, .table td { border:1px solid #e9ecef; padding:0.45rem 0.5rem; text-align:left; vertical-align:middle; }
/* Empêcher les retours à la ligne dans les tableaux sur grands écrans seulement */
@media (min-width: 769px) {
	.table td,
	.table th {
		white-space: nowrap;
	}
}

/* Autoriser le scroll horizontal si nécessaire */
.table-responsive {
	overflow-x: auto;
}
/* Impression: ne sortir que le tableau (prévisualisation ou liste) */
@media print {
	/* Cacher globalement */
	body * { visibility: hidden; }
	/* Montrer uniquement le contenu tableau courant */
	.table-responsive, .table-responsive * { visibility: visible; }
	/* Positionner le tableau en haut à gauche, en pleine largeur */
	.table-responsive { position: absolute; left: 0; top: 0; width: 100%; }
	/* Cacher les éléments de navigation et de mise en page */
	header, nav, footer, .navbar, .card-header, .btn, .dropdown-menu, form, .alert { display: none !important; }
	/* Rendre le tableau imprimable sur une page paysage en réduisant la taille */
	@page { size: A4 landscape; margin: 10mm; }
	.table { font-size: 11px; table-layout: auto; width: 100%; }
	.table th, .table td { white-space: normal !important; padding: 4px 6px; }
	/* Autoriser le scroll horizontal si navigateur force l'aperçu */
	.table-responsive { overflow: visible; }
}
.table thead th { background:#f8f9fa; font-weight:700; font-size:0.92rem; padding:0.35rem 0.5rem; line-height:1.15; vertical-align:middle; }

/* Sticky header for long tables */
.table-responsive { width:100%; overflow:auto; max-height:60vh; }
.table-responsive thead th { position: sticky; top:0; z-index:5; }
/* Achats: disable inner scroll and sticky headers for full page scrolling */
.table-responsive.no-inner-scroll { max-height: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
.table-responsive.no-inner-scroll thead th { position: static !important; }

/* Column widths: tighter first column for Nom du Produit */
.table th:nth-child(1), .table td:nth-child(1) {
	min-width: 180px;
	max-width: 220px;
	width: 200px;
}
/* Achats: première colonne s'adapte (pas de largeur forcée) */
.achats-table th:nth-child(1), .achats-table td:nth-child(1) {
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
}

/* Apply ellipsis to long product names in first column */
.table td.col-product, .table td:nth-child(1) {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Achats table: selection column narrow */
.achats-table th.select-col, .achats-table td.select-col {
	min-width: 44px;
	width: 44px;
	max-width: 60px;
	text-align: center;
}

/* Achats table: date column compact */
.achats-table th.col-date, .achats-table td.col-date {
	min-width: 120px;
	width: 120px;
	max-width: 140px;
	white-space: nowrap;
}

/* Achats: colonne Information M. Premières avec clamp de lignes */
.achats-table th.col-info, .achats-table td.col-info {
	max-width: 160px;
	width: 160px;
}
/* Achats: colonnes numériques plus larges et alignées à droite */
.achats-table th.col-prix, .achats-table td.col-prix { min-width: 110px; width: 120px; max-width: 140px; }
.achats-table th.col-qte, .achats-table td.col-qte { min-width: 70px; width: 80px; max-width: 100px; }
.achats-table th.col-total, .achats-table td.col-total { min-width: 120px; width: 140px; max-width: 160px; }
.achats-table td.col-prix, .achats-table td.col-qte, .achats-table td.col-total { text-align: right; }
.text-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* afficher 2 lignes max */
	overflow: hidden;
}

/* Small screens: allow normal table flow and horizontal scroll */
@media (max-width: 900px) {
	/* Ne forcez pas une largeur minimale sur Achats pour éviter le scroll horizontal */
	.achats-table { min-width: 0 !important; }
}

/* Force single-line cells on larger viewports; allow wrapping on small screens */
@media (min-width: 769px) {
	table td, table th {
		white-space: nowrap !important;
		word-break: normal !important;
	}
}
/* Achats: autoriser les retours à la ligne pour éviter le scroll horizontal */
.achats-table td, .achats-table th {
	white-space: normal !important;
	word-break: break-word !important;
}
.fondants-table td, .fondants-table th {
	white-space: normal !important;
	word-break: break-word !important;
}
.achats-table.table-nowrap td, .achats-table.table-nowrap th {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

.form-row { margin-bottom:0.6rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.form-row label { display:flex; gap:0.5rem; align-items:center; }
.form-row input[type="text"], .form-row input[type="number"], .form-row input[type="datetime-local"] { padding:0.4rem; border:1px solid #ccc; border-radius:4px; }

.btn { display:inline-block; padding:0.45rem 0.9rem; background:#0b66ff; color:#fff; border-radius:6px; text-decoration:none; border:1px solid rgba(0,0,0,0.08); cursor:pointer; }
.btn.secondary { background:#6c6c6c; }
.btn:disabled { opacity:0.6; cursor:not-allowed; }

.footer { margin-top:2rem; text-align:center; color:#777; padding:2rem 0; }

/* Improve table action button */
.table .btn { padding:0.28rem 0.55rem; font-size:0.9rem; }

/* Make headers wrap nicely on small widths */
.table thead th { }
.table td { word-break: normal !important; }

/* Fondants: rétablir les retours à la ligne malgré la règle globale ci-dessus */
.table.fondants-table td, .table.fondants-table th {
	white-space: normal !important;
	word-break: break-word !important;
}

/* Tables that must keep each cell on a single line */
.table-nowrap td {
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}
.table-nowrap td.col-product, .table.table-nowrap td.col-product,
.table.table-nowrap td:first-child {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	word-break: break-word !important;
}
.table-nowrap th.col-product, .table.table-nowrap th:first-child {
	white-space: normal !important;
}
.table-nowrap thead th {
	white-space: normal; /* allow header stacking if desired */
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

/* Fondants: forcer la troncature de la colonne Matières premières */
.fondants-table td.col-mp, .fondants-table th.col-mp {
	width: 20ch;
	max-width: 20ch;
}
.fondants-table td.col-mp {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
/* Enforcer un layout fixe pour respecter les largeurs de colonnes */
.fondants-table { table-layout: fixed; }

/* Ellipsis utilitaire 20ch */
.truncate-ellipsis-20ch { display:inline-block; width:20ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap !important; vertical-align:middle; cursor:help; }

/* Fondants: largeurs dédiées pour éviter le chevauchement */
.fondants-table th.col-ufi, .fondants-table td.col-ufi { width: 22ch; }
.fondants-table th.col-date, .fondants-table td.col-date { width: 120px; }
.fondants-table th.col-numlot, .fondants-table td.col-numlot { width: 18ch; }
.fondants-table th.col-obs, .fondants-table td.col-obs { width: 120px; }
.fondants-table th.col-actions, .fondants-table td.col-actions { width: 120px; text-align: center; }
.fondants-table td.col-actions { white-space: nowrap !important; }

/* When headers are stacked (one word per line) center and tighten spacing */
.table-stack-headers thead th { text-align:center; line-height:1.1; font-weight:700; }
.table-stack-headers thead th small { display:block; }

/* smaller font for dense tables */
.table-sm th, .table-sm td { font-size:0.92rem; }

/* Highlight rows where bottle state is empty */
.table tbody tr.row-flacon-vide {
	/* Override Bootstrap table background via CSS variables */
	--bs-table-bg: #f8d7da;
	--bs-table-accent-bg: #f8d7da;
	--bs-table-striped-bg: #f8d7da;
	--bs-table-hover-bg: #f5c2c7;
	color: #7a1c21;
}
.table tbody tr.row-flacon-vide > * {
	background-color: #f8d7da !important; /* fallback for older rules */
}
.table-hover tbody tr.row-flacon-vide:hover > * {
	background-color: #f5c2c7 !important;
}

/* UFI: marquage d'alerte quand UFI=Oui sans numéros */
.table tbody tr.row-ufi-alert {
	--bs-table-bg: #f8d7da;
	--bs-table-accent-bg: #f8d7da;
	--bs-table-striped-bg: #f8d7da;
	--bs-table-hover-bg: #f5c2c7;
	color: #7a1c21;
}
.table tbody tr.row-ufi-alert > * { background-color: #f8d7da !important; }
.table-hover tbody tr.row-ufi-alert:hover > * { background-color: #f5c2c7 !important; }

/* UFI: marquage OK quand UFI est Non sur toutes les lignes */
.table tbody tr.row-ufi-ok {
	--bs-table-bg: #d1e7dd;
	--bs-table-accent-bg: #d1e7dd;
	--bs-table-striped-bg: #d1e7dd;
	--bs-table-hover-bg: #bcdad0;
	color: #0f5132;
}
.table tbody tr.row-ufi-ok > * { background-color: #d1e7dd !important; }
.table-hover tbody tr.row-ufi-ok:hover > * { background-color: #bcdad0 !important; }

/* Utility: allow dropdowns inside tables to overflow their container */
.overflow-visible { overflow: visible !important; }

/* Specific wrapper to disable clipping for dropdowns in history tables */
.dropdowns-overflow-visible .table-responsive {
	/* Agrandir l'encadrement et autoriser le menu à dépasser */
	max-height: 85vh !important;
	overflow: auto !important;
}

/* Éviter tout clipping au niveau du body de la carte */
.card-body.dropdowns-overflow-visible { overflow: visible !important; }

/* S'assurer que le menu passe au-dessus du tableau */
.dropdown-menu { z-index: 2000; }

/* Tooltip large et lisible pour "Voir plus" */
.tooltip-wide .tooltip-inner {
	max-width: 520px;
	text-align: left;
	white-space: pre-wrap;
}

/* Indicateur "…" cliquable/au survol pour infos matières premières */
.info-ellipsis {
	cursor: help;
	display: inline-block;
	padding: 0 .2rem;
	font-weight: 700;
	text-decoration: underline dotted;
}

/* Troncature avec ellipsis + tooltip */
.truncate-ellipsis {
	display: inline-block;
	width: 10ch; /* largeur courte pour codes (ex: PGP2025...) */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap !important;
	vertical-align: middle;
	cursor: help;
}
/* Variantes de largeur pour différents contenus */
.truncate-ellipsis-16ch { display:inline-block; width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap !important; vertical-align:middle; cursor:help; }
.truncate-ellipsis-24ch { display:inline-block; width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap !important; vertical-align:middle; cursor:help; }
@media print {
	/* En impression, montrer la valeur complète */
	.truncate-ellipsis { width: auto; white-space: normal !important; text-overflow: clip; }
}

/* UFI: autoriser retours à la ligne pour montrer deux lignes par cellule */
.ufi-table td, .ufi-table th { white-space: normal !important; }

/* UFI: deux lignes uniformes par cellule pour alignement parfait */
.ufi-lines { line-height: 1.25; }
.ufi-lines .line { min-height: 1.4rem; }
.ufi-lines .ufi-line-alert {
	background-color: #f8d7da;
	color: #7a1c21;
	border-radius: 4px;
	padding: 0.05rem 0.25rem;
}
.ufi-lines .ufi-line-ok {
	background-color: #d1e7dd;
	color: #0f5132;
	border-radius: 4px;
	padding: 0.05rem 0.25rem;
}

/* Mobile specific improvements */
@media (max-width: 768px) {
	/* Stack main nav for easier touch navigation */
	.main-nav .nav { flex-direction: column; gap: 0.25rem; }
	.main-nav .nav-link { padding: 0.75rem 0.9rem; width: 100%; }

	/* Forms: stack fields and make inputs full width */
	.form-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
	.form-row input[type="text"], .form-row input[type="number"], .form-row select, .form-row .btn {
		width: 100% !important; box-sizing: border-box;
	}
	/* Ensure any form control becomes full width on small screens (override inline widths) */
	input.form-control, select.form-select, textarea.form-control { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

	/* Larger touch targets for buttons */
	.btn { padding: 0.75rem 1rem; font-size: 1rem; border-radius: 8px; }

	/* Reduce container padding on small screens */
	.container { padding: 0.6rem; }

	 /* Tables: allow wrapping of cell content to avoid forced horizontal scroll where possible
		 Apply broadly to all tables (not only those with .table class) to override global nowrap rules */
	 table, table th, table td, table col { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
	 table th, table td { white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; }
	 /* Also ensure any col elements or inline style widths are neutralized */
	 table col { width: auto !important; }
	/* Keep table responsive wrapper to allow horizontal scroll when unavoidable */
	.table-responsive { overflow-x: auto; }

	/* Override fixed column widths and colgroup styles on small screens */
	.table col { width: auto !important; max-width: none !important; }
	.table th[style], .table td[style] { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
	/* Relax first-column width constraints on small screens */
	.table th:nth-child(1), .table td:nth-child(1) { min-width: 0 !important; max-width: 100% !important; width: auto !important; }
	/* Neutralize any inline 'width' attributes on headers to allow wrapping */
	table th[style*="width"], table td[style*="width"] { width: auto !important; max-width: 100% !important; }

	/* Make action buttons inside tables easier to tap */
	.table .btn { padding: 0.5rem 0.7rem; font-size: 0.95rem; }

	/* Reduce sticky header height on mobile */
	.table-responsive thead th { position: sticky; top: 0; z-index: 5; background: #fff; }

	/* Force smaller header appearance on mobile (important to override other rules) */
	.table thead th {
		padding: 0.2rem 0.4rem !important;
		font-size: 0.85rem !important;
		line-height: 1 !important;
		height: auto !important;
		min-height: 0 !important;
	}

	/* If table is stacked, hide the original thead completely */
	.table-stack-mobile thead { display: none !important; }

	/* On small screens, hide the inline search input, the field selector and the search button.
	   The floating loupe (FAB) modal remains the mobile trigger. */
	/* Strong hide for smartphone widths: hide field select and search submit in header forms
	   Keep the floating FAB (#mobileSearchFab) visible as the mobile search trigger. */
	@media (max-width: 991.98px) {
		/* target the header search form variants */
		form.d-flex > select[name="field"],
		form.d-flex > select.form-select[name="field"],
		form.d-flex select[name="field"],
		/* hide the visible search submit button (primary) inside the header form */
		form.d-flex > button[type="submit"],
		form.d-flex > .btn-primary,
		form.d-flex button.btn-primary {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			border: none !important;
			opacity: 0 !important;
			pointer-events: none !important;
		}
		/* Also collapse the select to avoid layout gaps */
		form.d-flex > select[name="field"] {
			min-width: 0 !important;
		}
	}

	/* Allow previously forced-ellipsis utilities to wrap on small screens */
	.truncate-ellipsis, .truncate-ellipsis-16ch, .truncate-ellipsis-24ch { white-space: normal !important; width: auto !important; max-width: 100% !important; overflow: visible !important; }

	/* Fondants specific overrides on mobile */
	.fondants-table td.col-mp, .fondants-table th.col-mp { white-space: normal !important; width: auto !important; max-width: 100% !important; }
	.fondants-table td.col-actions, .fondants-table th.col-actions { white-space: normal !important; }

	/* Put action buttons below the search/form controls on small screens */
	form.d-flex {
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* Ensure the main action group moves below and spans full width; align-left for easier reach */
	form.d-flex > .ms-auto {
		order: 2;
		width: 100%;
		display: flex;
		justify-content: flex-start; /* left align the Action button */
		margin-top: 0.45rem;
		gap: 0.5rem;
	}

	/* Let the search input expand to available width and be clearly visible */
	form.d-flex input.form-control {
		flex: 1 1 0;
		min-width: 0; /* allow shrinking */
		width: auto !important;
	}

	/* Keep selects and small controls compact so search gets priority */
	form.d-flex select.form-select, form.d-flex .btn, form.d-flex .btn-group {
		flex: 0 0 auto;
		min-width: 0;
		max-width: 9rem !important; /* limit width so it doesn't push the search */
	}

	/* Make the action dropdown button visually distinct and tappable when stacked */
	form.d-flex > .ms-auto .btn {
		width: auto; /* do not force full width */
	}

	/* If you prefer the action button centered instead, change justify-content to center above */
}

/* Very small screens tweaks */
@media (max-width: 480px) {
	.main-nav .nav-link { font-size: 0.95rem; padding: 0.6rem 0.65rem; }
	.site-header h1 { font-size: 1.25rem; }
	.table th, .table td { font-size: 0.95rem; }
}

/* Stacked table layout for very small screens: convert rows to cards with label/value */
@media (max-width: 768px) {
	.table-stack-mobile { border: 0; }
	.table-stack-mobile thead { display: none !important; }
	.table-stack-mobile tbody tr { display: block; margin: 0 0 0.6rem 0; border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden; }
	.table-stack-mobile tbody tr td { display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border: none; border-bottom: 1px solid #f1f1f1; }
	.table-stack-mobile tbody tr td:last-child { border-bottom: none; }
	.table-stack-mobile tbody tr td:before { content: attr(data-label); font-weight: 700; color: #333; margin-right: 0.75rem; flex: 0 0 45%; }
	.table-stack-mobile tbody tr td .truncate-ellipsis-24ch { max-width: 50%; }
}