/* ══════════════════════════════════════════════
   THÈMES SUPPLÉMENTAIRES COMPLETS — à charger APRÈS equilibre.css
   Activation : <html data-theme="ocean"> ou "menthe"
   Chaque thème redéfinit TOUT le système de couleurs :
     1. surfaces & textes          4. tons pastel (icônes, badges, tuiles)
     2. couleurs système           5. composantes RGB (bordures, ombres, pastilles)
     3. accent de navigation       6. sidebar desktop
   Les thèmes dark/light (equilibre.css) ne sont pas modifiés.

   💡 Révision "plus sobre" :
   - OCÉAN garde son identité bleu nuit mais le cyan néon d'origine
     (#38BDF8, glows à forte opacité) est remplacé par un bleu ardoise
     plus doux, avec des ombres/lueurs nettement atténuées.
   - MENTHE (clé data-theme inchangée pour ne rien casser côté JS/HTML)
     abandonne le vert-teal glacé pour une palette gris-bleu ("Ardoise
     claire") : blancs cassés, gris bleutés, accent bleu-gris discret.
   ══════════════════════════════════════════════ */

/* ════════ OCÉAN — sombre, bleu nuit sobre (ex-cyan néon) ════════ */
[data-theme="ocean"] {
  color-scheme: dark;

  /* 1. Surfaces & textes */
  --bg:              #16304A;
  --bg-grouped:      #0F2236;
  --bg-grouped-2:    #162E46;
  --bg-grouped-3:    #1F3E5C;
  --label:           #DCE8F5;
  --label-2:         rgba(200, 220, 242, 0.74);
  --label-3:         rgba(200, 220, 242, 0.50);
  --label-4:         rgba(200, 220, 242, 0.22);
  --fill:            rgba(120, 145, 170, 0.30);
  --fill-2:          rgba(120, 145, 170, 0.24);
  --fill-3:          rgba(120, 145, 170, 0.17);
  --fill-4:          rgba(120, 145, 170, 0.11);
  --sep:             rgba(140, 165, 190, 0.24);
  --sep-opaque:      #2C4B69;

  /* 2. Couleurs système — bleu/indigo/violet/teal restent sobres ;
     vert/jaune/rouge (statuts) sont volontairement vifs pour rester
     lisibles dans badges, fiches, graphs et détails */
  --blue:            #5B8DB8;
  --green:           #22C55E;
  --red:             #FB4D5E;
  --orange:          #FBBF24;
  --indigo:          #7C8CB0;
  --purple:          #9A87AE;
  --teal:            #5F9AA3;

  /* 3. Navigation */
  --nav-segment-bg:          #0F2236;
  --nav-segment-active:      #1F3E5C;
  --nav-segment-active-text: #9EC2DE;

  /* 4. Tons pastel */
  --pastel-blue-bg:    rgba(91,141,184,0.20);   --pastel-blue-text:   #B7D6EC;
  --pastel-green-bg:   rgba(34,197,94,0.28);    --pastel-green-text:  #86EFAC;
  --pastel-orange-bg:  rgba(251,191,36,0.28);   --pastel-orange-text: #FDE68A;
  --pastel-purple-bg:  rgba(154,135,174,0.21);  --pastel-purple-text: #D3C3E0;
  --pastel-pink-bg:    rgba(251,77,94,0.26);    --pastel-pink-text:   #FCA5AE;
  --pastel-teal-bg:    rgba(95,154,163,0.20);   --pastel-teal-text:   #BEDBDF;
  --pastel-coral-bg:   rgba(196,133,110,0.17);  --pastel-coral-text:  #E4C0AD;
  --pastel-rose-bg:    rgba(190,130,155,0.17);  --pastel-rose-text:   #DEBECE;
  --pastel-sky-bg:     rgba(158,194,222,0.17);  --pastel-sky-text:    #CFE3F0;
  --pastel-slate-bg:   rgba(148,163,184,0.17);  --pastel-slate-text:  #C4D0DE;

  /* 5. Composantes RGB */
  --rgb-blue: 91 141 184;    --rgb-green: 34 197 94;    --rgb-red: 251 77 94;
  --rgb-orange: 251 191 36;  --rgb-teal: 95 154 163;    --rgb-lavender: 158 194 222;
  --rgb-purple: 154 135 174;
  --rgb-p-blue: 158 194 222; --rgb-p-green: 134 239 172; --rgb-p-orange: 253 230 138; --rgb-p-purple: 188 169 203;
  --rgb-l-blue: 91 141 184;  --rgb-l-green: 34 197 94;  --rgb-l-orange: 251 191 36;
  --rgb-l-pink: 251 77 94;   --rgb-l-teal: 95 154 163;
}

