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

   Cache-bust version: 2026-04-30-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; }