/**
 * @file finance.css
 * @description Page finance : hero (budget/valeur nette/trading), inbox d'import,
 *              charges fixes, graphiques Chart.js, liste des transactions, formulaire,
 *              budgets mensuels. Aligne sur le systeme de design APJ v11 (tokens, glass,
 *              couleurs semantiques pour le clair ET le sombre, accent finance dore).
 * @depends global.css
 */

.finance-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px var(--space-5) 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ============================================================
   HERO : budget restant / valeur nette / trading
   ============================================================ */
.finance-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.95fr;
  gap: var(--space-4);
}

.finance-hero-card {
  min-height: 182px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Carte solde : toujours sombre, accent dore en lueur — point focal du hero. */
.finance-balance-hero {
  background:
    linear-gradient(180deg, rgba(14, 16, 23, 0.92), rgba(14, 16, 23, 0.8)),
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.42), transparent 44%);
  color: rgba(255, 248, 234, 0.92);
}

.finance-balance-hero::before,
.finance-balance-hero::after {
  display: none;
}

.finance-balance-hero .label-mono,
.finance-balance-hero .section-note,
.finance-balance-hero .metric-value,
.finance-balance-hero .finance-hero-trend {
  color: inherit;
}

.finance-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.finance-worth-grid,
.trading-pnl-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.finance-worth-grid div,
.trading-pnl-item {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-subtle);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.finance-worth-grid strong,
.trading-pnl-item strong {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-size: 1.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trading-pnl-item span {
  display: block;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trading-pnl-item.profit strong { color: var(--success); }
.trading-pnl-item.loss strong { color: var(--danger); }

/* ============================================================
   MISE EN PAGE PRINCIPALE
   ============================================================ */
.finance-layout {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: var(--space-4);
  align-items: start;
}

.finance-primary,
.finance-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ============================================================
   GRAPHIQUES
   ============================================================ */
.finance-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.chart-card {
  min-height: 290px;
}

.chart-card canvas {
  width: 100% !important;
  height: 210px !important;
}

.chart-title {
  margin-bottom: var(--space-3);
  color: var(--text-faint);
}

/* ============================================================
   CHARGES FIXES (recurrentes)
   ============================================================ */
.recurring-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recurring-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: var(--glass-bg-subtle);
}

.recurring-row-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* ============================================================
   SOLDE + FORMULAIRE
   ============================================================ */
.balance-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-amount {
  font-variant-numeric: tabular-nums;
}

.finance-form-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ============================================================
   LISTE DES TRANSACTIONS
   ============================================================ */
.entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Rangee legere (pas .card : 50 panneaux de verre empiles ecrasaient la page). */
.entry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  background: var(--glass-bg-subtle);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.entry-item:hover {
  border-color: rgba(var(--accent-rgb), 0.26);
}

.entries-show-more {
  margin-top: var(--space-2);
  align-self: center;
}

.entry-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.entry-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
}

.entry-meta {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.entry-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.entry-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.entry-amount.income { color: var(--success); }
.entry-amount.expense { color: var(--danger); }

/* ============================================================
   TOGGLE (recurrent)
   ============================================================ */
.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.2s ease, background 0.2s ease;
}

.toggle-input:checked + .toggle-track {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: var(--accent);
}

.toggle-input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: var(--accent);
}

.toggle-input:focus-visible + .toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* ============================================================
   BUDGETS MENSUELS
   ============================================================ */
.budget-row {
  margin-bottom: var(--space-4);
}

.budget-row:last-child {
  margin-bottom: 0;
}

.budget-row-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.budget-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.budget-amounts {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.budget-bar-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.1);
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.budget-card [data-editable] {
  color: var(--text-main);
  padding: 0 2px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.28);
}

/* ============================================================
   INBOX D'IMPORT
   ============================================================ */
.inbox-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(160px, 0.8fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--glass-border);
}

.inbox-row:last-child {
  border-bottom: none;
}

.inbox-row-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inbox-desc {
  font-size: 0.88rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-date {
  color: var(--text-faint);
}

.inbox-amount {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.inbox-amount.debit { color: var(--danger); }
.inbox-amount.credit { color: var(--success); }

.inbox-reject {
  border-color: rgba(var(--danger-rgb), 0.24);
  color: var(--danger);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .finance-hero-grid,
  .finance-layout,
  .finance-charts {
    grid-template-columns: 1fr;
  }

  /* Solde + saisie rapide avant la longue liste de transactions sur mobile. */
  .finance-sidebar {
    order: -1;
  }

  .finance-worth-grid,
  .trading-pnl-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .finance-main {
    padding: 84px var(--space-3) 44px;
    gap: var(--space-4);
  }

  .finance-bilan-card {
    flex-wrap: wrap;
  }

  .finance-bilan-card .btn-glass {
    white-space: nowrap;
  }

  .inbox-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .inbox-row-info {
    grid-column: 1 / -1;
  }
}

.finance-bilan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-finance);
}
.finance-bilan-title { font-family: var(--font-mono); font-weight: 700; margin: 0 0 var(--space-1); }
.finance-bilan-card .section-note { margin: 0; }