:root {
  /* #DAB30A = couleur exacte extraite du classeur original (remplissage des
     cellules d'en-tête Facture/Devis/BL), à conserver identique entre
     l'application et les PDF — l'or reste réservé aux boutons/accents, il ne
     remplit plus les fonds (barre de nav, en-têtes de tableau). */
  --mi-gold: #dab30a;
  --mi-gold-dark: #a8841c;
  /* Conservé pour le dégradé de l'écran de connexion (identité PDF) — le
     texte courant de l'appli utilise --mi-ink, plus doux que ce noir pur. */
  --mi-black: #1c1a14;
  --mi-cream: #fdfaf2;

  --mi-ink: #241f17;
  /* Testé à 5.10:1 sur --mi-cream et 5.32:1 sur blanc (WCAG AA texte normal). */
  --mi-ink-soft: #756a54;
  --mi-line: #e7dfc9;

  /* Pastille neutre or (ex. statut générique) — 7.13:1, texte sur fond. */
  --mi-pill-gold-bg: #efe6c8;
  --mi-pill-gold-text: #5c4709;
  /* Pastille "actif/positif" — 6.61:1. */
  --mi-pill-active-bg: #e2ecdd;
  --mi-pill-active-text: #1f5c22;
  /* Pastille "inactif/neutre" — 4.87:1. */
  --mi-pill-inactive-bg: #ece7da;
  --mi-pill-inactive-text: #6b6252;

  --mi-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;

  /* Tokens de la refonte tableau de bord (2026-07-28, maquette validée par
     Mathieu) : détache les cartes du fond crème, sans introduire de nouvelle
     couleur — même identité or/noir/crème. */
  --mi-surface-2: #faf5e6;
  --mi-line-soft: #f0e9d4;
  --mi-ink-faint: #9c9276;
  --mi-shadow-sm: 0 1px 2px rgba(36, 31, 23, 0.08);
}

body {
  background-color: var(--mi-cream);
  color: var(--mi-ink);
}

h1, h2, h3, h4, h5, h6, .mi-brand {
  font-family: var(--mi-font-serif);
}

.navbar-mi {
  background-color: var(--mi-cream);
  border-bottom: 1px solid var(--mi-line);
}

.navbar-mi .navbar-brand,
.navbar-mi .nav-link {
  color: var(--mi-ink-soft) !important;
}

.navbar-mi .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--mi-ink) !important;
}

.mi-nav-logo {
  height: 36px;
  width: auto;
  display: block;
}

.navbar-mi .nav-link.active {
  color: var(--mi-ink) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--mi-gold);
}

.navbar-mi .dropdown-item.active,
.navbar-mi .dropdown-item:active {
  background-color: var(--mi-pill-gold-bg);
  color: var(--mi-ink);
}

.btn-mi-gold {
  background-color: var(--mi-gold);
  border-color: var(--mi-gold-dark);
  color: var(--mi-black);
  font-weight: 600;
}

.btn-mi-gold:hover {
  background-color: var(--mi-gold-dark);
  color: var(--mi-black);
}

.mi-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mi-ink-soft);
  border-bottom: 2px solid var(--mi-gold);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.mi-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--mi-black) 0%, #33301f 100%);
}

.mi-auth-card {
  background: var(--mi-cream);
  border-top: 4px solid var(--mi-gold);
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.mi-auth-logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 1rem;
}

.mi-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mi-ink);
}

table.mi-table thead th {
  background-color: transparent;
  color: var(--mi-ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--mi-line-soft);
}

table.mi-table tbody tr {
  border-bottom: 1px solid var(--mi-line-soft);
}

table.mi-table tbody tr:last-child {
  border-bottom: none;
}

table.mi-table tbody tr:hover {
  background-color: #f6f1e3;
}

table.mi-table td.text-end,
table.mi-table th.text-end {
  font-variant-numeric: tabular-nums;
}

.badge-mi-active {
  background-color: var(--mi-pill-active-bg);
  color: var(--mi-pill-active-text);
}

.badge-mi-gold {
  background-color: var(--mi-pill-gold-bg);
  color: var(--mi-pill-gold-text);
}

.badge-mi-inactive {
  background-color: var(--mi-pill-inactive-bg);
  color: var(--mi-pill-inactive-text);
}

.badge-mi-active,
.badge-mi-inactive,
.badge-mi-gold {
  font-weight: 600;
  border-radius: 999px;
  padding: 0.3em 0.7em;
}

/* Retour visuel pendant une requête HTMX (ajout/suppression de ligne, prix,
   matrice de tarifs...) : sans ça un clic ne donne aucun signe de vie tant
   que la réponse n'est pas revenue (violation du principe de visibilité de
   l'état du système). HTMX ajoute automatiquement cette classe à l'élément
   déclencheur pendant la requête. */
