/* Finances de JARVIS : le panneau Finances. Même langage que JARVIS V3 : noir, blanc, gris, un seul bleu (#0a84ff), typographie
   système d'Apple, verre très discret. Ce fichier s'ajoute à hub.css (il en réutilise les variables et les classes bz-view, bz-vhead, bz-nav,
   bz-label, bz-empty, bz-add-btn) et ne touche à aucune classe de hub.css : tout est préfixé bzf-. */

.bzf { gap: 0; }
.bzf-count { padding: 3px 9px; border-radius: 999px; background: rgb(var(--th-w) / calc(.09 * var(--th-fa))); font: 590 11px/1 var(--font); color: var(--dim); letter-spacing: 0; }
.bzf .bz-vtop { margin-bottom: 14px; }

/* Semaine | Mois */
.bzf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(var(--th-g) / calc(.24 * var(--th-ga))); }
.bzf-seg button { min-height: 34px; border: 0; border-radius: 9px; background: none; color: var(--dim); font: 590 14px var(--font); transition: background .25s, color .25s; }
.bzf-seg button:hover { color: var(--th-hi); }
.bzf-seg button[aria-selected="true"] { color: var(--th-hi); background: rgb(var(--th-w) / calc(.18 * var(--th-fa))); box-shadow: 0 2px 8px rgb(var(--th-k) / calc(.3 * var(--th-ka))); }

.bzf-hero { display: grid; gap: 4px; margin: 22px 0 6px; padding: 0 4px; }
.bzf-hero-label { font: 590 12px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.bzf-hero-fig { font: 650 clamp(52px, 11vw, 68px)/1.02 var(--font); letter-spacing: -.045em; color: var(--th-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bzf-hero-fig.is-neg { color: rgb(var(--th-w) / calc(.78 * var(--th-ta))); }
.bzf-hero-cmp { font: 450 15px/1.35 var(--font); color: var(--dim); }
.bzf-hero-note { font: 450 13px/1.35 var(--font); color: var(--faint); }

.bzf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.bzf-acc { display: grid; align-content: start; gap: 6px; padding: 18px 18px 16px; border-radius: 24px; background: rgb(var(--th-w) / calc(.06 * var(--th-fa))); box-shadow: inset 0 0 0 1px rgb(var(--th-w) / calc(.05 * var(--th-fa))); }
.bzf-acc header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bzf-acc h3 { font: 650 19px/1.1 var(--font); letter-spacing: -.02em; color: var(--th-hi); }
.bzf-acc header span { font: 450 12px/1.2 var(--font); color: var(--faint); text-align: right; }
.bzf-fig { display: grid; gap: 7px; margin: 0; }
.bzf-fig > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bzf-fig dt { font: 450 14px var(--font); color: var(--dim); }
.bzf-fig dd { margin: 0; font: 520 16px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.bzf-fig .bzf-net { margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.bzf-fig .bzf-net dt { color: var(--ink); font-weight: 590; }
.bzf-fig .bzf-net dd { font: 680 24px/1.1 var(--font); letter-spacing: -.025em; color: var(--th-hi); }
.bzf-prev { font: 450 12.5px/1.3 var(--font); color: var(--faint); }
.bzf-none { margin-top: 6px; font: 450 14px/1.3 var(--font); color: var(--faint); }
.bzf-sub { margin-top: 12px; font: 590 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.bzf-cats { display: grid; gap: 9px; margin-top: 4px; }
.bzf-cat-top { display: flex; justify-content: space-between; gap: 10px; font: 450 14px/1.2 var(--font); color: var(--dim); }
.bzf-cat-top b { font-weight: 520; color: var(--ink); font-variant-numeric: tabular-nums; }
.bzf-bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); position: relative; overflow: hidden; }
.bzf-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: rgb(var(--th-w) / calc(.55 * var(--th-fa))); }

/* Ajouter */
.bzf-quick { display: grid; gap: 10px; margin: 22px 0 0; }
.bzf-type, .bzf-tog { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 11px; background: rgb(var(--th-g) / calc(.24 * var(--th-ga))); justify-self: start; }
.bzf-tog { justify-self: stretch; grid-auto-columns: 1fr; }
.bzf-type button, .bzf-tog button { min-height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: none; color: var(--dim); font: 590 13.5px var(--font); transition: background .2s, color .2s; }
.bzf-type button:hover, .bzf-tog button:hover { color: var(--th-hi); }
.bzf-type button[aria-pressed="true"], .bzf-tog button[aria-pressed="true"] { color: var(--th-hi); background: rgb(var(--th-w) / calc(.18 * var(--th-fa))); box-shadow: 0 2px 8px rgb(var(--th-k) / calc(.3 * var(--th-ka))); }
.bzf-quick-row { display: flex; align-items: center; gap: 10px; }
.bzf-quick-row input { flex: 1; min-width: 0; }
.bzf-more { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--blue); font: 590 14px var(--font); }
.bzf-preview { min-height: 18px; padding: 0 6px; font: 450 13.5px/1.3 var(--font); color: var(--dim); }
.bzf-preview.is-hint { color: var(--faint); }

/* Formulaires (ligne, frais fixe) */
.bzf-form { display: grid; gap: 12px; padding: 16px; border-radius: 22px; background: rgb(var(--th-w) / calc(.06 * var(--th-fa))); box-shadow: inset 0 0 0 1px rgb(var(--th-w) / calc(.06 * var(--th-fa))); }
.bzf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bzf-field { display: grid; gap: 6px; min-width: 0; }
.bzf-field > span { font: 590 12px/1 var(--font); color: var(--faint); padding-left: 4px; }
.bzf-form input, .bzf-form select, .bzf-rates input {
  width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 14px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); color: var(--ink);
  font: 400 16px var(--font); outline: none; transition: box-shadow .2s, background .2s;
}
.bzf-form select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.bzf-form select option { background: var(--th-panel); color: var(--th-ink); }
.bzf-form input:focus-visible, .bzf-form select:focus-visible, .bzf-rates input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue); background-color: rgb(var(--th-w) / calc(.11 * var(--th-fa))); }
.bzf-form input::placeholder { color: var(--faint); }
.bzf-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.bzf-grow { flex: 1; }
.bzf-primary, .bzf-ghost, .bzf-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 20px; border: 0; border-radius: 21px; font: 620 15px var(--font); transition: filter .2s, background .2s, transform .15s; }
.bzf-primary { background: var(--blue-fond); color: var(--th-on); }
.bzf-primary:hover { filter: brightness(1.12); }
.bzf-primary:active { transform: scale(.97); }
.bzf-ghost { background: rgb(var(--th-w) / calc(.1 * var(--th-fa))); color: var(--ink); }
.bzf-ghost:hover { background: rgb(var(--th-w) / calc(.17 * var(--th-fa))); }
.bzf-danger { padding: 0 14px; background: none; color: var(--dim); font-weight: 560; }
.bzf-danger:hover { color: var(--th-hi); background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); }

