/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bg:              #FFF8F0;
  --paper:           #fff;
  --ink:             #1a1612;
  --ink-light:       #6b6258;
  --accent:          #aa503c;
  --accent-soft:     #f9eeeb;
  --green:           #2a7a4b;
  --green-soft:      #e5f0ea;
  --gold:            #c4973a;
  --red-warning:     rgba(211, 74, 74, 1);
  --border:          #d8d0c4;
  --shadow:          rgba(26, 22, 18, 0.08);
  --radius-card:     16px;
  --radius-btn:      8px;

  /* Couleurs enveloppes */
  --courses:         #2a5c7a;
  --courses-soft:    #e5eef5;
  --loisir:          #7a2a6b;
  --loisir-soft:     #f5e5f0;
  --restaurant:      #c8472a;
  --restaurant-soft: #f0e8e5;
  --divers:          #4a7a2a;
  --divers-soft:     #eaf5e5;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: 'DM Mono', monospace;
  color: var(--ink);
  min-height: 100svh;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    5rem
    max(1rem, env(safe-area-inset-left));
    background: url('img/header.png'), #FFF8F0;
    background-repeat: no-repeat;
    background-size: 100%;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
header { 
  margin-bottom: 2rem; 
  padding-top: max(env(safe-area-inset-top), 1.5rem);
  text-align: center; 
}

header h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

header h1 span { font-style: italic; color: var(--accent); }

@media (min-width: 1024px) {
  header { 
    height: 313px;
  }
}

.footer {
  text-align: center;
}

/* ── Navigation mois ─────────────────────────────────────────────────────── */
.month-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: .9rem;
}

.month-nav button {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer; font-size: 1rem; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.month-nav button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

#month-label {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem; min-width: 185px; text-align: center;
}

/* ── Barre résumé ─────────────────────────────────────────────────────────── */
.summary-bar {
  max-width: 860px; margin: 0 auto 2rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 12px; overflow: hidden;
}

.summary-cell { background: var(--paper); padding: .9rem 1rem; text-align: center; }

.summary-cell .label {
  font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-light); margin-bottom: .3rem;
}

.summary-cell .value {
  font-family: 'DM Serif Display', serif; font-size: 1.4rem;
}

.summary-cell.spent .value     { color: var(--accent); }
.summary-cell.remaining .value { color: var(--green); }

/* ── Grille enveloppes ────────────────────────────────────────────────────── */
.grid {
  max-width: 860px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 1.4rem;
}

/* ── Carte enveloppe ──────────────────────────────────────────────────────── */
.envelope {
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  transition: box-shadow .2s;
  animation: slideUp .35s ease both;
}
.envelope:hover { box-shadow: 0 6px 22px rgba(26,22,18,.13); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header de carte */
.env-header {
  padding: 1rem 1.3rem .9rem;
  border-bottom: 1.5px solid var(--border);
  display: flex; 
  align-items: center; 
  gap: .75rem;
  color: #fff;
  font-family: 'DM Serif Display', serif; 
  background-color: var(--cat-color);
}

.env-icon {
  font-size: 1.35rem; width: 40px; height: 40px;
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}

/* AJOUTER */
.env-img {
  width: 100px;
  height: 100px;
  font-size: 4em;
  text-align: center;
  object-fit: contain;
  /*background-color: var(--cat-color-soft);*/
}

.env-img img {
  position: relative;
  top: 0.1em;
  left: -0.1em;
  max-width: 100%;
}

.env-title-block { 
  flex: 1; 
  min-width: 0; 
}

.env-name {
  color: #fff;
  font-size: 2rem;
}

.env-amounts-header {
  display: flex; 
  gap: .6rem; 
  margin-top: .12rem;
  font-size: 1rem; 
  color: #fff; 
  flex-wrap: wrap;
}

.env-amounts-header .tag {
}

.env-amounts-header b { 
  padding-left: 0.4em;
  padding-right: 0.4em;
  color: #000;
  font-weight: 500; 
  background: rgba(255, 255, 255, .5);
  border-radius: 5px;
}

[data-hd-spent] { color: var(--red-warning) !important; }

/* Barre de progression */
.env-progress-wrap {
  padding: .5rem 1.3rem .65rem;
  border-bottom: 1.5px solid var(--border);
}

.env-progress-track {
  height: 7px; background: var(--border);
  border-radius: 99px; overflow: hidden;
}

.env-progress-fill {
  height: 100%; border-radius: 99px; width: 0%;
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s;
}
.env-progress-fill.warning { background: var(--gold) !important; }
.env-progress-fill.over    { background: var(--accent) !important; }

.env-progress-labels {
  display: flex; justify-content: space-between;
  font-size: .62rem; color: var(--ink-light); margin-top: .28rem;
}

/* Labels colonnes */
.denom-col-labels {
  display: flex; align-items: center;
  padding: .35rem 1.3rem .2rem;
  font-size: .57rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-light);
  border-bottom: 1px solid var(--border);
}
.col-val    { min-width: 46px; }
.col-budget { flex: 1; text-align: center; }
.col-spend  { width: 72px; text-align: center; }
.col-left   { width: 50px; text-align: right; }

