:root {
  --color-primary: #04a59d;
  --color-secondary: #171717;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Bleu marine des dégradés (sidebar, boutons primaires, écrans d'auth) */
  --color-navy: #171717;

  /* Remplace toutes les teintes "vert" (succès, gains, ...) du projet */
  --color-blue: #0477a5;
  --color-blue-rgb: 4, 146, 165;
  --color-blue-hover: #037985;

  /* Remplace toutes les teintes "rouge" (danger, pertes, ...) du projet */
  --color-grenat: #7c1f25;
  --color-grenat-rgb: 124, 31, 37;
  --color-grenat-hover: #b23640;

  /* Capital (ex "solde d'ajustement") : teinte or/ambre dédiée */
  --color-gold: #12a786;
  --color-gold-rgb: 184, 134, 11;
}

/* ==========================================================================
   Remplacement global vert -> bleu / rouge -> grenat pour les classes
   utilitaires Bootstrap (badges, textes, boutons, alertes)
   ========================================================================== */

.text-success {
  color: var(--color-blue) !important;
}
.bg-success {
  background-color: var(--color-blue) !important;
}
.border-success {
  border-color: var(--color-blue) !important;
}

.text-danger {
  color: var(--color-grenat) !important;
}
.bg-danger {
  background-color: var(--color-grenat) !important;
}
.border-danger {
  border-color: var(--color-grenat) !important;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-blue);
  --bs-btn-border-color: var(--color-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-blue-hover);
  --bs-btn-hover-border-color: var(--color-blue-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-blue-hover);
  --bs-btn-active-border-color: var(--color-blue-hover);
  --bs-btn-focus-shadow-rgb: var(--color-blue-rgb);
  --bs-btn-disabled-bg: var(--color-blue);
  --bs-btn-disabled-border-color: var(--color-blue);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-grenat);
  --bs-btn-border-color: var(--color-grenat);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-grenat-hover);
  --bs-btn-hover-border-color: var(--color-grenat-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-grenat-hover);
  --bs-btn-active-border-color: var(--color-grenat-hover);
  --bs-btn-focus-shadow-rgb: var(--color-grenat-rgb);
  --bs-btn-disabled-bg: var(--color-grenat);
  --bs-btn-disabled-border-color: var(--color-grenat);
}

.alert-success {
  --bs-alert-color: #023840;
  --bs-alert-bg: rgba(var(--color-blue-rgb), 0.12);
  --bs-alert-border-color: rgba(var(--color-blue-rgb), 0.35);
}
.alert-danger {
  --bs-alert-color: #4a1116;
  --bs-alert-bg: rgba(var(--color-grenat-rgb), 0.12);
  --bs-alert-border-color: rgba(var(--color-grenat-rgb), 0.35);
}

html.theme-dark .alert-success {
  --bs-alert-color: #8fd9e0;
}
html.theme-dark .alert-danger {
  --bs-alert-color: #e8a6ac;
}

.light {
  color: var(--color-secondary);
}
.dark {
  color: var(--color-primary);
}

/* ==========================================================================
   Carte de formulaire centrée (création/modification d'utilisateur, etc.)
   Largeur confortable en desktop, pleine largeur en mobile/tablette.
   ========================================================================== */
.form-card-body {
  width: 50%;
}

@media (max-width: 992px) {
  .form-card-body {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .form-card-body {
    width: 100%;
  }
}

.logocontainer {
  width: 100%;
  height: 30%;
}
.logo {
  width: 100%;
}
.hidden {
  width: 49%;
  overflow: hidden;
}
/* NOTE : l'ancienne règle globale ".bi { font-size: 40px; }" a été retirée —
   elle agrandissait TOUTES les icônes du site (boutons, barre de recherche,
   icône admin principal, oeil du mot de passe...) à 40px par erreur.
   Les rares icônes volontairement grandes (ex. logout.php) ont désormais
   leur propre taille explicite, comme le font déjà delete/deactivate/reactivate_user.php. */
/* ==========================================================================
   Badges de classe utilisateur (simple / gold / plus)
   ========================================================================== */

/* ==========================================================================
   Badges de type de compte (Classique / Turbo / Premium)
   Noms internes des classes CSS inchangés (class-simple/class-gold/class-plus,
   alignés sur la valeur `classe` en base) — seuls le libellé affiché et le
   dégradé de couleur changent : Classique = bronze, Turbo = argenté, Premium = or.
   L'effet de brillance (::before, plus bas dans ce fichier) s'applique aux
   trois de la même façon via la classe commune .class-badge.
   ========================================================================== */

.class-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 13px;
}

