/* Dolibarr force overflow-x:auto sur .box (barre de scroll dès qu'il y a un léger débordement).
   On la désactive uniquement sur nos 2 boxes (ciblées par leur contenu, pas globalement). */
div.box:has(#indicComm),
div.box:has(#ca) {
	overflow-x: hidden;
}

/* setupCollapse() (index.js) bascule juste ces classes au clic — ni Dolibar ni ce module ne les
   stylait, donc le bouton "afficher/masquer" (#indicTable, section Indicateurs de Suivi commercial)
   changeait bien d'icône mais ne masquait/affichait jamais rien visuellement. */
#indicTable.collapse {
	display: none;
}
#indicTable.collapse.show {
	display: block;
}

/* #total-data (CA agence) est un <tbody>, pas un <div> — sa valeur display naturelle est
   table-row-group, pas block (sinon les <tr> qu'il contient ne s'aligneraient plus en table). */
#total-data.collapse {
	display: none;
}
#total-data.collapse.show {
	display: table-row-group;
}

/* .ac-widget* (tpl/widget_shell.tpl.php) n'a jamais eu de style propre — le fond gris visible
   derrière le graphique vient donc d'un héritage (theme Dolibar). Transparent explicite pour ne pas
   dépendre de ce qui se trouve derrière. */
.ac-widget,
.ac-widget-filters,
.ac-widget-legend,
.ac-widget-chart,
.ac-widget-indicators {
	background: transparent;
}

/* ============================================================================
   Indicateurs (badges CA/Dépenses/Résultat) — langage visuel partagé entre le widget CA agence
   (chart-base.js, badges pilule) et Suivi commercial (indicator-formulas.js, valeur en badge dans
   une cellule de tableau) : même police, mêmes couleurs positif/négatif, même style de badge.
   Extrait des styles inline dupliqués dans chart-base.js pour être réutilisable ailleurs (option B
   de l'harmonisation : structure de chaque widget conservée, seul le langage visuel est partagé).
   ============================================================================ */
.ac-indic-name {
	font-weight: bold;
	font-family: Arial, sans-serif;
}

.ac-indic-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background-color: #f4f4f4;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	font-weight: bold;
	font-family: Arial, sans-serif;
	white-space: nowrap;
}

.ac-indic-value-positive {
	color: #27ae60;
}

.ac-indic-value-negative {
	color: #e74c3c;
}

.ac-indic-proportion {
	margin-left: 8px;
	color: #2c3e50;
	border-right: 2px solid #d1d1d1;
	border-bottom: 2px solid #a6a6a6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	background-color: #f9f9f9;
	padding: 1px 4px;
}

/* Une table HTML sizes ses colonnes au contenu non wrappé par défaut (max-content), donc les
   div flex (.chart-buttons-container/.ac-filters) qu'elle contient ne peuvent jamais rétrécir
   ni passer à la ligne : elles poussent la table plus large que l'écran, et overflow-x:hidden
   ci-dessus se contente alors de couper ce débordement au lieu de laisser le flex-wrap agir.
   table-layout:fixed force la table à respecter la largeur de son conteneur, ce qui permet enfin
   au flex-wrap des filtres/boutons de fonctionner sur petit écran. */
