/* ============================================================
   ENDHAN — Design tokens
   Colors, type, spacing, radii, shadows, motion
   Source: Endhan Design System/colors_and_type.css

   Cache-bust version: 2026-08-03-1
   Bump this date+counter whenever this file changes.
   Reflect the same value in base templates (?v=YYYY-MM-DD-N) and in
   the Service Worker cache name to invalidate stale assets.
   ============================================================ */

/* Roboto — local woff2 (ttf en fallback navigateurs anciens) depuis
   /static/fonts/. Arial reste le fallback systeme pour le body (per charte
   graphique; no webfont). woff2 = ~56% plus leger que ttf (gain mobile/4G) ;
   les navigateurs modernes ne telechargent que le woff2 (1er format supporte).
   Subset: Regular / Medium / SemiBold / Bold only. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-Regular.deaeed0eb790.woff2") format('woff2'), url("../fonts/Roboto-Regular.678ba85b4704.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-Medium.306f9c11301a.woff2") format('woff2'), url("../fonts/Roboto-Medium.21030564b3bb.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Roboto-SemiBold.cd4f7889f785.woff2") format('woff2'), url("../fonts/Roboto-SemiBold.6f0903b5854d.ttf") format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Roboto-Bold.bba055fa02d5.woff2") format('woff2'), url("../fonts/Roboto-Bold.2dd437af13b1.ttf") format('truetype'); }

/* Roboto Condensed — for tight data labels / compact UI */
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto_Condensed-Regular.80932c42c457.woff2") format('woff2'), url("../fonts/Roboto_Condensed-Regular.dfc1ae64a82e.ttf") format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto_Condensed-Medium.1daccf4e6de1.woff2") format('woff2'), url("../fonts/Roboto_Condensed-Medium.a2b32e080b3e.ttf") format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Roboto_Condensed-Bold.cbcd54f5fa2a.woff2") format('woff2'), url("../fonts/Roboto_Condensed-Bold.ae3713c3fddc.ttf") format('truetype'); }