/* ════════ MENTHE — clair, gris-bleu "ardoise" (ex vert-teal glacé) ════════ */
[data-theme="menthe"] {
  color-scheme: light;

  /* 1. Surfaces & textes — canvas nettement plus bleu-gris que le thème
     Clair standard (#F2F2F7), pour que l'identité "Ardoise" se voie
     même sans comparer les deux côte à côte */
  --bg:              #DCE3EE;
  --bg-grouped:      #F6F9FC;
  --bg-grouped-2:    #C4D0DF;
  --bg-grouped-3:    #A9B9CE;
  --label:           #2B4C7E;
  --label-2:         rgba(43, 76, 126, 0.74);
  --label-3:         rgba(43, 76, 126, 0.52);
  --label-4:         rgba(43, 76, 126, 0.24);
  --fill:            rgba(74, 96, 128, 0.24);
  --fill-2:          rgba(74, 96, 128, 0.17);
  --fill-3:          rgba(74, 96, 128, 0.12);
  --fill-4:          rgba(74, 96, 128, 0.08);
  --sep:             rgba(43, 76, 126, 0.22);
  --sep-opaque:      #C2CFE0;

  /* 2. Couleurs système — bleu/indigo/violet/teal restent sobres ;
     vert/jaune/rouge (statuts) sont volontairement vifs pour rester
     lisibles dans badges, fiches, graphs et détails */
  --blue:            #4A6FA5;
  --green:           #16A34A;
  --red:             #DC2626;
  --orange:          #F59E0B;
  --indigo:          #6B7AA1;
  --purple:          #7E71A0;
  --teal:            #4F8290;

  /* 3. Navigation */
  --nav-segment-bg:          #E4E9F0;
  --nav-segment-active:      #FFFFFF;
  --nav-segment-active-text: #3E5A80;

  /* 4. Tons pastel */
  --pastel-blue-bg:    rgba(74,111,165,0.16);   --pastel-blue-text:   #2F4D75;
  --pastel-green-bg:   rgba(22,163,74,0.20);    --pastel-green-text:  #15803D;
  --pastel-orange-bg:  rgba(245,158,11,0.22);   --pastel-orange-text: #92620A;
  --pastel-purple-bg:  rgba(126,113,160,0.16);  --pastel-purple-text: #4C4377;
  --pastel-pink-bg:    rgba(220,38,38,0.18);    --pastel-pink-text:   #991B1B;
  --pastel-teal-bg:    rgba(79,130,144,0.18);   --pastel-teal-text:   #244A54;
  --pastel-coral-bg:   rgba(180,110,90,0.15);   --pastel-coral-text:  #7A4433;
  --pastel-rose-bg:    rgba(160,95,125,0.15);   --pastel-rose-text:   #6E3C53;
  --pastel-sky-bg:     rgba(74,111,165,0.13);   --pastel-sky-text:    #385880;
  --pastel-slate-bg:   rgba(100,116,139,0.15);  --pastel-slate-text:  #3C4859;

  /* 5. Composantes RGB */
  --rgb-blue: 74 111 165;    --rgb-green: 22 163 74;    --rgb-red: 220 38 38;
  --rgb-orange: 245 158 11;  --rgb-teal: 79 130 144;    --rgb-lavender: 107 122 161;
  --rgb-purple: 126 113 160;
  --rgb-p-blue: 74 111 165;  --rgb-p-green: 22 163 74;  --rgb-p-orange: 245 158 11; --rgb-p-purple: 107 90 148;
  --rgb-l-blue: 74 111 165;  --rgb-l-green: 22 163 74;  --rgb-l-orange: 245 158 11;
  --rgb-l-pink: 220 38 38;   --rgb-l-teal: 79 130 144;
}