.htmx-request {
  opacity: 0.6;
  transition: opacity 0.15s ease-in-out;
  cursor: progress;
}
.htmx-request * {
  pointer-events: none;
}

/* Refonte look & feel (2026-07-28, maquette validée par Mathieu) : cartes
   détachées du fond crème, tableaux aérés, liens dans l'identité au lieu du
   bleu Bootstrap par défaut. D'abord livré scopé au tableau de bord, puis
   généralisé au reste du site (listes Commandes/Devis/Documents/Dépenses/
   Paiements/Stock/Clients/Catalogue/Tarifs, qui partagent déjà `.mi-table`) —
   même traitement partout plutôt que dupliqué page par page. */
.card {
  border-color: var(--mi-line);
  border-radius: 14px;
  box-shadow: var(--mi-shadow-sm);
}

.card-header {
  background-color: transparent;
  font-weight: 600;
  border-bottom-color: var(--mi-line-soft);
}

a {
  color: var(--mi-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--mi-ink-faint);
}

a:hover {
  color: var(--mi-gold-dark);
  border-bottom-color: var(--mi-gold-dark);
}

/* Les liens stylés en pastille (documents liés à une commande/un devis)
   gardent leur forme de badge, pas le soulignement pointillé du lien texte. */
a.badge {
  border-bottom: none;
}

/* Cartouches du tableau de bord uniquement : libellé en petites capitales et
   chiffre clé en serif tabulaire. Rendu propre à ce composant (une carte
   `.card` + une étiquette `.text-muted.small` + une valeur `.fs-3`/`.fs-4`
   au-dessus), pas de sens sur les usages ponctuels de `.text-muted.small`
   ailleurs dans l'appli (aide contextuelle, légendes). */
/* Cartouches cliquables (renvoi vers la liste filtrée correspondante) : pas
   de soulignement pointillé sur toute la carte, juste un léger relief au
   survol pour indiquer l'affordance. */
.mi-dashboard a.card {
  border-bottom: none;
}

.mi-dashboard a.card:hover {
  box-shadow: 0 0.35rem 0.9rem rgba(36, 31, 23, 0.16);
  border-color: var(--mi-gold-dark);
}

.mi-dashboard .card-body .text-muted.small {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mi-ink-faint);
}

.mi-dashboard .fs-3.fw-bold,
.mi-dashboard .fs-4.fw-bold {
  font-family: var(--mi-font-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Graphique évolution mensuelle (recettes/dépenses/balance) : palette
   catégorielle validée (CVD + contraste, voir outil de validation dataviz) —
   pas de couleur choisie à l'oeil. Le reste des tokens (grille, texte)
   réutilise l'encre déjà auditée de l'appli plutôt que d'introduire de
   nouveaux gris. */
:root {
  --mi-chart-recettes: #1f7a3d;
  --mi-chart-depenses: #e34948;
  --mi-chart-balance: #eda100;
}

.mi-chart-wrap {
  position: relative;
  overflow-x: auto;
}

.mi-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  font-size: 11px;
}

.mi-chart-svg text {
  fill: var(--mi-ink-soft);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mi-chart-svg .mi-chart-value-label {
  fill: var(--mi-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mi-chart-grid {
  stroke: var(--mi-line);
  stroke-width: 1;
}

.mi-chart-fill-recettes { fill: var(--mi-chart-recettes); }
.mi-chart-fill-depenses { fill: var(--mi-chart-depenses); }
.mi-chart-fill-balance { fill: var(--mi-chart-balance); }

.mi-chart-mark {
  transition: opacity 0.1s ease;
}

.mi-chart-hit {
  fill: transparent;
  cursor: pointer;
}

.mi-chart-hit:hover ~ .mi-chart-mark,
.mi-chart-hit:focus ~ .mi-chart-mark {
  filter: brightness(1.12);
}

.mi-chart-hit:focus-visible {
  outline: 2px solid var(--mi-gold-dark);
  outline-offset: -2px;
}

.mi-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}

.mi-chart-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--mi-ink-soft);
}

.mi-chart-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
  transform: translateY(1px);
}

.mi-chart-tooltip {
  position: absolute;
  z-index: 20;
  min-width: 9rem;
  padding: 0.5rem 0.65rem;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 8px;
  box-shadow: 0 0.5rem 1.25rem rgba(36, 31, 23, 0.18);
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -10px;
}

.mi-chart-tooltip[hidden] {
  display: none;
}

.mi-chart-tooltip-title {
  font-weight: 600;
  color: var(--mi-ink);
  margin-bottom: 0.2rem;
  border-bottom: none;
}

.mi-chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--mi-ink-soft);
}

.mi-chart-tooltip-key {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mi-chart-tooltip-key::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--dot-color, currentColor);
}

.mi-chart-tooltip-row strong {
  color: var(--mi-ink);
  font-variant-numeric: tabular-nums;
}