:root {
  /* ---------- Brand palette ---------- */
  --endhan-forest: #2D4A3E;        /* primary — vert forêt */
  --endhan-sage:   #3E6B57;        /* secondary — vert sauge */
  --endhan-gold:   #C9A84C;        /* accent — or */
  --endhan-gold-soft: #E6CE86;     /* gold tint for subtle fills */
  --endhan-gold-deep: #A88832;     /* gold pressed state */
  --endhan-cream:  #F2F2F2;        /* blanc cassé */

  /* ---------- Functional colors ---------- */
  --endhan-success: #4A8B6E;
  --endhan-warning: #D4A846;
  --endhan-error:   #C14A4A;
  --endhan-info:    #5A6B7A;

  /* ---------- Neutrals ---------- */
  --endhan-black:     #121212;
  --endhan-ink:       #1E2A26;     /* card on dark */
  --endhan-ink-2:     #263531;     /* elevated card */
  --endhan-gray-700:  #3A4744;
  --endhan-gray-500:  #6B7271;
  --endhan-gray-300:  #D9DBDA;
  --endhan-gray-100:  #EEEEEC;
  --endhan-white:     #FFFFFF;

  /* ---------- Semantic tokens — LIGHT mode (default) ---------- */
  --bg:             #F7F6F2;       /* warm off-white, softer than pure cream */
  --bg-elevated:    #FFFFFF;
  --bg-muted:       #EDECE7;
  --surface:        #FFFFFF;
  --surface-sunken: #F2F2F2;

  --fg:             #1E2A26;       /* near-black w/ green undertone */
  --fg-muted:       #4F5A57;
  --fg-subtle:      #6B7271;
  --fg-on-brand:    #FFFFFF;
  --fg-on-gold:     #1E2A26;

  --brand:          var(--endhan-forest);
  --brand-hover:    var(--endhan-sage);
  --accent:         var(--endhan-gold);
  --accent-hover:   var(--endhan-gold-deep);

  --border:         #E3E2DC;
  --border-strong:  #CFCEC6;
  --divider:        #ECEBE5;

  --success: var(--endhan-success);
  --warning: var(--endhan-warning);
  --error:   var(--endhan-error);
  --info:    var(--endhan-info);

  /* Money accents */
  --money-credit: var(--endhan-gold);
  --money-debit:  var(--endhan-error);

  /* ---------- Typography ---------- */
  --font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --font-body:    Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (mobile-first) */
  --fs-display: 32px;
  --fs-h1:      28px;
  --fs-h2:      22px;
  --fs-h3:      18px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-caption: 12px;

  --lh-display: 36px;
  --lh-h1: 32px;
  --lh-h2: 28px;
  --lh-h3: 24px;
  --lh-body-lg: 24px;
  --lh-body: 20px;
  --lh-caption: 16px;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- Spacing (multiples of 4) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;     /* buttons, inputs */
  --r-lg: 16px;     /* cards */
  --r-xl: 24px;     /* bottom sheets */
  --r-full: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(45,74,62,0.06);
  --shadow-2: 0 2px 8px rgba(45,74,62,0.08);
  --shadow-3: 0 8px 24px rgba(45,74,62,0.12);
  --shadow-gold-focus: 0 0 0 4px rgba(201,168,76,0.22);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
  --dur-celebration: 900ms;

  /* ---------- Layout ---------- */
  --mobile-w: 390px;
  --touch-min: 44px;
  --touch-rec: 48px;

  /* Page background pour les ecrans onboarding (.login, .otp, .reg, .kyc,
     .phone-cap). Distinct de --bg pour permettre le pure white en clair
     et la palette validee en sombre, tout en preservant --bg=#F7F6F2
     (cream) pour les ecrans qui s'en servent (splash, lang, prop). */
  --bg-onboarding: #FFFFFF;
}

/* ---------- Dark mode (validated design — fond pure dark) ---------- */
.theme-dark, [data-theme="dark"] {
  --bg:             #121212;
  --bg-elevated:    #1E2A26;
  --bg-muted:       #192421;
  --surface:        #1E2A26;
  --surface-sunken: #151D1A;
  --bg-onboarding:  #121212;

  --fg:             #F2F2F2;
  --fg-muted:       #C8CDCB;
  --fg-subtle:      #8D9491;
  --fg-on-brand:    #FFFFFF;
  --fg-on-gold:     #1E2A26;

  --brand:          var(--endhan-forest);
  --brand-hover:    var(--endhan-sage);

  --border:         #2D4A3E;
  --border-strong:  #3E6B57;
  --divider:        #24302B;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
}

/* ---------- Dark mode — variante foret (super admin) ---------- */
/* Reutilise les vars dark mais bascule le fond onboarding sur le vert
   forest ink (#1E2A26) au lieu du #121212 du design valide. Surface
   passe a un forest legerement plus eleve pour conserver l'elevation
   visible des cartes/popovers contre le fond. */
[data-theme="dark-alt"] {
  --bg:             #1E2A26;
  --bg-elevated:    #263531;
  --bg-muted:       #192421;
  --surface:        #263531;
  --surface-sunken: #1A2522;
  --bg-onboarding:  #1E2A26;

  --fg:             #F2F2F2;
  --fg-muted:       #C8CDCB;
  --fg-subtle:      #8D9491;
  --fg-on-brand:    #FFFFFF;
  --fg-on-gold:     #1E2A26;

  --brand:          var(--endhan-forest);
  --brand-hover:    var(--endhan-sage);

  --border:         #2D4A3E;
  --border-strong:  #3E6B57;
  --divider:        #24302B;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
}

/* ============================================================
   Base element styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0;
}
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-subtle); }

/* Monetary amounts — tabular nums, Roboto Bold */
.amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.amount--credit { color: var(--endhan-gold); }
.amount--debit  { color: var(--endhan-error); }

