/* budget.css — Thème ZTS : CYAN + JAUNE + BLEU (Pop Art bûcheron).
   Montants : ROUGE = dépenses, VERT = revenus (non négociable, lisibilité).
   Polices fun : Luckiest Guy (titres) · Bangers (chiffres) · Baloo 2 (boutons/labels)
   · Fredoka (corps) · Patrick Hand (notes manuscrites). */

:root {
  /* Marque */
  --cyan: #19C6F4;
  --cyan-d: #0FA3D8;
  --jaune: #FFE600;
  --bleu: #0B57E0;
  --bleu-nuit: #0C2461;   /* "encre" : bordures, texte, ombres */
  --papier: #E9FAFF;      /* fond clair cyanté, données lisibles */
  --blanc: #fff;
  /* Sémantique montants (intouchable) */
  --rouge: #FF1E1E;       /* dépenses */
  --vert: #00C853;        /* revenus  */
  /* Comic */
  --ombre: 4px 4px 0 var(--bleu-nuit);
  --ombre-lg: 6px 6px 0 var(--bleu-nuit);
  --bord: 3px solid var(--bleu-nuit);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--bleu-nuit);
  background-color: var(--papier);
  background-image:
    radial-gradient(var(--cyan) 1.4px, transparent 1.5px),
    radial-gradient(var(--jaune) 1.4px, transparent 1.5px);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Swirl spiralé cyan/jaune (comme l'image), convergence bas-droite. */
.sunburst {
  background-color: var(--cyan);
  background-image: url('icons/swirl.svg');
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

h1, h2, h3, .titre { font-family: 'Luckiest Guy', cursive; letter-spacing: .5px; font-weight: 400; color: var(--bleu-nuit); }
.chiffre, .montant { font-family: 'Bangers', cursive; letter-spacing: 1px; }

/* ── App shell ── */
#app { max-width: 560px; margin: 0 auto; padding: 0 12px 96px; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 10px; margin: 0 -4px 12px;
  background: linear-gradient(120deg, var(--cyan), var(--bleu));
  border: var(--bord); border-radius: 0 0 18px 18px; box-shadow: var(--ombre);
}
.topbar .brand { display: flex; align-items: center; gap: 8px; }
.topbar .brand img { width: 36px; height: 36px; border-radius: 8px; border: var(--bord); background: #fff; }
.topbar .brand .t { font-size: 24px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px var(--bleu-nuit); }
.topbar .who { font-size: 13px; display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }

/* ── Boutons comic ── */
.btn {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 16px;
  border: var(--bord); background: var(--blanc); color: var(--bleu-nuit);
  padding: 10px 14px; border-radius: 14px; box-shadow: var(--ombre);
  cursor: pointer; transition: transform .06s, box-shadow .06s; user-select: none;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bleu-nuit); }
.btn-rouge { background: var(--rouge); color: #fff; }
.btn-vert { background: var(--vert); color: #fff; }
.btn-jaune { background: var(--jaune); color: var(--bleu-nuit); }
.btn-bleu { background: var(--bleu); color: #fff; }
.btn-cyan { background: var(--cyan); color: var(--bleu-nuit); }
.btn-ghost { box-shadow: none; background: rgba(255,255,255,.85); border-width: 2px; padding: 6px 10px; font-size: 14px; }
.btn-sm { font-size: 13px; padding: 6px 10px; border-radius: 11px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Carte / pastille ── */
.card { background: var(--blanc); border: var(--bord); border-radius: 16px; box-shadow: var(--ombre); }

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bangers', cursive; border: 2px solid var(--bleu-nuit);
  border-radius: 999px; padding: 1px 7px; font-size: 12px; line-height: 1.4;
  box-shadow: 2px 2px 0 var(--bleu-nuit); background: #fff;
}
.pastille.depense { background: var(--rouge); color: #fff; }
.pastille.revenu { background: var(--vert); color: #fff; }

/* ── Totaux du mois ── */
.totaux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.totaux .bloc { padding: 12px; text-align: center; }
.totaux .lab { font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 12px; text-transform: uppercase; opacity: .85; }
.totaux .val { font-family: 'Bangers', cursive; font-size: 34px; line-height: 1; margin-top: 2px; }
.totaux .depenses { background: #fff; }
.totaux .depenses .val { color: var(--rouge); }
.totaux .revenus .val { color: var(--vert); }

/* ── Navigation mois ── */
.moisnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
.moisnav .lab { font-family: 'Luckiest Guy', cursive; font-size: 22px; text-transform: capitalize; color: var(--bleu); }

/* ── Calendrier ── */
.cal { width: 100%; }
.cal .dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal .dow span { font-family: 'Baloo 2', cursive; text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--bleu); }
.cal .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .jour {
  position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--bleu-nuit);
  border-radius: 10px; background: #fff; padding: 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch;
  transition: transform .06s, box-shadow .06s;
}
.cal .jour:active { transform: translate(2px, 2px); }
.cal .jour.vide { border: none; background: transparent; cursor: default; }
.cal .jour .num { font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 12px; align-self: flex-end; line-height: 1; }
.cal .jour.aujourdhui { background: var(--jaune); box-shadow: 3px 3px 0 var(--bleu-nuit); }
.cal .jour .badges { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.cal .jour .b {
  font-family: 'Bangers', cursive; font-size: 12px; line-height: 1.05;
  border-radius: 6px; padding: 0 3px; text-align: center; border: 1.5px solid var(--bleu-nuit);
}
.cal .jour .b.dep { background: var(--rouge); color: #fff; }
.cal .jour .b.rev { background: var(--vert); color: #fff; }

/* ── FAB photo (hero) ── */
.fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40; display: flex; gap: 10px; }
.fab .hero {
  font-family: 'Luckiest Guy', cursive; font-size: 18px; color: var(--bleu-nuit);
  border: var(--bord); border-radius: 999px; padding: 14px 24px;
  background: var(--jaune); box-shadow: var(--ombre-lg); cursor: pointer;
}
.fab .hero:active { transform: translateY(3px); box-shadow: 2px 2px 0 var(--bleu-nuit); }

/* ── Panneau du jour / modales ── */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(12,36,97,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--papier); border-top: 4px solid var(--bleu-nuit);
  border-radius: 20px 20px 0 0; padding: 16px 14px 28px;
  background-image: radial-gradient(rgba(11,87,224,.10) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.sheet h3 { color: var(--bleu); margin: 18px 0 8px; }
.sheet .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet .head h2 { font-size: 24px; margin: 0; }
.close { font-family: 'Luckiest Guy', cursive; font-size: 18px; border: var(--bord); border-radius: 10px;
  background: var(--cyan); color: var(--bleu-nuit); padding: 4px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--bleu-nuit); }

/* ── Ligne transaction ── */
.tx { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; }
.tx .ic { font-size: 22px; width: 34px; text-align: center; }
.tx .mid { flex: 1; min-width: 0; }
.tx .mid .com { font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .mid .meta { font-family: 'Patrick Hand', cursive; font-size: 14px; opacity: .85; }
.tx .amt { font-family: 'Bangers', cursive; font-size: 22px; }
.tx .amt.dep { color: var(--rouge); }
.tx .amt.rev { color: var(--vert); }
.tx .ia { font-size: 11px; }

/* ── Formulaire ── */
.field { margin-bottom: 12px; }
.field label { font-family: 'Baloo 2', cursive; display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--bleu-nuit); }
.field input, .field select, .field textarea {
  width: 100%; font-family: 'Fredoka', sans-serif; font-size: 16px;
  border: var(--bord); border-radius: 10px; padding: 10px; background: #fff; color: var(--bleu-nuit);
}
.field input[inputmode="decimal"] { font-family: 'Bangers', cursive; font-size: 26px; letter-spacing: 1px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg .opt {
  text-align: center; font-family: 'Luckiest Guy', cursive; font-size: 16px;
  border: var(--bord); border-radius: 12px; padding: 12px; cursor: pointer; background: #fff;
}
.seg .opt.on.dep { background: var(--rouge); color: #fff; }
.seg .opt.on.rev { background: var(--vert); color: #fff; }
.formrow { display: flex; gap: 8px; }
.formrow > * { flex: 1; }

/* ── Login (sunburst comme l'image) ── */
.login { max-width: 420px; margin: 0 auto; min-height: 100vh; padding: 9vh 20px 24px; text-align: center; }
.login .box { background: rgba(255,255,255,.95); border: var(--bord); border-radius: 22px; box-shadow: var(--ombre-lg); padding: 24px 18px; }
.login h1 { font-size: 38px; margin: 8px 0 4px; }
.login p { font-family: 'Patrick Hand', cursive; margin: 0 0 18px; font-size: 17px; }
.login .btn { width: 100%; margin-bottom: 10px; }
.login .sep { font-family: 'Baloo 2', cursive; font-weight: 700; font-size: 12px; opacity: .7; margin: 8px 0; }
.login .err { color: var(--rouge); font-weight: 700; font-size: 13px; min-height: 18px; }
.uid-hint { font-size: 11px; opacity: .6; word-break: break-all; margin-top: 14px; }

.hidden { display: none !important; }
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--bleu-nuit); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-family: 'Baloo 2', cursive; font-weight: 700; z-index: 60; box-shadow: var(--ombre); max-width: 90%;
}