/**
 * s2-depense.css — Modale "Ajouter une dépense / Simuler"
 *
 * RÈGLE UNIQUE : TOUT est scopé sous #screen-2 ou est un sélecteur
 * suffisamment unique (.s2-overlay, .s2-sheet, .s2-scroll, .s2-footer)
 * pour ne jamais entrer en conflit avec app.css.
 *
 * Structure :
 *   1. Overlay + Sheet (slide-up)
 *   2. Header (drag handle, titre, X, pill)
 *   3. Toggle Ajouter / Simuler
 *   4. Scroll + Form
 *   5. Montant (input + symbol + devises)
 *   6. Catégories
 *   7. Type de dépense (tabs)
 *   8. Info paragraphe
 *   9. Date (ponctuelle / spéciale / récurrente)
 *  10. Impact lissage
 *  11. Footer (CTA)
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. OVERLAY + SHEET
   ───────────────────────────────────────────────────────────────────────────── */

.s2-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.s2-sheet {
  background: #FAF8FF;
  border-radius: 20px 20px 0 0;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dh-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) { .s2-sheet { animation: none; } }

/* ─────────────────────────────────────────────────────────────────────────────
   2. HEADER
   ───────────────────────────────────────────────────────────────────────────── */

.s2-modal-header {
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid var(--c-border);
}

.s2-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.s2-modal-close {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-2);
  flex-shrink: 0;
}

.s2-modal-close:active { background: var(--c-border); }

.s2-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--c-ink-3);
}

.s2-context-plan  {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-accent);
}
.s2-context-sep   { width: 1px; height: 12px; background: var(--c-border); }

/* ─────────────────────────────────────────────────────────────────────────────
   3. TOGGLE AJOUTER / SIMULER
   ───────────────────────────────────────────────────────────────────────────── */

.s2-toggle-wrap {
  padding: var(--s-3) var(--s-4);
  flex-shrink: 0;
}

.s2-toggle {
  display: flex;
  background: var(--c-accent-light);
  border-radius: var(--r-xl);
  padding: 3px;
  gap: 2px;
}

#screen-2 .s2-toggle-btn {
  all: unset;
  flex: 1;
  padding: 9px var(--s-3);
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--c-accent-vivid);
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: all .15s;
}

#screen-2 .s2-toggle-btn.is-active {
  background: var(--c-surface);
  color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. SCROLL + FORM
   ───────────────────────────────────────────────────────────────────────────── */

.s2-scroll {
  flex: 1;
  min-height: 0;             /* CRITIQUE : permet au scroll de rétrécir dans le flex
                                sans pousser le footer hors de l'écran */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* La hauteur minimale est gérée sur les vues, pas sur le scroll container */
#screen-2 #ajouter-view,
#screen-2 #simu-view {
  min-height: 420px;
}

.s2-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  padding-bottom: var(--s-3);
}

/* Hauteur min des deux vues pour éviter le saut au toggle */
#screen-2 #ajouter-view,
#screen-2 #simu-view { min-height: 420px; }

/* Label de section */
#screen-2 .s2-section-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--s-2);
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. MONTANT
   ───────────────────────────────────────────────────────────────────────────── */

#screen-2 .s2-amount-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

#screen-2 .s2-amount-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#screen-2 .s2-currency-symbol {
  font-size: 46px;
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1;
}

#screen-2 .s2-amount-input {
  font-size: 48px;
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.03em;
  border: none;
  background: none;
  outline: none;
  text-align: center;
  width: 200px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: font-size .1s;
}

#screen-2 .s2-amount-input::placeholder { color: var(--c-border); }

/* Taille adaptative selon le nombre de chiffres */
#screen-2 .s2-amount-input[data-len="sm"] { font-size: 48px; }
#screen-2 .s2-amount-input[data-len="md"] { font-size: 36px; }
#screen-2 .s2-amount-input[data-len="lg"] { font-size: 26px; }
#screen-2 .s2-amount-input[data-len="xl"] { font-size: 20px; }

#screen-2 .conversion-badge {
  font-size: 12px;
  color: var(--c-ink-3);
  text-align: center;
}

#screen-2 .conversion-badge strong { color: var(--c-ink-2); }

/* Devises — scroll horizontal unique */
#screen-2 .devise-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s-1) 0 var(--s-2);
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#screen-2 .devise-chips::-webkit-scrollbar { display: none; }

#screen-2 .devise-chip {
  all: unset;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-xl);   /* ← demande utilisateur */
  font-size: 14px;              /* ← demande utilisateur */
  font-weight: 600;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink-2);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all .12s;
}

/* Devise du plan — mise en avant */
#screen-2 .devise-chip.devise-chip--plan {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Devise sélectionnée */
#screen-2 .devise-chip.devise-chip-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CATÉGORIES
   ───────────────────────────────────────────────────────────────────────────── */

#screen-2 .s2-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}

#screen-2 .s2-cat-selected {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
}

#screen-2 .cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

#screen-2 .cat-chip {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-m);
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  transition: border-color .12s, background .12s;
  width: 100%;
}

#screen-2 .cat-chip.cat-chip-active {
  border: 2px dashed var(--c-accent-vivid);
  background: var(--c-accent-light);
  box-shadow: 0 2px 8px rgba(79, 86, 211, 0.12);
}

#screen-2 .cat-emoji {
  width: 32px;
  height: 32px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  border-radius: var(--r-s);
  flex-shrink: 0;
  transition: background .12s;
}