/* Sections billets / pièces */
.denom-section { padding: .45rem 1.3rem; border-bottom: 1.5px solid var(--border); }

.denom-section-title {
  font-size: .57rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-light); margin-bottom: .4rem;
}

.denom-row {
  display: flex; align-items: center;
  gap: .4rem; padding: .24rem 0;
}

.denom-tag {
  font-size: .7rem; font-weight: 500;
  padding: .16rem .42rem; border-radius: 6px;
  min-width: 46px; text-align: center;
  border: 1.5px solid currentColor; opacity: .7; flex-shrink: 0;
}

/* Contrôles budget */
.budget-controls {
  display: flex; align-items: center; gap: .3rem;
  flex: 1; justify-content: center;
}

.ctrl-btn {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--border); background: transparent;
  cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s; color: var(--ink);
  flex-shrink: 0;
}
.ctrl-btn:hover.minus { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ctrl-btn:hover.plus  { background: var(--green-soft);  border-color: var(--green);  color: var(--green);  }
.ctrl-btn:active      { transform: scale(.88); }
.ctrl-btn:disabled    { opacity: .22; cursor: not-allowed; pointer-events: none; }

.denom-budget-count {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem; min-width: 22px; text-align: center;
}

.denom-budget-count.bump { animation: bump .2s ease; }
@keyframes bump {
  0%   { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Bouton dépenser */
.spend-btn {
  width: 72px; height: 26px; flex-shrink: 0;
  border-radius: 7px; border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: .63rem;
  letter-spacing: .03em; color: var(--ink-light);
  display: flex; align-items: center; justify-content: center; gap: .2rem;
  transition: background .13s, border-color .13s, color .13s;
}
.spend-btn:hover:not(:disabled) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.spend-btn:active:not(:disabled) { transform: scale(.92); }
.spend-btn:disabled { opacity: .18; cursor: not-allowed; pointer-events: none; }
.spend-btn.flash { animation: flash-spend .35s ease; }
@keyframes flash-spend {
  0%   { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  100% { background: transparent; border-color: var(--border); color: var(--ink-light); }
}

/* Restant par dénomination */
.denom-remaining {
  width: 50px; text-align: right; font-size: .67rem; color: var(--ink-light);
}
.denom-remaining.empty { color: var(--accent); font-weight: 500; }

/* Footer carte */
.env-footer {
  padding: .75rem 1.3rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .4rem; text-align: center;
}

.footer-cell .f-label {
  font-size: .57rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-light); margin-bottom: .18rem;
}

.footer-cell .f-val {
  font-family: 'DM Serif Display', serif; font-size: 1.05rem;
}

.footer-cell.f-spent .f-val  { color: var(--accent); }
.footer-cell.f-remain .f-val { color: var(--green); }

/* ── Barre d'actions ──────────────────────────────────────────────────────── */
.actions-bar {
  max-width: 860px; margin: 1.5rem auto 0;
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end;
}

.btn-outline {
  background: none; border: 1.5px solid var(--border);
  padding: .48rem 1rem; border-radius: var(--radius-btn);
  font-family: 'DM Mono', monospace; font-size: .69rem;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; color: var(--ink-light);
  transition: background .15s, color .15s, border-color .15s;
}
.btn-outline:hover      { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-outline.active     { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-outline.btn-danger { color: var(--accent); border-color: var(--accent); }
.btn-outline.btn-danger:hover { background: var(--accent); color: #fff; }

/* ── Panneau de logs ──────────────────────────────────────────────────────── */
#log-panel {
  max-width: 860px; margin: 1.2rem auto 0;
  border: 1.5px solid var(--border); border-radius: var(--radius-card);
  background: var(--paper); overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}

#log-panel.open { max-height: 520px; opacity: 1; }

.log-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  padding: .75rem 1.3rem;
  border-bottom: 1.5px solid var(--border);
  font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-light);
}

.log-filter-toggle {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; font-size: .64rem;
}

#log-list {
  overflow-y: auto; max-height: 420px;
  padding: .4rem 0;
  /* Scrollbar discrète */
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.log-empty {
  text-align: center; padding: 1.5rem;
  font-size: .75rem; color: var(--ink-light);
}

/* Ligne de log — format : date - heure · Catégorie · Action · ±montant */
.log-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .3rem .5rem;
  padding: .42rem 1.3rem;
  font-size: .68rem;
  border-bottom: 1px solid rgba(216,208,196,.5);
  transition: background .1s;
}
.log-row:last-child { border-bottom: none; }
.log-row:hover { background: rgba(26,22,18,.025); }

.log-datetime { color: var(--ink-light); white-space: nowrap; }
.log-sep      { color: var(--border); }
.log-cat      { font-weight: 500; }
.log-action   { color: var(--ink-light); }

.log-delta { margin-left: auto; font-family: 'DM Serif Display', serif; font-size: .85rem; }

.log-plus  .log-delta { color: var(--green); }
.log-minus .log-delta { color: var(--ink-light); }
.log-spend .log-delta { color: var(--accent); }
.log-spend            { background: rgba(200,71,42,.025); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--bg);
  padding: .6rem 1.4rem; border-radius: 99px;
  font-size: .76rem; letter-spacing: .04em;
  opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.4,0,.2,1);
  pointer-events: none; z-index: 999; white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Thèmes couleur par enveloppe ─────────────────────────────────────────── */
.envelope[data-cat="courses"]    .env-icon         { background: var(--courses-soft); }
.envelope[data-cat="loisir"]     .env-icon         { background: var(--loisir-soft); }
.envelope[data-cat="restaurant"] .env-icon         { background: var(--restaurant-soft); }
.envelope[data-cat="divers"]     .env-icon         { background: var(--divers-soft); }

.envelope[data-cat="courses"]    .env-progress-fill { background: var(--courses); }
.envelope[data-cat="loisir"]     .env-progress-fill { background: var(--loisir); }
.envelope[data-cat="restaurant"] .env-progress-fill { background: var(--restaurant); }
.envelope[data-cat="divers"]     .env-progress-fill { background: var(--divers); }

.envelope[data-cat="courses"]    .denom-tag { color: var(--courses); }
.envelope[data-cat="loisir"]     .denom-tag { color: var(--loisir); }
.envelope[data-cat="restaurant"] .denom-tag { color: var(--restaurant); }
.envelope[data-cat="divers"]     .denom-tag { color: var(--divers); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .summary-bar .label { font-size: .55rem; }
  .summary-cell .value { font-size: 1.1rem; }
  .actions-bar { justify-content: stretch; }
  .btn-outline { flex: 1; text-align: center; }
  .log-row { gap: .2rem .4rem; font-size: .63rem; }
}

/* ── Nouvelles catégories : couleur dynamique via --cat-color ─────────────── */
.envelope .env-icon         { background: var(--cat-color-soft, #eee); }
.envelope .env-progress-fill { background: var(--cat-color, #555); }
.envelope .denom-tag         { color: var(--cat-color, #555); }

/* ── Colonne undo dans les labels ─────────────────────────────────────────── */
.col-undo { width: 32px; }

/* ── Bouton undo ──────────────────────────────────────────────────────────── */
.undo-btn {
  width: 32px; height: 26px; flex-shrink: 0;
  border-radius: 7px; border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
  font-size: .85rem; color: var(--ink-light);
  display: flex; align-items: center; justify-content: center;
  transition: background .13s, border-color .13s, color .13s;
}
.undo-btn:hover:not(:disabled) {
  background: var(--green-soft); border-color: var(--green); color: var(--green);
}
.undo-btn:active:not(:disabled) { transform: scale(.9); }
.undo-btn:disabled { opacity: .16; cursor: not-allowed; pointer-events: none; }
.undo-btn.flash-undo { animation: flash-undo .35s ease; }
@keyframes flash-undo {
  0%   { background: var(--green-soft); border-color: var(--green); color: var(--green); }
  100% { background: transparent; border-color: var(--border); color: var(--ink-light); }
}

/* ── Ligne log annulation ─────────────────────────────────────────────────── */
.log-undo .log-delta { color: var(--green); }
.log-undo            { background: rgba(42,122,75,.04); }

/* ── Panneau filtre billets ───────────────────────────────────────────────── */
#filter-panel {
  max-width: 860px; margin: .6rem auto 0;
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: 12px; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
#filter-panel.open { max-height: 120px; opacity: 1; }

.filter-panel-inner {
  padding: .75rem 1.3rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
}

.filter-panel-label {
  font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-light);
  margin-right: .3rem; white-space: nowrap;
}

.filter-chip {
  padding: .28rem .7rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  font-family: 'DM Mono', monospace;
  font-size: .7rem; cursor: pointer;
  color: var(--ink-light);
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.filter-chip.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* ── Message dénominations vides ─────────────────────────────────────────── */
.denom-empty {
  font-size: .65rem; color: var(--ink-light);
  padding: .3rem 0; font-style: italic;
}