div.box:has(#indicComm) table.boxtable,
div.box:has(#ca) table.boxtable {
	table-layout: fixed;
	width: 100%;
}
div.box:has(#indicComm) table.boxtable > tbody > tr > td,
div.box:has(#ca) table.boxtable > tbody > tr > td {
	min-width: 0;
}

/* Mode plein écran (bouton ⛶) : la box concernée passe en overlay fixe couvrant tout le viewport,
   au lieu de rester contrainte dans la colonne à moitié écran du dashboard natif. Retour à l'état
   "deux par écran" en recliquant (la classe est juste retirée, aucun changement de structure DOM). */
.box.widget-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000;
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	max-height: 100vh !important;
	overflow: auto !important;
	background: #fff;
	margin: 0 !important;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
}

/* Graphiques legacy DolGraph/Flot (Répartition, Évolution, Indicateurs, Suivi commercial legacy) :
   leur conteneur ".dolgraph" reçoit une hauteur fixe en pixels côté PHP (DolGraph::setHeight()),
   valide donc jamais ignorée par le navigateur — sans cette règle, le graphique restait plafonné à
   sa hauteur d'origine en plein écran même après le "reflot" JS (index.js), qui ne fait que redessiner
   Flot à la taille CSS courante du conteneur, sans changer cette taille elle-même. */
.box.widget-fullscreen .dolgraph {
	width: 100% !important;
	height: calc(100vh - 120px) !important;
}

/* "Indicateurs commerciaux" (box_graph_indic_rentabilite.php) a 2 <div class="dolgraph"> côte à côte
   (Taux/ETP + rentabilité/CA-MS, cf. commentaire ci-dessus sur la scission d'échelle) : chacun ne
   doit prendre que la moitié de la hauteur disponible, sinon la règle générale ci-dessus (pensée pour
   1 seul graphique par box) leur ferait réclamer chacun 100vh-120px, soit le double de la hauteur
   réellement dispo. */
.box.widget-fullscreen:has(#placeholder_infographindicateursetp) .dolgraph {
	height: calc((100vh - 160px) / 2) !important;
}

/* Légende combinée cliquable du widget "Indicateurs commerciaux" (index.js, clic sur .ac-legend-item
   masque/affiche la série sur la bonne instance Chart.js) : la courbe masquée se voit barrée dans la
   légende, même convention que la légende "Suivi commercial" (#chart-indic-legend-1 li.disabled). */
.ac-legend-item[data-canvas] .ac-indic-name {
	transition: opacity 0.15s ease;
}
.ac-legend-item-disabled .ac-indic-name {
	text-decoration: line-through;
	opacity: 0.5;
}

/* Styles du sélecteur d'année et du calendrier de date, utilisés par les widgets "CA par agences".
   Scopé sous .chart-buttons-container pour ne pas affecter le reste de Dolibarr (ex: input[type="text"]). */

.chart-buttons-container .year-selector-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #444;
	margin: 10px 5px;
}

/* Style pour l'icône Font Awesome */
.chart-buttons-container .year-selector-container label i {
	font-size: 14px;
	color: #0a659e;
}

/* Style pour le select — aligné sur l'apparence des champs natifs Dolibarr (input .flat, select
   standard) plutôt qu'un habillage "widget maison" à part : bordure fine grise, coins peu arrondis,
   pas de fond ni de marge distinctive. Inspiré du panneau de filtre natif du widget "Indicateurs
   commerciaux" (Form::selectDate() + bouton "Rafraichir" du core, cf. box_graph_indic_rentabilite.php). */
.chart-buttons-container .styled-select {
	border: 1px solid #ced4da;
	border-radius: 3px;
	background-color: #fff;
	font-size: 13px;
	color: #333;
	padding: 3px 6px;
}

.chart-buttons-container .styled-select:hover {
	border-color: #999;
}

.chart-buttons-container .styled-select:focus {
	outline: none;
	border-color: #0a659e;
}

.chart-buttons-container .styled-select option {
	cursor: pointer;
}

.chart-buttons-container #yearSelectionContainer select {
	color: #333;
	font-weight: 400;
}

/* calandar */
.chart-buttons-container .date-picker {
	position: relative;
	display: inline-block;
}

.chart-buttons-container input[type="text"] {
	border: 1px solid #ced4da;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 13px;
	cursor: pointer;
	width: 105px;
	box-sizing: border-box;
	background-color: #fff;
	transition: border-color 0.15s ease;
}

.chart-buttons-container input[type="text"]:focus {
	border-color: #0a659e;
	outline: none;
}

.chart-buttons-container .calendar {
	display: none;
	position: absolute;
	top: 36px;
	left: 0;
	background: #fff;
	border: 1px solid #ced4da;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	padding: 10px;
	border-radius: 4px;
}

.chart-buttons-container .calendar.active {
	display: block;
}