/* Overline / eyebrow */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ============================================================
   Component primitives
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--r-md);
  border: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-gold-focus); }

.btn--primary   { background: var(--endhan-forest); color: var(--endhan-white); }
.btn--primary:hover { background: var(--endhan-sage); }
.btn--gold      { background: var(--endhan-gold); color: var(--endhan-ink); }
.btn--gold:hover{ background: var(--endhan-gold-deep); }
.btn--secondary { background: transparent; border: 1.5px solid var(--endhan-forest); color: var(--endhan-forest); }
.btn--tertiary  { background: transparent; color: var(--endhan-forest); height: auto; padding: 0; }
.btn--tertiary:hover { text-decoration: underline; }
.btn--danger    { background: var(--endhan-error); color: #fff; }

[data-theme="dark"] .btn--secondary { border-color: var(--endhan-cream); color: var(--endhan-cream); }
[data-theme="dark"] .btn--tertiary  { color: var(--endhan-gold); }

.input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
}
.input::placeholder { color: var(--fg-subtle); }
.input:focus {
  outline: none;
  border-color: var(--endhan-gold);
  box-shadow: var(--shadow-gold-focus);
}
.input[aria-invalid="true"] { border-color: var(--endhan-error); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-2);
}
[data-theme="dark"] .card {
  background: var(--endhan-ink);
  border-color: var(--endhan-forest);
  box-shadow: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}
.badge--gold    { background: rgba(201,168,76,0.16); color: var(--endhan-gold-deep); }
.badge--forest  { background: rgba(45,74,62,0.10);  color: var(--endhan-forest); }
.badge--success { background: rgba(74,139,110,0.14); color: var(--endhan-success); }
.badge--error   { background: rgba(193,74,74,0.12); color: var(--endhan-error); }

[data-theme="dark"] .badge--gold    { background: rgba(201,168,76,0.18); color: var(--endhan-gold); }
[data-theme="dark"] .badge--forest  { background: rgba(62,107,87,0.30); color: #B9D3C4; }

/* ============================================================
   Onboarding-specific styles → Phase 2
   ============================================================ */


/* ============================================================
   App / Dashboard primitives — Flux 2
   Used by templates extending base_app.html. Atomic, props-only,
   no global context coupling (cf feedback_endhan_architecture_patterns).
   ============================================================ */

/* ---------- App shell — mobile-first: plein ecran sur telephone ---------- */
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  /* Pas de max-width ici : sur telephone l'app occupe tout l'ecran. */
  margin: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) calc(max(env(safe-area-inset-bottom, 0px), var(--space-3)) + 76px) env(safe-area-inset-left, 0);
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg); /* sur mobile les ecrans gèrent leur propre fond */
  color: var(--fg);
}
.app-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Pas de padding horizontal : chaque ecran (dash, notifs, etc.) gère
     ses propres marges internes. Un padding ici crée un bord sombre entre
     le shell et le contenu quand les fonds sont differents. */
  padding: 0;
  gap: 0;
}
body.has-app-shell { background: #0F1A14; }
@media (min-width: 768px) {
  /* Tablet/desktop mockup : carte centree avec fond foret. */
  .app-shell {
    max-width: var(--mobile-w);
    margin: var(--space-6) auto;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    min-height: calc(100vh - 2 * var(--space-6));
  }
}

/* ---------- Screen header ---------- */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) 0;
}
.screen-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
}
.screen-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.screen-header__back:hover { background: var(--bg-muted); }
.screen-header__back:focus-visible { outline: none; box-shadow: var(--shadow-gold-focus); }

/* ---------- Avatar button ---------- */
.avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--r-full);
  background: var(--endhan-forest);
  color: var(--endhan-cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--endhan-gold);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.avatar-btn:active { transform: scale(0.96); }
