/* ============================================================
   jlm-custom.css — styles additionnels (chargé après style.css)
   Regroupe les styles des évolutions récentes + correctifs mobile.
   ============================================================ */

/* --- Micro-légendes (lot 3) --- */
.field-hint { font-size: 12px; color: #93A199; margin: 6px 0 0; line-height: 1.4; }

/* --- Indicateur "Enregistré" plus lisible (lot 5) --- */
.save-indicator { color: #147A3D !important; font-weight: 600; }
.save-indicator .dot-saved { background: #16A34A !important; }

/* --- Menu flexible : bouton d'ajout + dropdown de type --- */
.menu-add-wrap { position: relative; margin-top: 14px; }
.menu-add-course-btn { width: 100%; padding: 13px; border: 1.5px dashed #22B455; border-radius: 14px; background: #F6F8F7; color: #16A34A; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; }
.menu-add-course-btn:hover { background: #16A34A; color: #fff; border-style: solid; }
.menu-add-type-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #FFFFFF; border: 1px solid #E8ECEA; border-radius: 14px; box-shadow: 0 12px 30px rgba(26,15,8,.12); padding: 6px; z-index: 20; display: flex; flex-direction: column; gap: 2px; }
.menu-add-type-menu.hidden { display: none; }
.menu-add-type { text-align: left; padding: 13px 14px; border: 0; border-radius: 10px; background: transparent; font-size: 15px; font-family: inherit; color: #16241D; cursor: pointer; }
.menu-add-type:hover { background: #EAF7EF; }
.menu-course-slot { position: relative; }
.course-remove-empty { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); background: #F1F5F2; color: #93A199; border: 0; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 1rem; line-height: 1; }
.course-remove-empty:hover { background: #E5484D; color: #fff; }

/* ============================================================
   LOT A — correctifs mobile (audit mobile-first)
   ============================================================ */

/* A2 : anti-zoom iOS — tous les champs à 16px sous 768px */
@media (max-width: 768px) {
  input, select, textarea,
  .ingredient-name, .mini-input, .mini-select, .history-search,
  .recipe-name-input, .portions-input {
    font-size: 16px !important;
  }
}

/* A3 : bouton "Fermer" des bottom-sheets — vraie cible 44px+ */
.modal-close {
  min-height: 44px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
}

/* A3 : cibles tactiles — zone de frappe étendue sans grossir le visuel */
.btn-delete { position: relative; }
.btn-delete::after { content: ""; position: absolute; inset: -8px; }
.tab { position: relative; }
.tab::after { content: ""; position: absolute; inset: -6px -2px; }
.tva-mini-btn { position: relative; }
.tva-mini-btn::after { content: ""; position: absolute; inset: -8px; }
.lib-delete-btn, .lib-history-btn, .course-remove-btn { position: relative; }
.lib-delete-btn::after, .lib-history-btn::after, .course-remove-btn::after {
  content: ""; position: absolute; inset: -8px;
}

/* ============================================================
   LOT D — Accessibilité & finitions (audit mobile-first)
   ============================================================ */

/* D2 : contraste du badge "Mes recettes" (était 3,08:1, échec AA)
   Orange plus foncé -> ratio conforme pour du petit texte */
.history-badge {
  background: #15803D !important;
  color: #fff !important;
  font-weight: 700;
}

/* D3 : tailles de police minimales (lisibilité en mobilité) */
.mini-label { font-size: 11px !important; }
.tab { font-size: 12px !important; }
@media (max-width: 340px) {
  .tab { font-size: 11px !important; }
}

/* D4 : effets :hover réservés aux appareils qui ont un vrai survol.
   Sur tactile, le style restait "collé" après le tap. */
@media (hover: none) {
  .comp-row:hover,
  .picker-item:hover,
  .profile-tile:hover,
  .dash-recipe-row:hover,
  .wordmark-link:hover,
  .menu-add-type:hover,
  .menu-add-course-btn:hover {
    background: inherit;
    color: inherit;
    border-color: inherit;
    transform: none;
  }
  /* Le bouton d'ajout garde son style de base au tap */
  .menu-add-course-btn:hover {
    background: #F6F8F7;
    color: #16A34A;
    border-style: dashed;
  }
}

/* ============================================================
   AUTOCOMPLÉTION — groupes "Mes produits" / "Produits courants"
   ============================================================ */
.ing-sugg-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #B5A399;
  padding: 8px 12px 4px;
  background: #FFFFFF;
  position: sticky;
  top: 0;
}
.ing-suggestion-catalog .ing-sugg-cat {
  font-size: 11px;
  color: #16A34A;
  background: #EAF7EF;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.ingredient-suggestions {
  max-height: 280px;
  overflow-y: auto;
}

/* ============================================================
   CARTE INGRÉDIENT — refonte UX (compact + détails)
   Objectif : saisie rapide, champs grands, moins de bruit visuel.
   ============================================================ */

/* Ligne principale : Prix + Quantité, côte à côte, en GRAND.
   auto-fit + minmax : passe tout seul à 1 colonne quand la place manque
   (corrige le débordement horizontal sous ~1000px). */
.ingredient-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 10px 0;
}
.ing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;   /* autorise le champ à rétrécir sans déborder */
}
.ing-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #5C6B63;
}
.ing-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #E8ECEA;
  border-radius: 14px;
  background: #FFFFFF;
  padding: 4px 10px;
  min-height: 52px;
  min-width: 0;      /* évite le débordement du contenu interne */
  max-width: 100%;
}
.ing-inline:focus-within { border-color: #16A34A; background: #fff; }
.ing-big-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 600;
  font-family: inherit;
  color: #16241D;
  outline: none;
  padding: 8px 0;
}
.ing-unit-sep { font-size: 15px; color: #93A199; white-space: nowrap; }
.ing-unit-select {
  border: 0;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  max-width: 45%;
  flex-shrink: 0;
  color: #16241D;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  padding: 6px 2px;
}

/* Barre "Détails" repliable */
.ing-detail-bar { margin: 4px 0; }
.ing-detail-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #F6F8F7;
  border: 1px solid #E8ECEA;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
  min-height: 48px;
}
.ing-detail-toggle:active { background: #F5EDE2; }
.ing-detail-summary {
  font-size: 14px;
  color: #5C6B63;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ing-detail-summary.is-empty { color: #B5A399; font-weight: 400; }
.ing-detail-chevron {
  font-size: 13px;
  color: #16A34A;
  font-weight: 600;
  white-space: nowrap;
}
.ingredient-details {
  padding: 6px 2px 2px;
  animation: ingDetailsIn 0.16s ease;
}
@keyframes ingDetailsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   Reco de marge — message de VALIDATION vert (marge au-dessus du seuil)
   ============================================================ */
#marginWarning.good {
  background: #EAF7EE !important;
  border: 1px solid #B6E2C6 !important;
  color: #147A3D !important;
}

/* ============================================================
   TVA d'achat 0% — bouton gris (produits sans TVA / exonérés)
   ============================================================ */
.tva-mini-btn[data-color="grey"].active {
  background: #5C6B63 !important;
  border-color: #5C6B63 !important;
  color: #fff !important;
}
.tva-mini-btn[data-color="grey"] {
  color: #5C6B63;
}

/* ============================================================
   Point C — Lisibilité des libellés TVA du menu
   La vraie correction est l'ajout des data-color dans le HTML
   (les boutons du menu se comportent maintenant comme les autres
   calculateurs). On garde juste un filet : libellé toujours lisible.
   ============================================================ */
.menu-tva-btn .tva-label {
  color: inherit;
}




/* ============================================================
   VAGUE 1 — Bug bloquant : la barre de total (z-index 9000)
   passait DEVANT les modales (z-index 100), masquant les boutons
   Dupliquer/Supprimer et Se déconnecter.
   On remonte les modales au-dessus de la barre.
   ============================================================ */
.modal-overlay {
  z-index: 100000 !important;
}
/* Les écrans plein écran (admin, dashboard, produits) restent au-dessus */
.jlm-prod-screen, .jlm-dash-screen, .jlm-admin-screen {
  z-index: 100001 !important;
}
/* Le bandeau d'impersonation admin toujours tout en haut */
.jlm-impersonate-banner {
  z-index: 100002 !important;
}

/* ============================================================
   VAGUE 1 — Bug bloquant : débordement horizontal.
   Filet anti-débordement global sur les cartes ingrédient.
   ============================================================ */
.ingredient-card {
  overflow-x: hidden;
  max-width: 100%;
}
.ing-inline > * { min-width: 0; }


/* ============================================================
   VAGUE 1 — Couper tout scroll horizontal parasite au niveau page
   (blob décoratif .blob-2 qui débordait + sécurité générale).
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.blob { max-width: 100vw; }

/* Les modales doivent pouvoir défiler entièrement (pas de troncature bas) */
.modal-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* le scroll ne traverse plus l'overlay */
}


/* ============================================================
   AUDIT VAGUE 2 — Accessibilité clavier : anneau de focus global
   Avant : outline:none partout, aucune règle :focus-visible ->
   navigation clavier impossible (échec WCAG 2.4.7).
   :focus-visible = l'anneau n'apparaît qu'au CLAVIER, pas au clic.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.tab:focus-visible,
.tva-btn:focus-visible,
.tva-mini-btn:focus-visible,
.ing-big-input:focus-visible,
.mini-input:focus-visible,
.recipe-name-input:focus-visible,
.dialog-input:focus-visible,
.ing-unit-select:focus-visible,
.ing-detail-toggle:focus-visible,
.btn-add-ingredient:focus-visible,
.btn-new-recipe:focus-visible,
.btn-history:focus-visible {
  outline: 3px solid #15803D !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* Pour les champs déjà encadrés, un halo plutôt qu'un outline carré */
.ing-inline:focus-within {
  outline: 3px solid #15803D;
  outline-offset: 1px;
}


/* ============================================================
   AUDIT VAGUE 2 — Contraste AA du coral secondaire
   Le coral #16A34A (2,9:1) passe à #166534 (4,77:1 sur crème,
   5,18:1 sur blanc) pour tous les TEXTES et ACTIONS secondaires.
   Le coral vif reste pour les gros boutons pleins (texte blanc dessus).
   ============================================================ */
.btn-add-ingredient,
.btn-add-step,
.rstep-add,
.ing-detail-chevron,
.pdf-share-btn,
.share-btn,
.recipe-share-btn {
  color: #166534 !important;
}
/* Coût TTC : accentué mais lisible */
.cost-value.accent {
  color: #166534 !important;
}
/* Placeholder du résumé "Détails" : plus lisible */
.ing-detail-summary.is-empty {
  color: #8A7466 !important;   /* gris chaud ~4,5:1 */
}
/* Indicateur "Enregistré" (vert) : teinte plus foncée et lisible */
.save-indicator, .saved-indicator {
  color: #147A3D !important;
}
/* Croix de suppression : contraste renforcé */
.rstep-delete, .btn-delete, .ing-remove, .step-delete {
  color: #B23111 !important;
}


/* ============================================================
   AUDIT VAGUE 3 — Cibles tactiles 44x44px (WCAG 2.5.5)
   Technique : on étend la ZONE CLIQUABLE via ::after transparent,
   sans changer la taille visuelle du bouton (design compact préservé).
   ============================================================ */
.rstep-arrow,
.rstep-delete,
.btn-delete,
.ing-remove,
.step-delete,
.chip-avatar,
.tva-mini-btn,
.ing-detail-toggle,
.modal-close {
  position: relative;
}
.rstep-arrow::after,
.rstep-delete::after,
.btn-delete::after,
.ing-remove::after,
.step-delete::after,
.chip-avatar::after,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  /* zone tactile invisible mais cliquable */
}
/* Les petits champs durée/température : hauteur tactile minimale */
.rstep-param input,
.rstep-duration,
.rstep-temp {
  min-height: 40px;
}
/* Boutons flèches d'étape : un peu plus grands visuellement aussi */
.rstep-arrow {
  min-width: 32px;
  min-height: 32px;
}


/* ============================================================
   AUDIT VAGUE 4 — Unification des couleurs TVA
   Avant : 5,5 vert / 10 jaune / 20 violet (arbitraire, jure avec la
   charte). Maintenant : tous neutres, seul le SÉLECTIONNÉ est orange.
   Vaut pour tous les calculateurs (achat, vente, menu, rapide…).
   ============================================================ */

/* État NON sélectionné : neutre, lisible, quelle que soit la data-color */
.tva-btn,
.tva-mini-btn,
.menu-tva-btn,
.recipe-tva-btn {
  background: #F6F8F7 !important;
  border: 1.5px solid #E8ECEA !important;
  color: #16241D !important;
}
.tva-btn .tva-label,
.tva-mini-btn .tva-label,
.menu-tva-btn .tva-label {
  color: #16241D !important;
}

/* État SÉLECTIONNÉ : orange charte, texte blanc — pour TOUS les taux */
.tva-btn.active,
.tva-mini-btn.active,
.menu-tva-btn.active,
.recipe-tva-btn.active,
.tva-btn[data-color].active,
.tva-mini-btn[data-color].active,
.menu-tva-btn[data-color].active {
  background: #16A34A !important;
  border-color: #16A34A !important;
  color: #ffffff !important;
}
.tva-btn.active .tva-label,
.tva-mini-btn.active .tva-label,
.menu-tva-btn.active .tva-label {
  color: #ffffff !important;
}

/* ============================================================
   AUDIT VAGUE 4 — Débordement des boutons TVA d'achat
   Depuis l'ajout du 0%, il y a 4 boutons (0/5,5/10/20). La grille
   passe en flex qui enveloppe proprement au lieu de déborder.
   ============================================================ */
.tva-mini-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.tva-mini-grid .tva-mini-btn {
  flex: 1 1 auto;
  min-width: 52px;
  text-align: center;
}


/* ============================================================
   AUDIT VAGUE 4 — Élargissement léger sur grand écran
   L'app reste mobile-first (colonne centrée), mais on élargit un peu
   la colonne au-delà de 680px pour réduire l'impression de vide,
   sans partir sur une refonte desktop deux colonnes.
   ============================================================ */
@media (min-width: 680px) and (max-width: 899px) {
  .container {
    max-width: 720px !important;
  }
}

/* ============================================================
   VAGUE 3 — Liste des recettes : catégorie colorée
   ============================================================ */
.history-item { position: relative; overflow: hidden; }
.history-cat-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color, #93A199);
}
.history-item-content { padding-left: 6px; }
.history-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--cat-color, #5C6B63);
}
.history-cat-badge .cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat-color, #93A199); display: inline-block;
}