/* ════════ 6. Sidebar desktop (≥700px) ════════ */
@media (min-width: 700px) {
  [data-theme="ocean"] .tabbar {
    background: #0B1A2B;
    border-right-color: rgba(140,165,190,0.10);
  }
  [data-theme="ocean"] .tabbar-item { color: rgba(212,224,235,0.42); }
  [data-theme="ocean"] .tabbar-item:hover { background: rgba(140,165,190,0.07); color: rgba(212,224,235,0.78); }

  [data-theme="menthe"] .tabbar {
    background: #1B2431;
    border-right-color: rgba(255,255,255,0.06);
  }
  [data-theme="menthe"] .tabbar-item.active { background: rgb(var(--rgb-blue) / 0.20); }
}

/* Mobile : le fond de la tabbar suit la surface du thème (déjà var(--bg-grouped)),
   rien à ajouter. Barre système : voir __THEME_BAR dans index.html. */


/* ══════════════════════════════════════════════════════════════
   7. COMPOSANTS — chaque thème garde sa propre signature visuelle,
      mais avec des effets (lueurs, ombres) nettement plus discrets
      OCÉAN  : angles nets, cartes en verre sombre, léger halo bleu ardoise
      MENTHE : angles arrondis, icônes rondes, ombres gris-bleu très douces
   (uniquement scopé [data-theme="ocean|menthe"] → dark/light intacts)
   ══════════════════════════════════════════════════════════════ */