#screen-2 .cat-chip.cat-chip-active .cat-emoji { background: rgba(79, 86, 211, 0.1); }

#screen-2 .cat-label { font-size: 14px; font-weight: 600; color: var(--c-ink); }
#screen-2 .cat-chip.cat-chip-active .cat-label { color: var(--c-accent-vivid); }

/* ─────────────────────────────────────────────────────────────────────────────
   7. TYPE DE DÉPENSE (tabs segmentés)
   ───────────────────────────────────────────────────────────────────────────── */

#screen-2 .s2-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--c-accent-light);
  /* border: 1px solid var(--c-border); */
  border-radius: var(--r-m);
  padding: 3px;
  gap: 2px;
}

#screen-2 .s2-type-tab {
  all: unset;
  padding: 9px var(--s-2);
  border-radius: var(--r-s);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--c-accent);
  background: transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .15s, color .15s, box-shadow .15s;
}

#screen-2 .s2-type-tab.is-active {
  background: var(--c-surface);
  color: var(--c-accent);
  box-shadow: 0 2px 6px rgba(79, 86, 211, 0.12);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. INFO PARAGRAPHE (per type)
   ───────────────────────────────────────────────────────────────────────────── */

#screen-2 .s2-type-info {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border: 1px solid rgba(79, 86, 211, 0.2);
  border-radius: var(--r-m);
  padding: var(--s-3);
}

#screen-2 .s2-type-info-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--c-accent-vivid);
  border-radius: var(--r-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 1px;
}

#screen-2 .s2-type-info-body { display: flex; flex-direction: column; gap: 3px; }

#screen-2 .s2-type-info-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-accent-vivid);
}

#screen-2 .s2-type-info-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-ink-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. DATES
   ───────────────────────────────────────────────────────────────────────────── */

/* Champ date ponctuelle (input[type=date]) */
#screen-2 input[type="date"],
#screen-2 .s2-date-field {
  all: unset;
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  min-height: 54px;
  box-sizing: border-box;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

/* ─── Trigger date range (Récurrente + Spéciale) ───────────────────────────
   Même qualité que .sf-dates-trigger dans s1-form — card blanche, labels
   micro uppercase, valeurs en gras, arrow centrée, bordure au focus.
   ─────────────────────────────────────────────────────────────────────────── */

#screen-2 .s2-date-range {
  all: unset;
  display: flex;
  align-items: stretch;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;   /* bords arrondis nets même sur les enfants */
  transition: border-color .15s;
}

#screen-2 .s2-date-range:active,
#screen-2 .s2-date-range:focus { border-color: var(--c-accent); outline: none; }

/* Chaque case date (début / fin) */
#screen-2 .s2-date-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
}


/* Micro-label (DATE D'ACHAT / LISSÉ JUSQU'AU / DU / AU) */
#screen-2 .s2-date-box-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  line-height: 1;
}

/* Valeur de la date */
#screen-2 .s2-date-box-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
}

#screen-2 .s2-date-box-placeholder {
  color: var(--c-ink-3);
  font-weight: 400;
  font-size: 14px;
}

/* Flèche entre les deux cases — centrée verticalement */
#screen-2 .s2-date-arrow {
  flex-shrink: 0;
  align-self: center;
  font-size: 14px;
  color: var(--c-ink-3);
  padding: 0 var(--s-1);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. IMPACT LISSAGE (spéciale)
   ───────────────────────────────────────────────────────────────────────────── */

#screen-2 .impact-badge {
  /* display: block obligatoire — flex fragmentait "Réduit … 5,00 … pendant 30" */
  display: block;
  background: var(--c-accent-light);
  border: 1px solid rgba(79, 86, 211, 0.2);
  border-radius: var(--r-m);
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.6;
  margin-top: var(--s-2);
}

#screen-2 .impact-badge.is-empty {
  background: var(--c-bg);
  border-color: var(--c-border);
  color: var(--c-ink-3);
  font-style: italic;
}

/* Les valeurs chiffrées (montant, nb jours) ressortent en accent */
#screen-2 .impact-badge strong {
  color: var(--c-accent);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. FOOTER (CTA)
   ───────────────────────────────────────────────────────────────────────────── */

.s2-footer {
  background: var(--c-surface);
  padding: var(--s-3) var(--s-4) calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.s2-submit-btn {
  width: 100%;
  padding: 16px var(--s-4);
  background: var(--c-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.s2-submit-btn:hover  { background: #3d44b8; }
.s2-submit-btn:active { background: #3034a0; }

/* Désactivé : tous les champs requis ne sont pas remplis */
.s2-submit-btn--disabled,
.s2-submit-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Date ponctuelle — box unique pleine largeur (pas de flèche) */
#screen-2 .s2-date-single .s2-date-box {
  padding: var(--s-3) var(--s-4);
}

/* Erreur */
#screen-2 .form-error {
  font-size: 13px;
  color: var(--c-red);
  font-weight: 500;
  text-align: center;
  padding: var(--s-1) 0;
}


/* ─── Badge bêta ─────────────────────────────────────────────────────────── */
.s2-beta-badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-green-2);
  color: var(--c-green-0);
  padding: 3px 6px;
  border-radius: 100px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ─── Croix fermeture — coin supérieur droit de la modale ────────────────── */
.s2-modal-header { position: relative; }

.s2-modal-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-3);
  transform: none;
  z-index: 1;
}


/* ─── Hauteur min des deux vues — évite le saut lors du toggle ────────────── */
#screen-2 #ajouter-view,
#screen-2 #simu-view {
  min-height: 480px;
}