/* ============================================================
   VAGUE 3 — Comparateur : catégorie + badge marge 3 niveaux
   ============================================================ */
.comp-row { position: relative; overflow: hidden; }
.comp-cat-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color, #93A199);
}
.comp-main { padding-left: 6px; }
.comp-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--cat-color, #5C6B63);
}
.comp-cat-badge .cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat-color, #93A199); display: inline-block;
}
.comp-marge-badge {
  display: inline-block; font-weight: 800; font-size: 14px;
  padding: 4px 11px; border-radius: 20px; margin-top: 2px;
}

/* ============================================================
   VAGUE 3 — Picker "choisir une recette" : catégorie colorée
   ============================================================ */
.picker-item { position: relative; overflow: hidden; display: flex; align-items: center; }
.picker-cat-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color, #93A199);
}
.picker-item-body { padding-left: 6px; flex: 1; min-width: 0; }
.picker-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--cat-color, #5C6B63);
}
.picker-cat-badge .cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat-color, #93A199); display: inline-block;
}

/* ============================================================
   CHANTIER STRUCTURE — Étape 1 : sidebar responsive
   Desktop (>=900px) : sidebar visible, onglets masqués, contenu décalé.
   Mobile (<900px)   : sidebar masquée, onglets classiques conservés.
   ============================================================ */