/* Les mouvements, jour par jour */
.bzf-day { margin-top: 10px; }
.bzf-day-h { padding: 0 12px 6px; font: 590 13px/1.2 var(--font); color: var(--dim); }
.bzf-lines { display: grid; gap: 2px; padding: 4px; border-radius: 22px; background: rgb(var(--th-w) / calc(.045 * var(--th-fa))); }
.bzf-line.is-editing { padding: 4px; }
.bzf-line-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; padding: 8px 14px; border: 0; border-radius: 18px; background: none; text-align: left; color: var(--ink); transition: background .2s; }
button.bzf-line-btn:hover { background: rgb(var(--th-w) / calc(.07 * var(--th-fa))); }
.bzf-line-btn.is-static { cursor: default; }
.bzf-line-main { display: grid; gap: 4px; min-width: 0; }
.bzf-line-main b { font: 520 16.5px/1.25 var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bzf-line-main small { font: 450 13px/1.35 var(--font); color: var(--faint); }
.bzf-amt { display: grid; justify-items: end; gap: 3px; flex: none; text-align: right; }
.bzf-amt b { font: 590 16.5px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bzf-line.is-in .bzf-amt b { color: var(--th-hi); }
.bzf-amt small { font: 450 12px/1.2 var(--font); color: var(--faint); white-space: nowrap; }
.bzf-line.is-future { opacity: .85; }
.bzf-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgb(var(--th-w) / calc(.1 * var(--th-fa))); font: 590 11px/1.4 var(--font); color: var(--dim); }
.bzf-chip-pro { background: rgb(var(--th-w) / calc(.86 * var(--th-fa))); color: var(--th-page); }
.bzf-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--th-w) / calc(.14 * var(--th-fa))); font: 560 11px/1.4 var(--font); color: var(--faint); }
.bzf-tag.is-soon { color: var(--blue); box-shadow: inset 0 0 0 1px rgb(var(--th-blue-rgb) / .5); }

