/* Tableau de bord du directeur : palette des trois séries validée (validate_palette.js, mode sombre) sur le fond
   des cartes (#183b35) : matière, salaires, reste. Le texte reste dans les encres du panneau, jamais aux couleurs
   des séries. */
.tableau-bord {
  --tb-s1: #3987e5;
  --tb-s2: #d95926;
  --tb-s3: #199e70;
  --tb-nd: #6f8a80;
  --tb-encre: #eef5ea;
  --tb-discret: #b7c9be;
  --tb-grille: #d8e8bf25;
}
.tb-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.tb-tuile {
  background: #183b35e8;
  border: 1px solid var(--tb-grille);
  border-radius: 12px;
  padding: 10px 12px;
}
.tb-tuile small {
  display: block;
  color: var(--tb-discret);
  font-size: 12px;
}
.tb-tuile strong {
  font-size: 20px;
  color: var(--tb-encre);
}
.tb-alertes {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.tb-alertes li {
  background: #183b35e8;
  border-left: 4px solid var(--tb-discret);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  color: var(--tb-encre);
}
.tb-alertes .tb-critique {
  border-color: #e66767;
}
.tb-alertes .tb-attention {
  border-color: #c98500;
}
.tb-alertes strong {
  margin: 0 6px 0 4px;
}
.tb-graphe {
  margin: 12px 0;
  background: #183b35e8;
  border: 1px solid var(--tb-grille);
  border-radius: 15px;
  padding: 12px;
}
.tb-graphe figcaption {
  color: var(--tb-encre);
  font-weight: 600;
  font-size: 14px;
}
.tb-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  list-style: none;
  padding: 0;
  margin: 6px 0;
  color: var(--tb-discret);
  font-size: 12px;
}
.tb-legende i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.tb-graphe svg {
  width: 100%;
  height: auto;
  display: block;
}
.tb-graphe text {
  fill: var(--tb-discret);
  font-size: 9px;
}
.tb-axe line {
  stroke: var(--tb-grille);
  stroke-width: 1;
}
.tableau-bord .tb-s1 {
  fill: var(--tb-s1);
  background: var(--tb-s1);
}
.tableau-bord .tb-s2 {
  fill: var(--tb-s2);
  background: var(--tb-s2);
}
.tableau-bord .tb-s3 {
  fill: var(--tb-s3);
  background: var(--tb-s3);
}
.tb-nd {
  fill: var(--tb-nd);
  background: var(--tb-nd);
}
.tb-cible {
  fill: transparent;
}
.tb-barre:hover .tb-cible,
.tb-barre:focus .tb-cible {
  fill: #ffffff10;
}
.tb-barre:focus {
  outline: none;
}
.tb-table {
  margin: 8px 0;
  color: var(--tb-encre);
}
.tb-table summary {
  cursor: pointer;
  color: var(--tb-discret);
}
.tb-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
  display: block;
  overflow-x: auto;
}
.tb-table th,
.tb-table td {
  padding: 4px 6px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--tb-grille);
}
.tb-stock {
  list-style: none;
  padding: 0;
}
.tb-stock li {
  display: grid;
  grid-template-columns: 1fr 90px 32px 52px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--tb-encre);
}
.tb-stock meter {
  width: 90px;
}
.tb-stock em {
  color: #f0c56a;
  font-style: normal;
  font-size: 12px;
}
.tb-note,
.tb-liens {
  color: var(--tb-discret);
  font-size: 12px;
}
.tb-liens a {
  color: #9fe3c1;
}