/* En-tête du calendrier gris clair (comme .liste_titre du core) plutôt qu'un bandeau bleu plein :
   la couleur d'accent (#0a659e, reprise de l'icône du sélecteur d'année) ne sert plus qu'au survol/
   à la sélection, pour rester discret et cohérent avec le reste des filtres natifs. */
.chart-buttons-container .calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	background-color: #f5f6f8;
	color: #444;
	padding: 6px 8px;
	border-radius: 3px 3px 0 0;
	border-bottom: 1px solid #e5e5e5;
}

.chart-buttons-container .calendar-header button {
	background: transparent;
	color: #444;
	border: 1px solid #ced4da;
	padding: 2px 8px;
	font-size: 13px;
	border-radius: 3px;
	cursor: pointer;
}

.chart-buttons-container .calendar-header button:hover {
	background: #e7f1fa;
	border-color: #0a659e;
	color: #0a659e;
}

.chart-buttons-container .calendar-header span {
	font-weight: 600;
	font-size: 13px;
}

.chart-buttons-container .days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}

.chart-buttons-container .days span {
	padding: 4px;
	font-size: 13px;
	color: #333;
	background-color: #f9f9f9;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.chart-buttons-container .days span:hover {
	background-color: #e7f1fa;
	color: #0a659e;
}

.chart-buttons-container .days .selected {
	background-color: #0a659e;
	color: #fff;
}

.chart-buttons-container .days span.disabled {
	background-color: #f4f4f4;
	color: #bbb;
	cursor: not-allowed;
}

.chart-buttons-container .ui-datepicker-trigger {
	padding: 3px;
	width: 15px;
}

/* Barre de filtres (Suivi Commercial + CA par agences) : chaque champ garde l'habillage natif
   Dolibarr (Select2 standard, input date standard). Le panneau lui-même (fond clair, bordure fine,
   coins arrondis) imite .formboxfilter/.liste_titre_filter du core, pour se distinguer du contenu
   comme le ferait un formulaire de filtre natif, sans en copier le HTML. */
.ac-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px 0;
	background: #fcfcfc;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 10px 14px;
}

/* Panneau masqué par défaut (affiché/masqué au clic sur l'icône filtre native). Pas de display:none :
   Select2 s'initialise au chargement de la page et mesure la largeur réelle de son <select> à cet
   instant — display:none donne une largeur de 0, figée définitivement (bug connu de Select2 dans un
   conteneur cache). visibility:hidden + height:0 garde une largeur mesurable tout en restant invisible
   et sans hauteur. */
.ac-filters.ac-filters-collapsed {
	visibility: hidden;
	height: 0;
	min-height: 0;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	margin: 0;
}

.ac-filter-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 140px;
	min-width: 110px;
	max-width: 220px;
	gap: 2px;
}

/* Le chip Période contient 2 champs date + flèche : 220px de max-width (calibré pour un seul champ)
   les compressait, tronquant le texte de la date (ex: "18/09" au lieu de "18/09/2023"). */
.ac-filter-chip:has(.ac-period) {
	flex-basis: 260px;
	max-width: 320px;
}

/* Multiselects (Select2) : largeur imposée en px par Form::multiselectarray() (inline style JS) —
   on la remplace par 100% pour que le champ suive la largeur de son .ac-filter-chip, donc responsive
   (rétrécit sur un dashboard étroit, s'élargit en plein écran où .ac-filter-chip peut grandir jusqu'à
   max-width). */
.ac-control .select2-container,
.ac-control .select2-selection--multiple,
.ac-control .select2-selection--single {
	width: 100% !important;
}

/* .select2-selection__rendered (la liste des tags/placeholder à l'intérieur) est en display:inline-block
   par défaut (select2.css) : sans contenu (état vide après reset, juste le placeholder), un inline-block
   sans largeur explicite se réduit à son propre contenu au lieu de suivre les 100% du parent ci-dessus —
   c'est ce qui fait réapparaître un champ étroit après clic sur "réinitialiser". */
