/* assets/styles/frappe-charts.css */

/* ─── Variables (inchangées, nécessaires pour Frappe Charts) ─── */
:root {
  --charts-label-color: #313B44;
  --charts-axis-line-color: #F4F5F6;
  --charts-tooltip-title: var(--charts-label-color);
  --charts-tooltip-label: var(--charts-label-color);
  --charts-tooltip-value: #192734;
  --charts-tooltip-bg: #FFFFFF;
  --charts-stroke-width: 2px;
  --charts-dataset-circle-stroke: #FFFFFF;
  --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
  --charts-legend-label: var(--charts-label-color);
  --charts-legend-value: var(--charts-label-color);
}

/* ─── Partie SVG : doit rester en CSS natif ─── */
.chart-container {
  position: relative;
  font-family: ui-sans-serif, system-ui, sans-serif; /* équivalent Tailwind font-sans */
}

.chart-container .axis,
.chart-container .chart-label {
  fill: var(--charts-label-color);
}

.chart-container .axis line,
.chart-container .chart-label line {
  stroke: var(--charts-axis-line-color);
}

.chart-container .dataset-units circle {
  stroke: var(--charts-dataset-circle-stroke);
  stroke-width: var(--charts-dataset-circle-stroke-width);
}

.chart-container .dataset-units path,
.chart-container .path-group path {
  fill: none;
  stroke-opacity: 1;
  stroke-width: var(--charts-stroke-width);
}

.chart-container .dataset-path {
  stroke-width: var(--charts-stroke-width);
}

.chart-container .chart .dataset-units rect.bar {
  rx: 6px;
}

.chart-container line.dashed {
  stroke-dasharray: 5, 3;
}

.chart-container .axis-line .specific-value {
  text-anchor: start;
}

.chart-container .axis-line .y-line {
  text-anchor: end;
}

.chart-container .axis-line .x-line {
  text-anchor: middle;
}

.chart-container .legend-dataset-label {
  font-weight: 600;
  fill: var(--charts-legend-label);
}

.chart-container .legend-dataset-value {
  fill: var(--charts-legend-value);
}

/* ─── Tooltip : CSS natif avec variables, utilitaires Tailwind inapplicables ici ─── */
/*
  Le tooltip est injecté dynamiquement dans le DOM par Frappe Charts,
  donc on ne peut pas mettre des classes Tailwind directement dessus.
  On le style via CSS natif ciblant .graph-svg-tip.
*/
.graph-svg-tip {
  position: absolute;
  z-index: 99999;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  border-radius: 6px;
  background: var(--charts-tooltip-bg);
  box-shadow: 0 1px 4px rgba(17, 43, 66, 0.1), 0 2px 6px rgba(17, 43, 66, 0.08), 0 40px 30px -30px rgba(17, 43, 66, 0.1);
}

.graph-svg-tip ul,
.graph-svg-tip ol {
  display: flex;
  padding-left: 0;
}

.graph-svg-tip ul.data-point-list li {
  display: flex;
  align-items: baseline;
  min-width: 90px;
  font-weight: 600;
  gap: 4px;
}

.graph-svg-tip .svg-pointer {
  width: 12px;
  height: 12px;
  position: absolute;
  margin-top: -7px;
  margin-left: -6px;
  transform: rotate(45deg);
  border-radius: 2px;
  background: var(--charts-tooltip-bg);
}

/* ─── Tooltip mode comparison ─── */
.graph-svg-tip.comparison {
  padding: 0;
  text-align: left;
  pointer-events: none;
}

.graph-svg-tip.comparison .title {
  display: block;
  margin: 0;
  padding: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  color: var(--charts-tooltip-title);
}

.graph-svg-tip.comparison .title strong {
  color: var(--charts-tooltip-value);
}

.graph-svg-tip.comparison ul {
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.graph-svg-tip.comparison ul.tooltip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.graph-svg-tip.comparison li {
  display: flex;
  flex-direction: row;
  padding: 12px;
  font-weight: 600;
  line-height: 1;
}

.graph-svg-tip.comparison li .tooltip-legend {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
}

.graph-svg-tip.comparison li .tooltip-label {
  max-width: 100px;
  overflow: hidden;
  margin-top: 4px;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--charts-tooltip-label);
}

.graph-svg-tip.comparison li .tooltip-value {
  color: var(--charts-tooltip-value);
}