.avatar-btn:focus-visible { outline: none; box-shadow: var(--shadow-gold-focus); }
.avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-btn--sm { width: 28px; height: 28px; min-width: 28px; font-size: 12px; border-width: 1px; }
.avatar-btn--lg { width: 56px; height: 56px; min-width: 56px; font-size: 18px; border-width: 2px; }
.avatar-btn--xl { width: 80px; height: 80px; min-width: 80px; font-size: 24px; border-width: 2px; }
.avatar-btn--plain {
  background: var(--bg-muted);
  color: var(--fg);
  border-color: var(--border);
}

/* ---------- Chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.chip:hover { background: var(--bg-muted); }
.chip:focus-visible { outline: none; box-shadow: var(--shadow-gold-focus); }
.chip.is-selected {
  background: var(--endhan-forest);
  color: var(--endhan-cream);
  border-color: var(--endhan-forest);
}
.chip--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--endhan-gold);
  flex-shrink: 0;
}

/* ---------- Empty state ---------- */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.empty-state__body {
  font-size: var(--fs-body);
  color: var(--fg-muted);
  max-width: 280px;
  margin: 0;
}

/* ---------- Transaction row ---------- */
.tx-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-standard);
}
.tx-row:hover { background: var(--bg-muted); }
.tx-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tx-row__icon--credit { background: rgba(201,168,76,0.16); color: var(--endhan-gold-deep); }
.tx-row__icon--debit  { background: rgba(193,74,74,0.12); color: var(--endhan-error); }
[data-theme="dark"] .tx-row__icon--credit { color: var(--endhan-gold); }
.tx-row__body { flex: 1; min-width: 0; }
.tx-row__label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-row__sub {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  margin: 2px 0 0;
}
.tx-row__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* ---------- Gauge (circular score) ---------- */
.gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gauge-size, 120px);
  height: var(--gauge-size, 120px);
}
.gauge__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gauge__track { stroke: var(--bg-muted); fill: none; }
.gauge__fill  { stroke: var(--endhan-gold); fill: none; transition: stroke-dashoffset var(--dur-slow) var(--ease-emphasized); }
.gauge--success .gauge__fill { stroke: var(--endhan-success); }
.gauge--warning .gauge__fill { stroke: var(--endhan-warning); }
.gauge--error   .gauge__fill { stroke: var(--endhan-error); }
.gauge__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}
.gauge__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gauge__caption {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ---------- Skeleton (loading) ---------- */
.skel {
  display: block;
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--surface-sunken) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  height: 14px;
}
.skel--lg { height: 22px; }
.skel--block { height: 80px; border-radius: var(--r-lg); }
.skel--circle { width: 40px; height: 40px; border-radius: var(--r-full); }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Bottom navigation (app) ---------- */
.nav-app {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4) max(env(safe-area-inset-bottom, 0px), var(--space-3));
  z-index: 40;
  pointer-events: none;
  /* Degrade transparent -> var(--bg) sur les premiers 12px : masque le
     contenu qui défile sous la pill et remplit la safe-area iPhone sans
     créer de bord visible. */
  background: linear-gradient(to bottom, transparent, var(--bg) var(--space-3));
}
.nav-app__inner {
  pointer-events: auto;
  max-width: calc(var(--mobile-w) - 2 * var(--space-4));
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-1);
}
.nav-app__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2);
  min-height: 56px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg-subtle);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.nav-app__item:hover { color: var(--fg); }
.nav-app__item.is-active {
  color: var(--endhan-forest);
  background: rgba(45,74,62,0.08);
}
[data-theme="dark"] .nav-app__item.is-active {
  color: var(--endhan-gold);
  background: rgba(201,168,76,0.14);
}
.nav-app__icon { width: 22px; height: 22px; }
.nav-app__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -24px;
  border-radius: var(--r-full);
  background: var(--endhan-gold);
  color: var(--endhan-ink);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.nav-app__fab:hover { background: var(--endhan-gold-deep); }