/* Classique (bronze) */
.class-simple {
  background: linear-gradient(
    135deg,
    #8c5a2b 0%,
    #eab676 30%,
    #cd8a52 50%,
    #a5672f 70%,
    #6e4423 100%
  );
  color: #2a1505;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(140, 90, 43, 0.45);
}

/* Turbo (argenté) */
.class-gold {
  background: linear-gradient(
    135deg,
    #c0c0c0 0%,
    #f5f5f5 45%,
    #a8a8a8 55%,
    #eeeeee 75%,
    #8e8e8e 100%
  );
  color: #2a2a2a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(120, 120, 120, 0.4);
}

/* Premium (or) */
.class-plus {
  background: linear-gradient(
    135deg,
    #bf953f 0%,
    #fcf6ba 45%,
    #b38728 55%,
    #fbf5b7 75%,
    #aa771c 100%
  );
  color: #3a2a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(179, 135, 40, 0.4);
}

/* ==========================================================================
   Contrôles du graphique (chart.js) : type de vue + période
   ========================================================================== */

.chart-controls {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.period-buttons {
  display: inline-flex;
  gap: 4px;
}

.btn-period {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
}

/* Mode clair : actif en noir + gras, fond teal */
.btn-period.active {
  background: var(--color-primary);
  color: white;
  font-weight: bolder;
  border-radius: 6px;
}

/* Mode sombre : texte gris par défaut, actif toujours en teal + blanc */
html.theme-dark .btn-period {
  color: #9a9a9a;
}

html.theme-dark .btn-period.active {
  background: var(--color-primary);
  color: white;
  font-weight: bolder;
  border-radius: 6px;
}

/* ==========================================================================
   Boutons primaires : charte de couleur du projet
   ========================================================================== */

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-navy) 100%
  );
  border: none;
  color: white;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #038a83 0%, #11192e 100%);
  color: white;
}
.link-teal {
  color: var(--color-primary, #04a59d);
}

/* Boutons "Annuler" / "Retour" : couleur grenade dédiée */
.btn-cancel {
  border: none;
  color: var(--color-grenat);
}
.btn-cancel:hover {
  background: #b23640;
  color: white;
  font-weight: bolder;
}

/* ==========================================================================
   Séparateurs de lignes dans les tableaux (mode clair + mode sombre)
   ========================================================================== */
.table > :not(caption) > * > * {
  border-bottom: 1px solid #e2e2e2;
}

html.theme-dark .table > :not(caption) > * > * {
  border-bottom: 1px solid #3a3a3a;
}

/* Séparateur "jour" entre deux groupes de transactions (aujourd'hui / hier / ...) */
.table-day-separator td {
  padding: 10px 12px !important;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888888;
  background: #f4f4f4;
  border-top: 2px solid #d8d8d8 !important;
  border-bottom: 2px solid #d8d8d8 !important;
}

html.theme-dark .table-day-separator td {
  color: #aaaaaa;
  background: #262626;
  border-top: 2px solid #3a3a3a !important;
  border-bottom: 2px solid #3a3a3a !important;
}

/* ==========================================================================
   Mode sombre (piloté par la classe .theme-dark sur <body>, via theme.js)
   ========================================================================== */

html.theme-dark,
html.theme-dark body {
  background: #1e1e1e;
  color: #e0e0e0;
}

/* Cartes, navbar */
html.theme-dark .card,
html.theme-dark .dashboard-card,
html.theme-dark .navbar {
  background: #2a2a2a !important;
  color: #e0e0e0;
}
html.theme-dark .card-header {
  background: #2a2a2a !important;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

/* Titres et textes */
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .page-header h2,
html.theme-dark label,
html.theme-dark dt,
html.theme-dark dd {
  color: #e0e0e0 !important;
}
html.theme-dark .text-muted {
  color: #9a9a9a !important;
}

/* Tableaux */
html.theme-dark .table {
  color: #e0e0e0;
  --bs-table-color: #e0e0e0;
  --bs-table-bg: transparent;
}
html.theme-dark .table thead th {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #3a3a3a;
}
html.theme-dark .table td,
html.theme-dark .table th {
  border-color: #3a3a3a;
}
html.theme-dark .table-hover > tbody > tr:hover > * {
  background: #333333;
  color: #e0e0e0;
}
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #262626;
  color: #e0e0e0;
}

/* Formulaires */
html.theme-dark .form-control,
html.theme-dark .form-select {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #3a3a3a;
}
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: var(--color-primary, #04a59d);
}
html.theme-dark .form-control::placeholder {
  color: #888888;
}

/* Modals */
html.theme-dark .modal-content {
  background: #2a2a2a;
  color: #e0e0e0;
}
html.theme-dark .modal-header,
html.theme-dark .modal-footer {
  border-color: #3a3a3a;
}

/* ==========================================================================
   Conteneur de graphique : hauteur FIXE obligatoire pour Chart.js responsive
   (sans ça, le canvas grandit sans fin dans un parent sans hauteur définie)
   ========================================================================== */

.chart-canvas-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
}

