/* === BUDGET (P2) === */
/* En-tête de la carte récap : titre + sélecteur de devise du compte. */
.bud-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.35rem; }
.bud-head h2 { margin: 0; }
.bud-cur-group { display: inline-flex; align-items: center; gap: 0.35rem; }
.bud-currency-field { display: inline-flex; align-items: center; gap: 0.45rem; }
.bud-currency-field > span { font-size: 0.78rem; color: var(--text-secondary); }
/* Le "i" devise est à DROITE de l'en-tête : sa popup .info-pop (par défaut left:0) déborderait
   le viewport à droite (scroll horizontal mobile). On la réancre à droite + borne la largeur
   pour qu'elle reste toujours à l'écran (mobile-first). */
.bud-cur-group .info-pop { inset-inline-start: auto; inset-inline-end: 0; max-width: min(15rem, 44vw); }

/* Select thémé (devise, catégorie, bac) : uniforme dark/light, pas de style natif. */
.bud-select {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; color: var(--text-primary); font: inherit; font-size: 0.92rem; cursor: pointer;
}
.bud-select:focus { outline: none; border-color: var(--accent); }
.dlg-field > .bud-select { width: 100%; }

/* Filtre de période : mêmes pilules que le graphe (.range-btn) pour une taille identique aux catégories. */
.bud-period { display: inline-flex; gap: 0.4rem; margin: 0; flex-wrap: wrap; }

/* Filtre par catégorie : chips en ligne, défilables horizontalement (8 pôles) sans passer à la ligne. */
/* width:100% + min-width:0 : le parent (.bud-filters) est en colonne align-items:flex-start,
   donc sans ça la barre prend sa largeur de CONTENU (nowrap) et déborde la page (dézoom mobile).
   Contrainte à 100 % -> le nowrap scrolle DANS la barre, pas la page. */
/* La barre catégorie réutilise le composant scrollable des graphes (.range-buttons.param-buttons
   + updateFade) : même comportement + dégradé de bord. Ici juste la pastille de couleur. */
#budget-catfilter .range-btn { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Plafond mensuel (3 états) + barre de progression (alerte 80 % / 100 %). */
/* Résumé argent : carte groupant le total (hero) + le plafond (encadré distinct). */
/* TOTAL et plafond = CARTES DISTINCTES (mêmes tokens que le graphe année -> traitement identique
   sur toutes les périodes) ; .bud-money n'est plus qu'un conteneur d'espacement. */