.nav-app__fab:active { transform: scale(0.96); }
.nav-app__fab:focus-visible { outline: none; box-shadow: var(--shadow-gold-focus); }
.nav-app__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--endhan-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-app__item-wrap { position: relative; flex: 1; display: flex; }

/* ---------- Section heading ---------- */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-heading__title {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.section-heading__action {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--endhan-forest);
  text-decoration: none;
}
[data-theme="dark"] .section-heading__action { color: var(--endhan-gold); }

/* ---------- Stack utility for partials ---------- */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-3)); }
.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-5); }


/* ---------- Tontine cover (réutilisé partout : dashboard, detail, manage, recap) ---------- */
.tontine-cover {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--endhan-cream);
  flex-shrink: 0;
  overflow: hidden;
}
.tontine-cover svg { width: 60%; height: 60%; }
.tontine-cover--photo img { width: 100%; height: 100%; object-fit: cover; }
.tontine-cover--sm { width: 32px; height: 32px; border-radius: 8px; }
.tontine-cover--md { width: 48px; height: 48px; border-radius: 10px; }
.tontine-cover--lg { width: 64px; height: 64px; border-radius: 12px; }
.tontine-cover--xl { width: 96px; height: 96px; border-radius: 16px; }


/* ============================================================
   Messages Django (toasts) — partages par les deux coquilles
   ============================================================
   Ces regles vivaient uniquement dans le <style> de
   base_onboarding.html. base_app.html rendait donc bien le message et
   son auto-masquage en JS, mais sans aucune mise en forme : le texte
   sortait en haut a gauche de la page, hors du cadre de l'application,
   et passait pour du bruit. Toute redirection motivee par un message
   (« Cette tontine a deja demarre. », « Vous etes deja membre. »)
   paraissait donc silencieuse.

   Definies ici, elles s'appliquent partout : endhan-design.css est
   chargee par base_onboarding.html comme par base_app.html.

   z-index 60 : au-dessus de la barre du bas de l'application (40), sans
   quoi le toast passerait dessous sur telephone. */
.onb-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(calc(100vw - 2 * var(--space-5)), 420px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  box-shadow: var(--shadow-3);
  z-index: 60;
}
/* Dans l'application, les ecrans ont une barre de titre en haut : un message
   colle au bord la recouvre. Il est donc descendu sous elle — un message qui
   masque le nom de la tontine qu'on vient de rejoindre remplace une
   information par une autre au lieu de s'y ajouter. L'onboarding, qui n'a pas
   de barre de titre, garde la position d'origine. */
body.has-app-shell .onb-toast {
  top: calc(env(safe-area-inset-top, 0px) + 72px);
}

.onb-toast--error   { background: rgba(193, 74, 74, 0.96); color: #fff; }
.onb-toast--warning { background: rgba(176, 122, 46, 0.96); color: #fff; }
.onb-toast--success { background: rgba(74, 139, 110, 0.96); color: #fff; }
.onb-toast--info,
.onb-toast--debug   { background: rgba(45, 74, 62, 0.96); color: #fff; }

/* `hidden` sur un `<svg>` inline ne fait rien, et il faut le savoir.

   La regle `[hidden] { display: none }` des feuilles navigateur est declaree
   sous `@namespace url(http://www.w3.org/1999/xhtml)`. Un `<svg>` inline
   appartient a l'espace de noms SVG : la regle ne l'atteint pas, l'attribut
   reste pose et l'icone s'affiche quand meme.

   Le defaut se voyait sur la bascule « afficher le mot de passe » de
   l'inscription et de la connexion : l'oeil et l'oeil barre etaient rendus l'un
   sur l'autre, sur telephone comme sur grand ecran. Le script basculait bien
   l'attribut ; c'est le rendu qui l'ignorait.

   Pose ici et non dans un gabarit : c'est un correctif d'espace de noms, il
   vaut pour tout ecran qui masquera une icone de cette facon. */
svg[hidden] { display: none; }