/* ── Fond d'écran : halos de couleur, très atténués ── */
html[data-theme="ocean"] body {
  background:
    radial-gradient(110% 55% at 50% -12%, rgb(var(--rgb-blue) / 0.10), transparent 62%),
    radial-gradient(80% 40% at 100% 105%, rgb(var(--rgb-purple) / 0.07), transparent 60%),
    var(--bg) !important;
}
html[data-theme="menthe"] body {
  background:
    radial-gradient(110% 45% at 100% -8%, rgb(var(--rgb-blue) / 0.14), transparent 62%),
    radial-gradient(90% 40% at 0% 108%, rgb(var(--rgb-teal) / 0.12), transparent 60%),
    var(--bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* ── En-tête : opaque, même couleur que la tabbar (voir index.html) ── */

/* ── Cartes / blocs ── */
[data-theme="ocean"] .encart-bloc,
[data-theme="ocean"] .entry-list > .entry-item,
[data-theme="ocean"] .cat-breakdown-card,
[data-theme="ocean"] .chart-wrap,
[data-theme="ocean"] .reminders-list,
[data-theme="ocean"] .resa-card,
[data-theme="ocean"] .home-widget,
[data-theme="ocean"] .mstat-encart,
[data-theme="ocean"] .db-table-scroll {
  background: linear-gradient(160deg, #122840 0%, #0C1D2F 100%);
  border: 1px solid rgb(var(--rgb-blue) / 0.28);
  border-radius: 10px;
  box-shadow: 0 10px 24px -16px rgb(var(--rgb-blue) / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.04);
}
[data-theme="ocean"] .home-widget { border-radius: 14px; }
[data-theme="ocean"] .repartition-table,
[data-theme="ocean"] .icon-card,
[data-theme="ocean"] .prop-card,
[data-theme="ocean"] .eqhub-tile { border-radius: 10px; }
[data-theme="ocean"] .eqhub-tile,
[data-theme="ocean"] .prop-card {
  box-shadow: 0 8px 20px -14px rgb(var(--rgb-blue) / 0.55);
  border: 1px solid color-mix(in srgb, var(--et-color, var(--pc-color, var(--blue))) 18%, transparent);
}

[data-theme="menthe"] .encart-bloc,
[data-theme="menthe"] .entry-list > .entry-item,
[data-theme="menthe"] .cat-breakdown-card,
[data-theme="menthe"] .chart-wrap,
[data-theme="menthe"] .reminders-list,
[data-theme="menthe"] .resa-card,
[data-theme="menthe"] .home-widget,
[data-theme="menthe"] .mstat-encart,
[data-theme="menthe"] .db-table-scroll {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 100%);
  border: 1px solid rgb(var(--rgb-blue) / 0.12);
  border-radius: 16px;
  box-shadow: 0 10px 22px -14px rgb(var(--rgb-blue) / 0.45);
}
[data-theme="menthe"] .home-widget { border-radius: 20px; }
[data-theme="menthe"] .repartition-table,
[data-theme="menthe"] .icon-card,
[data-theme="menthe"] .prop-card,
[data-theme="menthe"] .eqhub-tile,
[data-theme="menthe"] .field input,
[data-theme="menthe"] .field select,
[data-theme="menthe"] .field textarea { border-radius: 14px; }
[data-theme="menthe"] .eqhub-tile,
[data-theme="menthe"] .prop-card {
  border: 1px solid color-mix(in srgb, var(--et-color, var(--pc-color, var(--blue))) 15%, transparent);
  box-shadow: 0 8px 18px -12px rgb(var(--rgb-blue) / 0.42);
}
[data-theme="menthe"] .filter-chip,
[data-theme="menthe"] .status-badge,
[data-theme="menthe"] .btn-primary,
[data-theme="menthe"] .btn-modal { border-radius: 999px; }
[data-theme="menthe"] .saisie-sheet { border-radius: 24px 24px 0 0; }

/* ── Icônes : Océan = carrés discrets ; Menthe = pastilles rondes ── */
[data-theme="ocean"] .entry-ico,
[data-theme="ocean"] .prop-card-ico,
[data-theme="ocean"] .home-widget-ico {
  border-radius: 9px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 42%, transparent),
    0 0 12px -3px color-mix(in srgb, currentColor 55%, transparent);
}
[data-theme="ocean"] .eqhub-tile-ico svg {
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent));
}
[data-theme="ocean"] .tabbar-item.active svg {
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 45%, transparent));
}
[data-theme="menthe"] .entry-ico,
[data-theme="menthe"] .prop-card-ico,
[data-theme="menthe"] .home-widget-ico {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 38%, transparent);
}
[data-theme="menthe"] [class*="solid-"] { filter: saturate(1.0); }

/* ── Titres & libellés en accent ── */
[data-theme="ocean"] .section-title,
[data-theme="ocean"] .month-group-title,
[data-theme="ocean"] .bilan-titre,
[data-theme="ocean"] .field label { color: var(--nav-segment-active-text); letter-spacing: 0.6px; }
[data-theme="menthe"] .section-title,
[data-theme="menthe"] .month-group-title,
[data-theme="menthe"] .bilan-titre,
[data-theme="menthe"] .field label { color: var(--nav-segment-active-text); }
[data-theme="menthe"] .year-group-title { letter-spacing: -0.4px; }