.bud-money { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1rem; } /* gap 1rem = même écartement que TOTAL->graphe (année), cohérent Mois/Année */
.bud-money-total, .bud-cap:not(:empty) {
  background: var(--bg-card); border: 1px solid var(--header-border);
  border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-card); padding: 0.9rem;
}
.bud-money-total { display: flex; flex-direction: column; gap: 0.1rem; }
.bud-kicker { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.bud-total-val { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Plafond : lien "définir" / encadré teinté (distinct des catégories) / édition. */
.bud-cap:empty { display: none; }
/* Centré + espacé sous la nav mois : sinon le bouton (aligné à gauche, collé) mordait la flèche ‹
   (dont la zone de clic déborde de 0,5rem, cf. .bud-year-arw::after). */
.bud-cap-set { display: block; width: fit-content; margin: 0.7rem auto 0; background: none; border: 1px dashed var(--border); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.bud-cap-set:hover { border-color: var(--accent); }
.bud-cap-edit { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bud-cap-edit > .bud-cap-lbl { flex: 1 0 100%; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
/* Champ texte plafond : même habillage que .bud-select (pas de chevron select). */
.bud-cap-input {
  max-width: 7rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; color: var(--text-primary); font: inherit; font-size: 0.92rem; font-variant-numeric: tabular-nums;
}
.bud-cap-input:focus { outline: none; border-color: var(--accent); }
.bud-cap-editlink { background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.bud-cap-editlink:hover { text-decoration: underline; }
/* Plafond mensuel (variante retenue) : carte neutre, badge "Dépassé", montant en gros,
   jauge dégradée vert->ambre->rouge qui FRANCHIT la ligne plafond (segment hachuré = dépassement),
   footer une ligne "Plafond X / mois · Modifier". Pas de %, pas de label sur la ligne. */
.bud-cap6 { display: flex; flex-direction: column; gap: 0.45rem; }
.bud-cap6-head { display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; }
/* Ligne hero : "restants" à gauche, kicker "Ce mois · X" poussé à droite (même ligne). */
.bud-cap6-hero-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
/* Nav mois : réutilise .bud-year-nav/.bud-year-arw ; juste le libellé capitalisé. La largeur fixe et le
   centrage viennent de .bud-year-nav b (commun à TOUTES les périodes) -> les flèches ‹ › tombent au même
   endroit en mois / année / tout, et ne bougent pas quand le mois change de longueur. */
.bud-mnav b { text-transform: capitalize; }
.bud-cap6-kick { font-size: 0.72rem; color: var(--text-secondary); }
.bud-cap6-kick .lbl { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 0.68rem; }
.bud-cap6-spent { font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bud-cap6.is-over .bud-cap6-spent { color: var(--bad); }
/* Pas de margin-inline-start:auto : en flex il annulerait le justify-content:center du header et collerait
   le nav à gauche. Le badge suit le nav (ou passe dessous via flex-wrap sur écran étroit), nav reste centré. */
.bud-cap6-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--bad); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; }
.bud-cap6-hero { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bud-cap6-hero.is-ok { color: var(--text-primary); }
.bud-cap6-hero.is-warn { color: var(--warn); }
.bud-cap6-hero.is-over { color: var(--bad); }
.bud-cap6-bar { position: relative; height: 13px; border-radius: var(--radius-pill); background: rgba(128,128,128,0.16); overflow: hidden; }
/* Remplissage JUSQU'À la ligne plafond : dégradé vert -> ambre (proche du plafond). */
.bud-cap6-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--ok), var(--warn)); transition: width 0.3s ease; }
/* Au-delà du plafond : plein rouge, séparé du dégradé par une jonction NETTE (coins carrés au contact). */
.bud-cap6.is-over .bud-cap6-fill { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.bud-cap6-over { position: absolute; top: 0; bottom: 0; background: var(--bad); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
/* Ligne plafond : contraste inverse au thème (blanche en sombre, foncée en clair) ; orange en alerte 80 %. */
.bud-cap6-line { position: absolute; top: -1px; bottom: -1px; width: 3px; background: var(--text-primary); }
.bud-cap6.is-warn .bud-cap6-line { background: var(--warn); }
.bud-cap6-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
.bud-cap6-plafond { color: var(--text-secondary); }
.bud-catf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.bud-catf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Répartition par catégorie : barres proportionnelles. */
/* Ventilation par mois (période "Année") : barres, couleur graduée, mois pic surligné. */
.bud-year { background: var(--bg-card); border: 1px solid var(--header-border); border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-card); padding: 0.9rem; margin: 0 0 1rem; }
.bud-year[hidden] { display: none; }
/* Header année/tout : nav CENTRÉ (même placement que le nav mois .bud-cap6-head), l'info « pic »
   passe centrée juste en dessous au lieu d'être à droite -> flèches ‹ › au même endroit partout. */
.bud-year-h { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-bottom: 0.9rem; }
.bud-year-peak { font-size: 0.78rem; color: var(--text-secondary); }
.bud-year-peak b { color: var(--text-primary); }
.bud-year-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Largeur COMMUNE à toutes les périodes (année/mois/tout) via --bud-nav-w : mesurée en JS = plus long
   « mois année » de la LANGUE courante (syncNavWidth), donc espace minimal entre les flèches ‹ › sans
   jamais rogner, et navs de même largeur -> flèches au même endroit d'une période à l'autre. Fallback 10rem. */
.bud-year-nav b { font-family: var(--font-title); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: var(--bud-nav-w, 10rem); text-align: center; white-space: nowrap; }
.bud-year-arw { position: relative; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--header-border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 1rem; line-height: 1; cursor: pointer; }
/* Cible tactile ~44px (WCAG 2.5.5) SANS changer le visuel (27px) ni l'espacement : zone cliquable invisible
   étendue. Elle n'empiète que sur du padding de carte / du texte non cliquable -> aucun vol de tap. */
.bud-year-arw::after { content: ""; position: absolute; inset: -0.5rem; }
.bud-year-arw:hover:not([disabled]) { color: var(--text-primary); border-color: var(--accent); }
.bud-year-arw[disabled] { opacity: 0.4; cursor: not-allowed; }
.bud-year-empty { color: var(--text-secondary); font-size: 0.85rem; margin: 0.2rem 0 0; }
.bud-yb { display: flex; align-items: flex-end; gap: 5px; height: 128px; }
.bud-yb-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bud-yb-v { font-size: 0.6rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bud-yb-bar { width: 100%; max-width: 24px; border-radius: 4px 4px 2px 2px; min-height: 3px; }
.bud-yb-bar.is-zero { min-height: 0; } /* mois/année à 0 € : pas de stub, juste la ligne de base */
.bud-yb-m { font-size: 0.6rem; color: var(--text-secondary); }
.bud-yb-col.is-peak .bud-yb-v { color: var(--text-primary); font-weight: 700; }
.bud-yb-col.is-peak .bud-yb-m { color: var(--text-primary); font-weight: 700; }
.bud-bars { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; }
/* Répartition = 1 barre empilée (part par catégorie) + légende alignée (montant/% à droite). */
.bud-stack { display: flex; width: 100%; height: 0.85rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-secondary); margin-top: 0.9rem; }
.bud-seg { height: 100%; min-width: 3px; }
.bud-seg:not(:last-child) { border-inline-end: 2px solid var(--bg-card); }
.bud-legend { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.75rem; }
.bud-leg { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; }
.bud-leg .bud-dot { border-radius: 3px; }
.bud-leg-lab { color: var(--text-secondary); }
.bud-leg-val { margin-inline-start: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Desktop : une barre par catégorie (précis). Mobile : on garde la barre empilée + légende. */
.bud-bars-list { display: none; flex-direction: column; gap: 0.7rem; }
.bud-bar { display: flex; flex-direction: column; gap: 0.3rem; }
.bud-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; }
.bud-bar-lab { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bud-bar-val { color: var(--text-secondary); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.bud-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--bg-secondary); overflow: hidden; }
/* display:block INDISPENSABLE : un <span> inline ignore width/height en % -> barre invisible. */
.bud-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); min-width: 3px; }
@media (min-width: 640px) {
  .bud-stack, .bud-legend { display: none; }
  .bud-bars-list { display: flex; margin-top: 0.9rem; }
}

/* Pastille couleur de catégorie (partagée liste + barres). */
.bud-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* En-tête de la carte liste : titre + bouton d'ajout. */
.bud-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.bud-list-head h2 { margin: 0; }

/* Liste des dépenses : structure fixe 2 lignes (robuste aux notes longues sur mobile).
   Ligne 1 = montant · catégorie + actions ; ligne 2 = date + bac + note. */
.bud-list { display: flex; flex-direction: column; }
.bud-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0; border-top: 1px solid var(--header-border); }
.bud-row:first-child { border-top: none; }
.bud-row > .bud-dot { margin-top: 0.5rem; }
.bud-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bud-line1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.bud-amount { font-weight: 700; color: var(--text-primary); }
.bud-cat { color: var(--text-secondary); font-size: 0.88rem; }
.bud-sub { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; color: var(--text-secondary); font-size: 0.85rem; }
/* Bac d'une dépense = chip bordé avec icône de bac (se distingue clairement de la date/note). */
.bud-tank { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.05rem 0.5rem; color: var(--text-secondary); font-size: 0.78rem; }
.bud-tank-ic { width: 12px; height: 12px; flex: 0 0 auto; color: var(--accent); }
.bud-note { color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.bud-acts { flex: 0 0 auto; display: inline-flex; gap: 0.4rem; align-items: flex-start; }

/* Filtres budget : période (segmenté) + portée (select bac), sur une ligne qui passe à la ligne si étroit. */
/* 2 lignes nettes et déterministes : période (segmenté) au-dessus, filtre bac en dessous. */
.bud-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.9rem; }
.bud-filters .bud-period { flex-wrap: wrap; }
.bud-scope { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text-secondary); }