/* Échéances de la semaine */
.bzf-ech ul { display: grid; gap: 2px; padding: 6px 4px; border-radius: 22px; background: rgb(var(--th-w) / calc(.045 * var(--th-fa))); }
.bzf-ech li { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px; }
.bzf-ech-day { font: 590 13px var(--font); color: var(--dim); }
.bzf-ech-name { font: 450 15.5px/1.3 var(--font); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bzf-ech li b { font: 590 15.5px var(--font); font-variant-numeric: tabular-nums; }

/* Frais fixes et abonnements */
.bzf-fr-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 12px 10px; }
.bzf-fr-total b { font: 650 30px/1 var(--font); letter-spacing: -.03em; color: var(--th-hi); font-variant-numeric: tabular-nums; }
.bzf-fr-total span { font: 450 15px var(--font); color: var(--dim); }
.bzf-fr-total small { flex-basis: 100%; font: 450 13px/1.35 var(--font); color: var(--faint); }
.bzf-fr-list { display: grid; gap: 2px; padding: 4px; border-radius: 22px; background: rgb(var(--th-w) / calc(.045 * var(--th-fa))); }
.bzf-fr { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 8px 8px 14px; border-radius: 18px; }
.bzf-fr.is-editing { display: block; padding: 4px; }
.bzf-fr-main { display: grid; gap: 4px; min-width: 0; }
.bzf-fr-main b { font: 520 16.5px/1.25 var(--font); overflow-wrap: anywhere; }
.bzf-fr-main small { font: 450 13px/1.4 var(--font); color: var(--faint); }
.bzf-fr-cost { display: grid; justify-items: end; gap: 2px; text-align: right; }
.bzf-fr-cost b { font: 590 16px var(--font); font-variant-numeric: tabular-nums; }
.bzf-fr-cost small { font: 450 12px var(--font); color: var(--faint); }
.bzf-fr.is-paused .bzf-fr-main b, .bzf-fr.is-paused .bzf-fr-main small { color: var(--faint); }
.bzf-fr-btns { display: flex; gap: 2px; }
.bzf-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); transition: background .2s, color .2s; }
.bzf-icon:hover { background: rgb(var(--th-w) / calc(.1 * var(--th-fa))); color: var(--th-hi); }
.bzf-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 23px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); color: var(--ink); font: 590 15px var(--font); transition: background .2s; }
.bzf-add:hover { background: rgb(var(--th-w) / calc(.15 * var(--th-fa))); }
.bzf-frais .bzf-form { margin-top: 10px; }

/* Taux de conversion */
.bzf-rates { margin-top: 28px; padding: 4px 6px; }
.bzf-rates summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; cursor: pointer; list-style: none; font: 590 13px var(--font); color: var(--faint); }
.bzf-rates summary::-webkit-details-marker { display: none; }
.bzf-rates summary::after { content: "›"; margin-left: auto; font-size: 18px; line-height: 1; transition: transform .2s; }
.bzf-rates[open] summary::after { transform: rotate(90deg); }
.bzf-rates summary:hover { color: var(--dim); }
.bzf-rates summary small { padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--th-w) / calc(.14 * var(--th-fa))); font: 560 11px var(--font); }
.bzf-rates-help { padding: 4px 8px 12px; font: 450 13px/1.45 var(--font); color: var(--faint); }
.bzf-rates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; padding: 0 8px; }
.bzf-rate { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font: 450 14px var(--font); color: var(--dim); }
.bzf-rate input { min-height: 40px; padding: 6px 12px; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.bzf-rate small { font: 560 11px var(--font); color: var(--faint); }
.bzf-rate small.is-set { color: var(--dim); }

@media (max-width: 700px) {
  .bzf-cols { grid-template-columns: 1fr; }
  .bzf-hero { margin-top: 18px; }
  .bzf-quick-row { gap: 6px; }
  .bzf-rates-grid { grid-template-columns: 1fr; }
  .bzf-ech li { grid-template-columns: 54px 1fr auto; padding: 4px 10px; }
  .bzf-fr { grid-template-columns: 1fr auto; }
  .bzf-fr-cost { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; justify-items: unset; gap: 6px; text-align: left; }
  .bzf-fr-btns { grid-column: 2; grid-row: 1 / span 2; }
  .bzf-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .bzf * { transition-duration: .01ms !important; } }