/* ── Boutons & FAB : dégradés d'accent, plus sourds ── */
[data-theme="ocean"] .btn-primary,
[data-theme="ocean"] .btn-modal.save,
[data-theme="ocean"] .h-save-btn,
[data-theme="ocean"] .fab-ecriture {
  background: linear-gradient(135deg, #5B8DB8 0%, #7C8CB0 100%);
  color: #0B121A;
  box-shadow: 0 6px 16px -8px rgb(var(--rgb-blue) / 0.45);
}
[data-theme="ocean"] .fab-ecriture svg { stroke: #0B121A; color: #0B121A; }
[data-theme="menthe"] .btn-primary,
[data-theme="menthe"] .btn-modal.save,
[data-theme="menthe"] .h-save-btn,
[data-theme="menthe"] .fab-ecriture {
  background: linear-gradient(135deg, #4A6FA5 0%, #4F8290 100%);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgb(var(--rgb-blue) / 0.40);
}

/* ── Barre d'onglets mobile : même verre que le header (mobile uniquement,
   pour ne pas écraser la sidebar desktop) ── */
@media (max-width: 699px) {
  [data-theme="ocean"] .tabbar,
  [data-theme="menthe"] .tabbar {
    background: color-mix(in srgb, var(--bg-grouped) 78%, transparent);
    border-top-color: var(--sep-opaque);
  }
}

/* ── Puces, segments, badges actifs ── */
[data-theme="ocean"] .filter-chip,
[data-theme="ocean"] .segmented-control,
[data-theme="ocean"] .nav-segmented { border-color: rgb(var(--rgb-blue) / 0.20); }
[data-theme="ocean"] .filter-chip.active,
[data-theme="ocean"] .topbar-filter-item.active {
  background: linear-gradient(135deg, rgb(var(--rgb-blue) / 0.20), rgb(var(--rgb-purple) / 0.16));
  border-color: var(--blue);
}
[data-theme="menthe"] .filter-chip.active,
[data-theme="menthe"] .topbar-filter-item.active {
  background: linear-gradient(135deg, rgb(var(--rgb-blue) / 0.14), rgb(var(--rgb-teal) / 0.14));
  border-color: var(--blue);
}
[data-theme="menthe"] .segmented-control,
[data-theme="menthe"] .nav-segmented { border-radius: 999px; }
[data-theme="menthe"] .segmented-item { border-radius: 999px; }

/* ── Montants positifs/négatifs : lisibles sans surligner ── */
[data-theme="ocean"] .entry-amount,
[data-theme="ocean"] .bilan-montant { text-shadow: 0 0 10px rgb(var(--rgb-blue) / 0.30); }

/* ── Couleur de texte : suit toujours --label du thème ── */
[data-theme="ocean"] body,
[data-theme="menthe"] body { color: var(--label); }


/* ══════════════════════════════════════════════════════════════
   DARK — "Graphite Blue" (data-theme="dark")
   Palette unifiée : encre bleutée + accent indigo/violet unique.
   Tout le système est redéfini d'un bloc pour que surfaces, pastels,
   statuts, accents et composants soient issus de la même famille :
     1. surfaces & textes        4. tons pastel
     2. couleurs système         5. composantes RGB
     3. navigation               6. composants (fond, cartes, boutons…)
   Aucun orange. Les listes (.entry-item, .reminders-list…) gardent le
   style de base d'equilibre.css, simplement recoloré par les variables.
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  color-scheme: dark;

  /* 1. Surfaces & textes — 4 niveaux d'élévation, même teinte bleutée */
  --bg:              #0B0D12;
  --bg-grouped:      #141821;
  --bg-grouped-2:    #1C212C;
  --bg-grouped-3:    #262C3A;
  --label:           #FFFFFF;
  --label-2:         rgba(226, 232, 246, 0.90);
  --label-3:         rgba(226, 232, 246, 0.72);
  --label-4:         rgba(226, 232, 246, 0.46);
  --fill:            rgba(130, 140, 168, 0.32);
  --fill-2:          rgba(130, 140, 168, 0.26);
  --fill-3:          rgba(130, 140, 168, 0.18);
  --fill-4:          rgba(130, 140, 168, 0.12);
  --sep:             rgba(150, 160, 190, 0.20);
  --sep-opaque:      #232836;

  /* 2. Couleurs système — luminosité homogène, accent indigo */
  --blue:            #5B9DFF;
  --green:           #34D399;
  --red:             #FB7185;
  --orange:          #FBBF24;
  --indigo:          #7AA2FF;
  --purple:          #B794F6;
  --teal:            #2DD4BF;

  /* 3. Navigation */
  --nav-segment-bg:          #0B1730;
  --nav-segment-active:      #27447A;
  --nav-segment-active-text: #9CC9FF;

  /* 4. Tons pastel — même saturation, fonds à ~15 % */
  --pastel-blue-bg:    rgba(91,157,255,0.16);   --pastel-blue-text:   #9CC9FF;
  --pastel-green-bg:   rgba(52,211,153,0.15);   --pastel-green-text:  #6EE7B7;
  --pastel-orange-bg:  rgba(251,191,36,0.15);   --pastel-orange-text: #FCD34D;
  --pastel-purple-bg:  rgba(183,148,246,0.16);  --pastel-purple-text: #D2B8FB;
  --pastel-pink-bg:    rgba(251,113,133,0.15);  --pastel-pink-text:   #FDA4AF;
  --pastel-teal-bg:    rgba(45,212,191,0.15);   --pastel-teal-text:   #5EEAD4;
  --pastel-coral-bg:   rgba(255,158,143,0.12);  --pastel-coral-text:  #FF9E8F;
  --pastel-rose-bg:    rgba(245,163,199,0.12);  --pastel-rose-text:   #F5A3C7;
  --pastel-sky-bg:     rgba(142,197,255,0.12);  --pastel-sky-text:    #8EC5FF;
  --pastel-slate-bg:   rgba(167,180,204,0.12);  --pastel-slate-text:  #A7B4CC;

  /* 5. Composantes RGB */
  --rgb-blue: 91 157 255;   --rgb-green: 52 211 153;   --rgb-red: 251 113 133;
  --rgb-orange: 251 191 36;  --rgb-teal: 45 212 191;    --rgb-lavender: 100 150 255;
  --rgb-purple: 183 148 246;
  --rgb-p-blue: 120 175 255; --rgb-p-green: 110 231 183; --rgb-p-orange: 252 211 77; --rgb-p-purple: 210 184 251;
  --rgb-l-blue: 91 157 255; --rgb-l-green: 52 211 153;  --rgb-l-orange: 251 191 36;
  --rgb-l-pink: 251 113 133; --rgb-l-teal: 45 212 191;
}

/* ── Sidebar desktop ── */
@media (min-width: 700px) {
  [data-theme="dark"] .tabbar {
    background: #080A0F;
    border-right: 0.5px solid rgba(255,255,255,0.06);
    box-shadow: none;
  }
  [data-theme="dark"] .tabbar-item { color: rgba(222,228,242,0.45); }
  [data-theme="dark"] .tabbar-item:hover { background: rgba(255,255,255,0.05); color: rgba(222,228,242,0.80); }
  [data-theme="dark"] .tabbar-item.active { background: rgb(var(--rgb-blue) / 0.16); color: #fff; }
}

/* ── Fond d'écran : halos indigo/teal très discrets ── */
html[data-theme="dark"] body {
  background:
    radial-gradient(90% 40% at 85% -10%, rgb(var(--rgb-blue) / 0.12), transparent 62%),
    radial-gradient(80% 36% at 0% 108%, rgb(var(--rgb-teal) / 0.07), transparent 60%),
    var(--bg) !important;
}

/* ── Blocs : cartes "verre" surélevées au-dessus du fond ──
   Plus claires que --bg, liseré lumineux en haut, ombre douce,
   cellules internes translucides. Texte et statuts hérités du thème. */
[data-theme="dark"] :is(.encart-bloc, .home-widget, .resa-card, .chart-wrap) {
  background: linear-gradient(160deg, #1A1F2B 0%, #121620 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 30px -18px rgba(0,0,0,0.85);

  --bg-grouped:   rgba(255,255,255,0.04);
  --bg-grouped-2: rgba(255,255,255,0.06);
  --sep-opaque:   rgba(255,255,255,0.09);
}
[data-theme="dark"] .home-widget { border-radius: 20px; }

/* Liseré d'accent par widget d'accueil */
[data-theme="dark"] .home-widget[data-widget="comptabilite"] { border-color: rgb(var(--rgb-p-blue) / 0.28); }
[data-theme="dark"] .home-widget[data-widget="calendrier"]   { border-color: rgb(var(--rgb-p-green) / 0.26); }
[data-theme="dark"] .home-widget[data-widget="condo"]        { border-color: rgb(var(--rgb-teal) / 0.26); }
[data-theme="dark"] .home-widget[data-widget="routers"]      { border-color: rgb(var(--rgb-p-purple) / 0.28); }

/* ── Listes / rows (Indivision, Historique, Synthèse dépliable, Base de
   données, mois stats…) : plus claires que le fond ET que les blocs
   pour rester bien lisibles ── */
[data-theme="dark"] .entry-list > .entry-item,
[data-theme="dark"] .cat-breakdown-card,
[data-theme="dark"] .reminders-list,
[data-theme="dark"] .mstat-encart,
[data-theme="dark"] .db-table-scroll,
[data-theme="dark"] .rt-day-cell,
[data-theme="dark"] .rt-legend-item {
  background: #232A38;
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .entry-item.is-prev {
  background: linear-gradient(90deg, #232A38 0%, rgb(var(--rgb-teal) / 0.10) 100%);
  border-color: rgb(var(--rgb-teal) / 0.28);
}
[data-theme="dark"] .reminders-row:active,
[data-theme="dark"] .entry-item:active { background: #2C3446; }
[data-theme="dark"] .reminders-row + .reminders-row { border-top-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .poste-row { border-bottom-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cat-breakdown-card .entry-item { background: transparent; box-shadow: none; }
[data-theme="dark"] .db-table th { background: #2C3446; }
[data-theme="dark"] .db-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .entry-ico:not([class*="solid-"]) { background: #2E3648; }

/* ── Cellules colorées dans les encarts (répartition, stats du mois, KPI
   accueil) : teintes nettement plus saturées, libellé + valeur colorés ── */
[data-theme="dark"] .repartition-table { border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .repartition-cell:not(:last-child) { border-right-color: rgba(255,255,255,0.14); }

[data-theme="dark"] .repartition-cell.r-red    { background: rgb(var(--rgb-red) / 0.22); }
[data-theme="dark"] .repartition-cell.r-green  { background: rgb(var(--rgb-green) / 0.22); }
[data-theme="dark"] .repartition-cell.r-blue   { background: rgb(var(--rgb-blue) / 0.24); }
[data-theme="dark"] .repartition-cell.r-orange { background: rgb(var(--rgb-orange) / 0.22); }
[data-theme="dark"] .repartition-cell.r-red    .repartition-label,
[data-theme="dark"] .repartition-cell.r-red    .repartition-valeur { color: var(--pastel-pink-text); }
[data-theme="dark"] .repartition-cell.r-green  .repartition-label,
[data-theme="dark"] .repartition-cell.r-green  .repartition-valeur { color: var(--pastel-green-text); }
[data-theme="dark"] .repartition-cell.r-blue   .repartition-label,
[data-theme="dark"] .repartition-cell.r-blue   .repartition-valeur { color: var(--pastel-blue-text); }
[data-theme="dark"] .repartition-cell.r-orange .repartition-label,
[data-theme="dark"] .repartition-cell.r-orange .repartition-valeur { color: var(--pastel-orange-text); }

[data-theme="dark"] .mstat-cell.mstat-red   { background: rgb(var(--rgb-red) / 0.22); }
[data-theme="dark"] .mstat-cell.mstat-green { background: rgb(var(--rgb-green) / 0.22); }
[data-theme="dark"] .mstat-cell.mstat-red   .mstat-label,
[data-theme="dark"] .mstat-cell.mstat-red   .mstat-value { color: var(--pastel-pink-text); opacity: 1; }
[data-theme="dark"] .mstat-cell.mstat-green .mstat-label,
[data-theme="dark"] .mstat-cell.mstat-green .mstat-value { color: var(--pastel-green-text); opacity: 1; }

[data-theme="dark"] .home-kpi:has(.c-red)    { background: rgb(var(--rgb-red) / 0.22);   border-color: rgb(var(--rgb-red) / 0.40); }
[data-theme="dark"] .home-kpi:has(.c-green)  { background: rgb(var(--rgb-green) / 0.22); border-color: rgb(var(--rgb-green) / 0.40); }
[data-theme="dark"] .home-kpi:has(.c-orange) { background: rgb(var(--rgb-orange) / 0.22); border-color: rgb(var(--rgb-orange) / 0.40); }
[data-theme="dark"] .home-kpi:has(.c-blue)   { background: rgb(var(--rgb-blue) / 0.24);  border-color: rgb(var(--rgb-blue) / 0.42); }
[data-theme="dark"] .home-kpi:has(.c-red)    .home-kpi-value { color: var(--pastel-pink-text); }
[data-theme="dark"] .home-kpi:has(.c-green)  .home-kpi-value { color: var(--pastel-green-text); }

[data-theme="dark"] .bd-amount-chip.bd-amt-pos,
[data-theme="dark"] .month-total-credit { background: rgb(var(--rgb-green) / 0.20); border-color: rgb(var(--rgb-green) / 0.40); }
[data-theme="dark"] .bd-amount-chip.bd-amt-neg,
[data-theme="dark"] .month-total-debit  { background: rgb(var(--rgb-red) / 0.20);   border-color: rgb(var(--rgb-red) / 0.40); }

/* ── Icônes & tuiles ── */
[data-theme="dark"] .entry-ico,
[data-theme="dark"] .prop-card-ico,
[data-theme="dark"] .home-widget-ico { border-radius: 11px; }
[data-theme="dark"] .eqhub-tile,
[data-theme="dark"] .prop-card { border-color: color-mix(in srgb, var(--et-color, var(--pc-color, var(--blue))) 20%, transparent); }

/* ── Titres / libellés ── */
[data-theme="dark"] .section-title,
[data-theme="dark"] .month-group-title,
[data-theme="dark"] .bilan-titre,
[data-theme="dark"] .field label { color: var(--nav-segment-active-text); letter-spacing: 0.7px; }

/* ── Boutons & FAB : dégradé indigo → violet ── */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-modal.save,
[data-theme="dark"] .h-save-btn,
[data-theme="dark"] .fab-ecriture {
  background: linear-gradient(135deg, #4A8DF5 0%, #2F73E6 100%);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgb(var(--rgb-blue) / 0.55);
}
[data-theme="dark"] .fab-ecriture svg { stroke: #fff; color: #fff; }

/* ── Puces & segments actifs ── */
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .topbar-filter-item.active {
  background: linear-gradient(135deg, rgb(var(--rgb-blue) / 0.20), rgb(var(--rgb-teal) / 0.12));
  border-color: var(--blue);
}

/* ── Topbar + Tabbar HARMONISÉES : même surface (--chrome-bg), même filet
   bleuté, même ombre (inversée pour la tabbar). Plus claires que le fond
   de page, et d'une teinte différente du rail des segmented controls
   (navy) pour que ce dernier ressorte dans la topbar. Sélecteurs de
   index.html : .app-header-bar (topbar) et .tabbar (mobile). ── */
[data-theme="dark"] {
  --chrome-bg: #181E2B;
  --chrome-line: rgb(var(--rgb-blue) / 0.26);
}
/* Bandeau encoche (heure / 5G) : même teinte que la topbar */
[data-theme="dark"] .ios-safe-top-fill { background: var(--chrome-bg); }
[data-theme="dark"] .app-header-bar {
  background: var(--chrome-bg) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.85) !important;
}
@media (max-width: 699px) {
  [data-theme="dark"] .tabbar {
    background: var(--chrome-bg) !important;
    border-top: 1px solid var(--chrome-line) !important;
    box-shadow: 0 -8px 22px -10px rgba(0,0,0,0.85) !important;
  }
}

/* ── Segmented controls : rail creusé (plus sombre que le fond) + pastille
   active bleutée, bien détachée ── */
[data-theme="dark"] .segmented-control,
[data-theme="dark"] .nav-segmented {
  background: var(--nav-segment-bg);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.65);
}
[data-theme="dark"] .segmented-item { color: var(--label-2); }
[data-theme="dark"] .segmented-item.active-status,
[data-theme="dark"] .segmented-item.active-status-cyan,
[data-theme="dark"] .segmented-item.active-debit,
[data-theme="dark"] .segmented-item.active-credit,
[data-theme="dark"] .segmented-item.active-owner {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 3px 8px -2px rgba(0,0,0,0.7);
}
[data-theme="dark"] .segmented-item.active-status {
  background: var(--nav-segment-active);
  color: #fff;
}