.ac-control .select2-selection__rendered {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* Form::multiselectarray() enveloppe le <select> dans <span class="multiselectarray{htmlname}">,
   sans classe commune exploitable en CSS (nom différent par champ) : ciblé par préfixe d'attribut.
   Confirmé par test en direct (devtools) : sans width:inherit ce span garde une largeur propre plus
   étroite que .select2-container, ce qui écrasait tous les correctifs ci-dessus. */
.ac-control [class^="multiselectarray"] {
	width: inherit;
}

/* En plein écran, beaucoup plus de place disponible : chips et calendrier plus larges pour rester
   ergonomiques (cibles cliquables plus grandes) plutôt que de garder la même taille compacte que sur
   la box normale. */
.box.widget-fullscreen .ac-filter-chip {
	flex: 1 1 200px;
	max-width: 320px;
}

.box.widget-fullscreen .chart-buttons-container input[type="text"] {
	width: 130px;
	font-size: 14px;
	padding: 5px 10px;
}

.box.widget-fullscreen .chart-buttons-container .calendar {
	padding: 14px;
}

.box.widget-fullscreen .chart-buttons-container .days span {
	padding: 8px;
	font-size: 14px;
}

/* Select2 ajoute son menu déroulant au <body> (hors de la box), pas à l'intérieur du filtre — en
   plein écran, .box.widget-fullscreen passe à z-index:10000 et recouvre donc ce menu (z-index par
   défaut de Select2 plus faible), le rendant invisible/inutilisable. */
.select2-container--open {
	z-index: 10001;
}

.ac-filter-chip > label {
	font-size: 11px;
	color: #666;
	opacity: 0.8;
}

.ac-control {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	width: 100%;
}

.ac-period {
	gap: 6px;
}

/* Comme le bouton "Rafraichir" natif Dolibarr (formboxfilter) qui se place seul, centré, sous les
   champs de filtre : ces icônes (réinitialiser + export CSV) remplacent ce bouton natif, donc
   reprennent la même logique de mise en page — plutôt qu'alignées à droite comme de simples actions
   secondaires. flex-basis:100% force le passage à la ligne sous les .ac-filter-chip. */
.ac-filter-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-basis: 100%;
	margin: 8px 0 0 0;
	padding-top: 8px;
	border-top: 1px solid #e8e8e8;
}

/* Boutons d'action des graphiques (bascule de vue, export CSV, plein écran, réduire/agrandir) :
   commun aux widgets "CA par agences" et "Suivi commercial", pour un rendu identique. Auparavant
   dupliqué dans le <style> inline de box_graph_ca_agence.php, et absent (styles ad-hoc en ligne)
   sur les boutons équivalents de box_graph_suivi_comm.php.
   :not(.ac-filters) : .chart-buttons-container est aussi posé, combiné à .ac-filters, sur la barre
   de filtres elle-même (cf. .ac-filters plus haut) — sans ce garde-fou, cette règle (plus bas dans
   le fichier donc prioritaire à spécificité égale) écrase l'alignement de .ac-filters et casse la
   mise en page de la barre de filtres (constaté sur le widget Suivi commercial). */
.chart-buttons-container:not(.ac-filters):not(.ac-view-toggle) {
	display: flex;
	flex-wrap: wrap;
	clear: both;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	margin-right: 20px;
	margin-top: 6px;
}

/* .ac-view-toggle (bascule camembert/barres/courbe, box_graph_ca_agence.php) : posée en float:right
   dans la ligne de titre native, à côté de déplacer/fermer/plein écran — clear:both de la règle
   ci-dessus la faisait passer à la ligne suivante (elle "clear" tous les floats précédents dans le
   même <td>), la reléguant sous le titre au lieu de rester alignée avec les autres icônes. */
.chart-buttons-container.ac-view-toggle {
	display: flex;
	gap: 6px;
	align-items: center;
}