.chart-canvas-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}
.chart-dashboard-body {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}

.chart-main-panel {
  flex: 2;
  width: 100%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-sub-block {
  width: 100%;
}

.chart-canvas-wrapper-sm {
  height: 220px;
}

.chart-main-panel .chart-canvas-wrapper {
  height: 280px;
}

.chart-side-panel {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   Ligne dédiée au graphique en courbe : toujours pleine largeur, sur sa
   propre ligne sous le bloc bâtons + donut (au lieu de se partager l'espace
   avec la colonne du donut).
   ========================================================================== */

.chart-line-row {
  width: 100%;
  margin-top: 20px;
}

.chart-canvas-wrapper-line {
  height: 320px;
}

@media (max-width: 576px) {
  .chart-canvas-wrapper-line {
    height: 260px;
  }
}

.container_doughnut {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
}
.chart-doughnut-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 180px;
  height: 180px;
}
.chart-doughnut-wrap canvas {
  cursor: pointer;
}

.chart-doughnut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: var(--color-secondary, #171717);
}
.chart-mini-legend {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}
.chart-mini-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}

.chart-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.chart-dot-gain {
  background: var(--color-blue, #0477a5);
}
.chart-dot-perte {
  background: var(--color-grenat, #7c1f25);
}
.chart-dot-capital {
  background: var(--color-navy, #12a786);
}

html.theme-dark .chart-doughnut-center {
  color: #e0e0e0;
}
html.theme-dark .chart-mini-legend li {
  color: #cccccc;
}

/* Icônes d'action des tableaux (Modifier/Désactiver/Télécharger/Supprimer...) :
   taille et espacement identiques, peu importe si l'icône est dans <a> ou <button> */
.table-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.table-action-icon i {
  font-size: 1rem;
  line-height: 1;
}

/* ==========================================================================
   Dashboard utilisateur : cartes + badge de classe, responsive
   ========================================================================== */

.dashboard-top-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.dashboard-cards-col {
  flex: 4;
  min-width: 280px;
}

.dashboard-class-col {
  flex: 1;
  min-width: 160px;
}

@media (max-width: 768px) {
  .dashboard-cards-col,
  .dashboard-class-col {
    flex: 1 1 100%;
  }
}

/* Le badge devient un vrai bloc dans ce contexte (pas juste une pastille de tableau) */
.dashboard-class-col .class-badge {
  padding: 20px;
  border-radius: 14px;
  font-size: 16px;
  gap: 10px;
}
.dashboard-class-col .card-icon {
  font-size: 22px;
}
.dashboard-class-col .card-content p {
  font-size: 18px;
  font-weight: bold;
}

/* ==========================================================================
   Animation de brillance sur le badge de classe (simple/gold/plus)
   ========================================================================== */

.class-badge {
  position: relative;
  overflow: hidden;
}

.class-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  );
  animation: badge-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badge-shine {
  0% {
    left: -150%;
  }
  55% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

@media (max-width: 576px) {
  .chart-canvas-wrapper {
    height: 260px;
  }
}
@media (max-width: 768px) {
  .chart-dashboard-body {
    flex-direction: column;
  }

  .chart-main-panel,
  .chart-side-panel {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }

  .chart-side-panel {
    margin-top: 0;
  }

  .chart-doughnut-wrap {
    margin: 0 auto;
  }
}