/* SmokeLess Wealth — styles personnalisés */

/* -------------------------------------------------------------------------
   HTMX indicators (includeIndicatorStyles=false → on les définit ici)
------------------------------------------------------------------------- */
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Navigation bas de page (mobile-first)
------------------------------------------------------------------------- */
.bottom-nav {
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(56px + env(safe-area-inset-bottom, 0));
}

.bottom-nav .nav-link {
  color: var(--bs-secondary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.65rem;
  padding: 6px 8px;
  line-height: 1.2;
  gap: 2px;
  text-decoration: none;
}

.bottom-nav .nav-link i {
  font-size: 1.3rem;
}

.bottom-nav .nav-link.active {
  color: var(--bs-primary);
}

/* -------------------------------------------------------------------------
   Contenu principal — marges pour la bottom nav
------------------------------------------------------------------------- */
.main-content {
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  min-height: 100vh;
}

/* -------------------------------------------------------------------------
   Page de login
------------------------------------------------------------------------- */
.login-wrapper {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

/* -------------------------------------------------------------------------
   Icônes de taille fixe (remplace les style="font-size:..." inline)
------------------------------------------------------------------------- */
.icon-login-logo {
  font-size: 2.5rem;
}

.icon-stub {
  font-size: 3rem;
}

/* -------------------------------------------------------------------------
   Page onboarding
------------------------------------------------------------------------- */
.onboarding-wrapper {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
}

.onboarding-card {
  width: 100%;
  max-width: 480px;
}

.icon-onboarding-logo {
  font-size: 2.5rem;
}

/* -------------------------------------------------------------------------
   Boutons − / + de saisie (cible tactile ≥ 64 px)
------------------------------------------------------------------------- */
.btn-cig {
  width: 64px;
  height: 64px;
  font-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
}

/* Compteur central */
.cig-counter {
  font-size: 5rem;
  font-weight: 700;
  min-width: 110px;
  text-align: center;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Utilitaires
------------------------------------------------------------------------- */
.text-savings {
  color: var(--bs-success);
}

.text-neutral {
  color: var(--bs-secondary-color);
}

/* -------------------------------------------------------------------------
   Historique — saisie inline
------------------------------------------------------------------------- */
.input-history-cigs {
  max-width: 90px;
}