:root{
  --brand-primary:#E1007A; /* magenta boutons */
  --brand-gradient-start:#251053;
  --brand-gradient-end:#1A0D3A;
  --brand-ink:#1E164B;
}
:root{
  --brand-primary:#E1007A;           /* magenta boutons */
  --brand-gradient-start:#251053;
  --brand-gradient-end:#1A0D3A;
  --brand-ink:#1E164B;

  /* FOOTER */
  --brand-footer-bg:#210f49;

    /* Rose accent */
  --rose:#d63384;
  --rose-soft:#fde6f1;
  --rose-shadow:rgba(214,51,132,.25);
}


body{background-color:#f8f9fb}

.topbar-gradient{
  background: linear-gradient(140deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
}
.navbar-brand .brand-dot{
  width: 14px; height:14px; display:inline-block; border-radius:50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(225,0,122,.15);
}
.btn-primary{
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: #c40069;
  --bs-btn-hover-border-color: #c40069;
}
.topbar .form-control{ border-radius:.6rem; }
.topbar .input-group-text{ border-radius:.6rem 0 0 .6rem; }
.topbar-nav .nav-link{
  color:#5b5b7b;
  border-radius:.6rem;
}
.topbar-nav .nav-link.active,
.topbar-nav .nav-link:hover{
  color:#fff;
  background: linear-gradient(140deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
}
.section-title{
  color: var(--brand-ink);
  font-weight:800;
}
.card{ border-radius:1rem; }
.stat-num{ font-weight:800; font-size:2rem; }
.badge-soft{ background-color: rgba(30,22,75,.06); color: var(--brand-ink); }
.table thead th{ white-space:nowrap }

/* Bouton "Modifier" en BLEU (style plein) */
.btn-edit{
  --bs-btn-bg: #0d6efd;              /* bleu Bootstrap */
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  color:#fff;
}

/* Variante "outline" bleue pour Modifier si tu préfères */
.btn-outline-edit{
  --bs-btn-color:#0d6efd;
  --bs-btn-border-color:#0d6efd;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#0d6efd;
  --bs-btn-hover-border-color:#0d6efd;
  --bs-btn-active-bg:#0a58ca;
  --bs-btn-active-border-color:#0a58ca;
}
/* Cartes : bords arrondis déjà gérés. On fixe des hauteurs de zones scrollables
   pour éviter que les blocs grandissent avec le contenu. */
.list-group-flush { /* rien, Bootstrap fait le job */ }
.card .stat-num { line-height: 1; }

/* (facultatif) compacter un peu les items des listes de cadeaux */
.list-group-item .fw-semibold { font-weight: 600; }
/* ========== Client detail layout ========== */
.client-page { 
  /* occupe la hauteur de l'écran sous la topbar */
  min-height: calc(100vh - 120px);
}

/* Colonnes en piles flex pour pouvoir “étirer” les cartes */
.client-col {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* même espacement que .g-3 */
}

/* Carte qui s'étire pour harmoniser la hauteur */
.card.flex-fill {
  height: 0;
  min-height: 0;
  flex: 1 1 0;
}

/* Corps de carte qui scrolle sans faire grandir la carte */
.card-body.scrollable {
  overflow: auto;
}

/* Ligne des 3 KPI compacte */
.kpi-card .stat-num{ font-size: 2.2rem; }

/* 3 blocs cadeaux avec hauteur égale (1/3 de la colonne) */
.rewards-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rewards-stack > .card.flex-fill { min-height: 0; }

/* Sur très grands écrans, un peu plus d’air */
@media (min-width: 1400px){
  .client-page { min-height: calc(100vh - 140px); }
}

/* Surligne la zone tant qu'aucun parrain n'est choisi */
#referrer-search-wrap.needs-selection .form-control{
  border-color: var(--bs-warning);
  box-shadow: 0 0 0 .2rem rgba(244, 4, 216, 0.975);
}

/* Cadre + fond de la liste de résultats */
#referrer-results {
  border: 2px solid var(--bs-warning);
  border-top: none;
  background: var(--bs-body-bg);
  max-height: 280px;            /* évite une liste trop longue */
  overflow-y: auto;
}

/* Survol/Focus d’un item */
#referrer-results .list-group-item:hover,
#referrer-results .list-group-item:focus {
  background-color: var(--bs-warning-bg-subtle);
}
/* ---- Rose accent ---- */
:root{
  --rose:#d63384;            /* rose type Bootstrap */
  --rose-soft:#fde6f1;       /* rose très clair */
  --rose-shadow:rgba(214,51,132,.25);
}

/* Halo rose tant qu’aucun parrain n’est choisi */
#referrer-search-wrap.needs-selection .form-control{
  border-color: var(--rose);
  box-shadow: 0 0 0 .2rem var(--rose-shadow);
}

/* Liste des résultats */
#referrer-results{
  border: 2px solid var(--rose);
  border-top: none;
  background: var(--bs-body-bg);
  max-height: 280px;
  overflow-y: auto;
}

/* Survol d’un item */
#referrer-results .list-group-item:hover,
#referrer-results .list-group-item:focus{
  background-color: var(--rose-soft);
}


/* ====== FOOTER DASHBOARD ====== */
footer.app-footer{
  background-color: var(--brand-footer-bg);
  color: #fff;
}

footer.app-footer a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.875rem;
}

footer.app-footer a:hover{
  color: #fff;
  text-decoration: underline;
}