/* MOBILE : sidebar totalement masquée (règle renforcée) */
.app-sidebar,
aside.app-sidebar { display: none !important; }
@media (min-width: 900px) {
  .app-sidebar,
  aside.app-sidebar { display: flex !important; }
}

@media (min-width: 900px) {
  .app-sidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; width: 248px;
    background: #12271C; color: #fff; padding: 22px 16px;
    z-index: 500;
  }
  .sb-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 22px; }
  .sb-logo { width: 34px; height: 34px; color: #22B455; flex-shrink: 0; }
  .sb-brand-text { font-size: 16px; font-weight: 800; line-height: 1.05; }
  .sb-brand-text span { font-weight: 500; color: #7FBF9B; }
  .sb-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
  .sb-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border: 0; border-radius: 11px;
    background: none; color: rgba(255,255,255,.72);
    font-family: inherit; font-size: 14.5px; font-weight: 500;
    cursor: pointer; text-align: left; width: 100%; transition: all .12s;
  }
  .sb-item:hover { background: rgba(255,255,255,.07); color: #fff; }
  .sb-item.active { background: #16A34A; color: #fff; font-weight: 600; }
  .sb-ico { width: 20px; text-align: center; font-size: 15px; }
  .sb-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .sb-user { width: 100%; background: rgba(255,255,255,.06); border: 0; border-radius: 11px; padding: 11px; color: #fff; font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }

  /* Décaler le contenu à droite de la sidebar + le centrer dans une largeur lisible */
  .container { margin-left: 248px; margin-right: auto; max-width: 760px !important; padding-left: 40px; padding-right: 40px; }
  /* Le contenu commence après la sidebar : centrer dans l'espace restant */
  body { padding-left: 0; }
  /* Masquer les onglets horizontaux sur desktop (la sidebar les remplace) */
  .tabs { display: none; }
  /* Le nom est déjà dans la sidebar : masquer le wordmark du header (garder le compte à droite) */
  .wordmark-link { display: none; }
  .header { justify-content: flex-end; }
}

/* Grand écran : on garde une largeur lisible, centrée dans l'espace à droite de la sidebar */
@media (min-width: 1400px) {
  .container { max-width: 820px !important; margin-left: 248px; margin-right: auto; }
}

/* ============================================================
   NOUVELLE STRUCTURE — Étape 2 : vue Tableau de bord
   ============================================================ */
.dashv-head { margin-bottom: 20px; }
.dashv-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ink, #16241D); }
.dashv-sub { font-size: 14px; color: #5C6B63; margin: 4px 0 0; }

.dashv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.dashv-kpi { background: #FFFFFF; border: 1px solid #E8ECEA; border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(20,40,30,.04); }
.dashv-kpi.primary { background: linear-gradient(150deg, #16A34A, #12833C); border-color: #12833C; }
.dashv-kpi.primary .dashv-kpi-label { color: rgba(255,255,255,.85); }
.dashv-kpi.primary .dashv-kpi-value { color: #fff; }
.dashv-kpi-label { font-size: 13px; font-weight: 500; color: #5C6B63; }
.dashv-kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink, #16241D); }

.dashv-alert { background: #FDECEC; border: 1px solid #F5C2C2; color: #C0392B; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }

.dashv-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dashv-panel { background: #FFFFFF; border: 1px solid #E8ECEA; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(20,40,30,.04); }
.dashv-panel-title { font-size: 14.5px; font-weight: 700; margin: 0 0 14px; color: var(--ink, #16241D); }

.dashv-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dashv-donut { width: 150px; height: 150px; }
.dashv-donut-num { font-size: 28px; font-weight: 800; fill: var(--ink, #16241D); }
.dashv-donut-lbl { font-size: 11px; fill: #93A199; }
.dashv-legend { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.dashv-leg-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5C6B63; }
.dashv-leg-item b { margin-left: auto; color: var(--ink, #16241D); }
.dashv-leg-dot { width: 10px; height: 10px; border-radius: 3px; }

.dashv-recipe-list { display: flex; flex-direction: column; }
.dashv-recipe-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F1F5F2; cursor: pointer; }
.dashv-recipe-row:last-child { border-bottom: 0; }
.dashv-recipe-row:hover { background: #FBFDFB; }
.dashv-recipe-name { font-size: 13.5px; font-weight: 500; color: var(--ink, #16241D); }
.dashv-recipe-marge { font-size: 13.5px; font-weight: 700; }
.dashv-recipe-marge.is-good { color: #16A34A; }
.dashv-recipe-marge.is-warn { color: #E5484D; }

.dashv-empty { text-align: center; padding: 60px 20px; }
.dashv-empty-ico { font-size: 40px; color: #16A34A; margin-bottom: 16px; }
.dashv-empty-title { font-size: 18px; font-weight: 700; color: var(--ink, #16241D); }
.dashv-empty-text { font-size: 14px; color: #5C6B63; margin: 8px auto 20px; max-width: 380px; line-height: 1.5; }
.dashv-empty-btn { background: #16A34A; color: #fff; border: 0; border-radius: 12px; padding: 12px 22px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }

/* Responsive dashboard */
@media (max-width: 1100px) { .dashv-cols { grid-template-columns: 1fr; } .dashv-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dashv-kpis { grid-template-columns: 1fr; } }

/* ============================================================
   ÉTAPE 3 — "Mes recettes" façon maquette : rangées structurées
   ============================================================ */
/* Chips de filtre catégorie */
.hist-cat-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.hist-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid #E8ECEA; background: #FFFFFF; color: #5C6B63; transition: all .12s; }
.hist-chip:hover { border-color: #DCE2DF; }
.hist-chip.active { background: #16241D; color: #fff; border-color: #16241D; }
.hist-chip.all.active { background: #16A34A; border-color: #16A34A; }
.hist-chip .chip-dot { width: 9px; height: 9px; border-radius: 50%; }

/* Rangée structurée */
.hist-row { display: grid !important; grid-template-columns: 4px 44px 1fr auto auto auto auto; align-items: center; gap: 14px; padding: 0 14px 0 0 !important; overflow: hidden; }
.hist-row .history-cat-accent { position: static; width: 4px; align-self: stretch; height: auto; }
.hist-emoji { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: color-mix(in srgb, var(--cat-color) 12%, white); }
.hist-main { min-width: 0; padding: 12px 0; }
.hist-main .history-item-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-main .history-cat-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cat-color, #5C6B63); margin-top: 4px; }
.hist-main .history-cat-badge .cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat-color, #93A199); }
.hist-meta-min { font-size: 12px; color: #93A199; margin-top: 4px; display: inline-block; }
.hist-col { text-align: right; }
.hist-col-label { font-size: 10.5px; color: #93A199; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.hist-col-value { font-size: 14.5px; font-weight: 700; margin-top: 2px; color: #16241D; }
.hist-marge-badge2 { display: inline-block; font-size: 13.5px; font-weight: 800; padding: 4px 10px; border-radius: 20px; margin-top: 2px; }
.hist-actions { display: flex; gap: 4px; }

/* Sur mobile étroit : masquer coût matière (garder prix + marge) */
@media (max-width: 560px) {
  .hist-row { grid-template-columns: 4px 40px 1fr auto auto; gap: 10px; }
  .hist-col-cost { display: none; }
  .hist-col-label { font-size: 9.5px; }
}