.chart-button button {
	background-color: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #333;
	font-family: Arial, sans-serif;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.chart-button button:hover {
	background-color: #e2e2e2;
	border-color: #999;
	color: #0056b3;
}

.chart-button button.active {
	background-color: #0056b3;
	color: white;
	border-color: #004080;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	font-weight: bold;
}

/* Même retour visuel "actif" (fond #0056b3) que les boutons camembert/barres/courbe ci-dessus,
   mais pour des éléments hors .chart-button (icône filtre native Dolibarr) : classe générique,
   toggleée en JS quand le panneau/la légende associé(e) est affiché(e). */
.ac-icon-active {
	background-color: #0056b3 !important;
	color: #fff !important;
	border-radius: 4px;
	padding: 2px;
}

/* Icône filtre rouge : panneau masqué mais des filtres sont déjà appliqués (sélection ou dates
   différentes des valeurs par défaut) — signale qu'un filtre agit sans que le panneau soit visible. */
.ac-icon-alert {
	background-color: #d9534f !important;
	color: #fff !important;
	border-radius: 4px;
	padding: 2px;
}

.chart-button button i {
	font-size: 18px;
	transition: transform 0.2s ease;
}

.chart-button button:active i {
	transform: scale(0.9);
}

.chart-button button .label {
	font-size: 12px;
	color: inherit;
	text-transform: capitalize;
}

.small-icon {
	font-size: 14px !important;
}

/* Styles du widget "Suivi commercial" (légende + classes de courbes), déplacés depuis le <style>
   inline de tpl/d3js.tpl.php pour centraliser tout le CSS du module dans ce seul fichier. */
#chart-indic-legend-1 {
	font-family: sans-serif;
	margin-top: 10px;
	background: #fff;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

#chart-indic-legend-1 ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 4px 10px;
}

#chart-indic-legend-1 li {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #444;
	padding: 4px 8px;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.2s;
	min-width: 0;
}

#chart-indic-legend-1 li:hover {
	background: #f0f0f0;
}

#chart-indic-legend-1 li.disabled span {
	text-decoration: line-through;
	opacity: 0.5;
}

#chart-indic-legend-1 li div {
	width: 16px;
	height: 10px;
	margin-right: 5px;
	flex-shrink: 0;
}

/* Texte tronqué avec ellipse (au lieu de pousser l'icône hors de la grille) + icône CSV toujours
   alignée à droite, jamais collée au texte comme avant. */
#chart-indic-legend-1 li span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#chart-indic-legend-1 .csv-export-icon {
	flex-shrink: 0;
	margin-left: 8px;
	color: #94a3b0;
	padding: 2px 4px;
	border-radius: 5px;
}

#chart-indic-legend-1 .csv-export-icon:hover {
	background: #e7eef5;
	color: #0056b3;
}

/* ============================================================================
   Légende harmonisée — famille "CA par agence" (groupée par agence puis domaine).
   ============================================================================ */
.ac-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
	text-align: justify;
}

.ac-legend-group {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
	padding: 10px;
	flex: 1 1 200px;
	min-width: 200px;
	max-width: 280px;
}

.ac-legend-group-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #333;
	text-align: justify;
}

.ac-legend-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 4px 10px;
}

.ac-legend-item {
	display: flex;
	align-items: center;
	min-width: 0;
	font-size: 13px;
	color: #444;
	padding: 2px 0;
}

.ac-legend-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-right: 8px;
	flex-shrink: 0;
}

.ac-legend-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: justify;
}

/* Icône export CSV, partagée par les deux familles de légende (déjà la même classe utilisée en JS
   des deux côtés) : règle non scopée pour s'appliquer partout, pas seulement sous #chart-indic-legend-1. */
.csv-export-icon {
	flex-shrink: 0;
	margin-left: 6px;
	color: #94a3b0;
	padding: 2px 4px;
	border-radius: 5px;
	cursor: pointer;
}
.csv-export-icon:hover {
	background: #e7eef5;
	color: #0056b3;
}

/* Classes spécifiques avec suffixe -1 */
.chart-indic-line-1 {
	fill: none;
	stroke-width: 2;
}
.chart-indic-hover-1 {
	fill: none;
	stroke: transparent;
	stroke-width: 10;
}
.chart-indic-hidden-1 {
	display: none;
}