/* ============================================================================
   Portail eSIM — correctifs du mode sombre
   ----------------------------------------------------------------------------
   Problème corrigé : plusieurs surfaces de la PWA ont un fond clair codé en dur
   dans un attribut style (cartes d'état vide, pastilles, encadrés). En mode
   sombre, le thème force la couleur du texte en clair via des règles
   `body.theme-dark .card-body … { color: var(--pwa-text) !important }`, qui
   l'emportent sur la couleur inline. Résultat : du texte clair sur un fond
   resté clair, illisible — visible notamment sur /app/welcome avec la carte
   « Vous n'avez pas encore de eSIM ».

   Correctif : en mode sombre, ces surfaces claires deviennent des surfaces
   sombres, et la couleur d'accent passe à un vert lisible sur fond noir.
   Les fonds sont ciblés par leur valeur littérale dans l'attribut style, ce qui
   évite d'aller modifier une dizaine de vues Blade une par une.
   ========================================================================== */

body.theme-dark {
  /* Vert de marque éclairci : #04764E est illisible sur fond noir. */
  --ms-dark-accent:  #3ddc97;
  --ms-dark-surface: #1c1f1e;
  --ms-dark-raised:  rgba(255, 255, 255, .07);
  --ms-dark-text:    #e8eae9;
  --ms-dark-muted:   #9aa5a0;
}

/* ── 1. Carte d'état vide « Vous n'avez pas encore de eSIM » ──────────────── */
body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] {
  background: linear-gradient(135deg, #16201c, #121a17) !important;
  border: 1px solid rgba(61, 220, 151, .18) !important;
}

/* Le titre et le paragraphe de cette carte redeviennent lisibles. */
body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] h5,
body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] [style*="color:#04764E"] {
  color: var(--ms-dark-accent) !important;
}

body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] p,
body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] .text-muted {
  color: var(--ms-dark-muted) !important;
}

/* L'icône eSIM de la carte, dessinée en vert foncé. */
body.theme-dark [style*="linear-gradient(135deg,#f0faf5"] svg path {
  fill: var(--ms-dark-accent) !important;
}

/* ── 2. Surfaces claires génériques (encadrés, pastilles, vignettes) ──────── */
body.theme-dark [style*="background:#f0faf5"],
body.theme-dark [style*="background:#e8f5f0"],
body.theme-dark [style*="background:#f8f9fa"],
body.theme-dark [style*="background:#f5f5f5"],
body.theme-dark [style*="background-color:#f0faf5"],
body.theme-dark [style*="background-color:#e8f5f0"] {
  background: var(--ms-dark-raised) !important;
  color: var(--ms-dark-text) !important;
}

/* Ces surfaces portent souvent une couleur d'accent inline, écrasée par le
   thème sombre : on la rétablit dans sa version claire. */
body.theme-dark [style*="background:#f0faf5"][style*="color:#04764E"],
body.theme-dark [style*="background:#e8f5f0"][style*="color:#04764E"],
body.theme-dark [style*="background:#f0faf5"] [style*="color:#04764E"],
body.theme-dark [style*="background:#e8f5f0"] [style*="color:#04764E"] {
  color: var(--ms-dark-accent) !important;
}

/* ── 3. Encadrés d'alerte et de confirmation ──────────────────────────────── */
body.theme-dark [style*="background:#fff3cd"] {
  background: rgba(255, 193, 7, .16) !important;
}

body.theme-dark [style*="background:#ffe8e8"] {
  background: rgba(220, 53, 69, .18) !important;
  color: #ff8f9a !important;
}

/* Bulle d'accueil du support, jaune pâle par défaut. */
body.theme-dark [style*="background:#fdefc3"] {
  background: #2a2617 !important;
  color: var(--ms-dark-text) !important;
}

/* ── 4. Pastilles de statut blanches sur les cartes eSIM ──────────────────── */
/*    Fond blanc + texte coloré : lisible, on garde. On adoucit seulement le
      blanc pur, agressif sur une interface sombre. */
body.theme-dark [style*="background:#ffffff"][style*="border-radius:20px"] {
  background: #e8eae9 !important;
}

/* ── 5. Fenêtre modale blanche (confirmation de suppression d'eSIM) ───────── */
body.theme-dark [style*="background:#fff"][style*="border-radius:20px"][style*="max-width:340px"] {
  background: var(--ms-dark-surface) !important;
  color: var(--ms-dark-text) !important;
}

/* ── 6. Bouton flottant de support ────────────────────────────────────────── */
body.theme-dark .ms-float-chat {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

/* ── 7. Vert de marque utilisé comme couleur de TEXTE ──────────────────────
   #04764E est un vert foncé conçu pour du texte sur fond clair. Sur les
   surfaces sombres il tombe à 2,5:1 — les prix des forfaits et les boutons de
   catégorie du support étaient à peine lisibles. On le remplace par la version
   éclaircie, sauf sur les éléments qui gardent délibérément un fond clair
   (pastilles de statut blanches sur les cartes eSIM). */
body.theme-dark [style*="color:#04764E"]:not([style*="background:#fff"]):not([style*="background:#ffffff"]),
body.theme-dark [style*="color: #04764E"]:not([style*="background:#fff"]):not([style*="background:#ffffff"]) {
  color: var(--ms-dark-accent) !important;
}

/* Boutons à contour vert (catégories du support, actions secondaires). */
body.theme-dark .btn-outline-primary {
  color: var(--ms-dark-accent) !important;
  border-color: var(--ms-dark-accent) !important;
}

body.theme-dark .btn-outline-primary:active,
body.theme-dark .btn-outline-primary:focus {
  background: rgba(61, 220, 151, .14) !important;
  color: var(--ms-dark-accent) !important;
}

/* Bouton « Autre problème », gris ardoise illisible sur fond noir. */
body.theme-dark .btn[style*="color:#6c757d"],
body.theme-dark .btn[style*="color: #6c757d"] {
  color: #a8b2ae !important;
  border-color: #a8b2ae !important;
}

/* ── 8. État « en préparation » d'une commande ─────────────────────────────
   Le thème sombre passait le texte en #555 sur un fond #2a2a2a : 1,9:1. */
body.theme-dark .btn-order-wait {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--ms-dark-muted) !important;
}

/* ── 9. Vert de marque défini en feuille de style, pas en inline ───────────
   Certaines vues déclarent la couleur dans un bloc <style> plutôt que dans un
   attribut style : la règle 7 ne les atteint pas. On les reprend nommément. */
body.theme-dark .order-amount,
body.theme-dark .order-price,
body.theme-dark .plan-price,
body.theme-dark .text-primary {
  color: var(--ms-dark-accent) !important;
}

/* ── 10. Fond parasite derrière la cloche de notifications ─────────────────
   Le mode sombre applique un fond de pastille via un sélecteur par sous-chaîne,
   `body.theme-dark [class*="badge"]`. Le lien de la cloche porte la classe
   `notification-badge` : il était donc attrapé au passage et se retrouvait
   avec un carré gris derrière l'icône. Le vrai compteur, lui, est un <span>
   enfant et garde son fond orange. */
body.theme-dark a.notification-badge,
body.theme-dark .notification-badge {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Le compteur de notifications reste bien visible. */
body.theme-dark .notification-badge > .badge,
body.theme-dark .notification-badge > .rounded-pill {
  background-color: #FF8800 !important;
  color: #fff !important;
}