:root{
    --header-h: 70px;     /* ajuste si ton header fait 60/64/72 */
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 78px;
    --sidebar-bg: #0b1220;
    --sidebar-bg-2: #0f1930;
    --sidebar-border: rgba(255,255,255,.06);
    --active: #6d5efc;
  }

  /* HEADER fixed (si ce n'est pas déjà le cas dans ton thème) */
  #page-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 1100;
  }

  /* SIDEBAR : commence sous le header */
  .vertical-menu{
    position: fixed;
    top: var(calc(--header-h));
    left: 0;
    height: calc(100vh - var(--header-h));
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, #0a1222 100%);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1050;
    overflow: hidden; /* évite les débords visuels */
  }

  /* zone scrollable */
  .vertical-menu [data-simplebar]{
    height: 100%;
  }

  /* menu container */
  #sidebar-menu{
    height: 100%;
    padding: 5px 10px;
    margin-top: 2em;
  }

  #side-menu li a span {
    margin-left: 1em;
    font-size: 14px;
  }

  .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a {
    padding: 18px 15px;
  }

  /* IMPORTANT : le UL doit être en colonne pleine hauteur */
  #side-menu.metismenu{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin: 0;
    gap: 10px;
  }

  /* Titre */
  #side-menu .menu-title{
    color: rgba(255,255,255,.55);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 6px 8px 8px;
  }

  /* liens */
  #side-menu > li > a{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .18s ease, transform .18s ease, color .18s ease;
  }

  #side-menu > li > a i{
    width: 22px;
    text-align: center;
    font-size: 18px;
    color: rgba(255,255,255,.75);
  }

  /* hover */
  #side-menu > li > a:hover{
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
  }

  /* active pill */
  #side-menu > li.mm-active > a,
  #side-menu > li > a.active{
    background: linear-gradient(90deg, #6d5efc 0%, #6b4bff 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(108,88,255,.22);
  }
  #side-menu > li.mm-active > a i,
  #side-menu > li > a.active i{
    color:#fff;
  }

  /* logout en bas : le li a mt-auto chez toi */
  #side-menu > li.mt-auto{
    margin-top: auto !important;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* bouton logout */
  #logoutBtn{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.88) !important;
    border-radius: 14px !important;
  }
  #logoutBtn:hover{
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  /* CONTENU : évite la marge “bizarre” sur les pages */
  .main-content{
    margin-left: var(--sidebar-w);
    padding-top: var(--header-h);
  }

  /* ============ */
  /* Desktop collapsed (icônes seules) */
  /* ton thème utilise souvent body.vertical-collpsed */
  body.vertical-collpsed .vertical-menu{
    width: var(--sidebar-w-collapsed);
  }
  body.vertical-collpsed .main-content{
    margin-left: var(--sidebar-w-collapsed);
  }

  /* masquer les textes quand collapsed */
  body.vertical-collpsed #side-menu > li > a span{
    display: none;
  }
  body.vertical-collpsed #side-menu > li > a{
    justify-content: center;
    padding: 12px 10px;
  }
  body.vertical-collpsed #side-menu > li > a i{
    margin: 0;
  }

  /* évite les tooltips gigantesques / débords */
  body.vertical-collpsed #side-menu > li > a{
    overflow: visible;
  }

  /* ============ */
  /* Mobile overlay */
  @media (max-width: 991.98px){
    .main-content{ margin-left: 0; }

    .vertical-menu{
      transform: translateX(-105%);
      transition: transform .22s ease;
      box-shadow: 18px 0 40px rgba(0,0,0,.35);
    }

    /* classe classique sur thèmes admin */
    body.sidebar-enable .vertical-menu{
      transform: translateX(0);
    }

    body.sidebar-enable::before{
      content:"";
      position: fixed;
      inset: 0;
      top: var(--header-h); /* garde le header cliquable */
      background: rgba(0,0,0,.45);
      z-index: 1040;
    }
  }

  .page-content {
    margin-top: -5em;
  }

  /* Dashboard stats - maquette */

.dashboard-stats{
    display: grid;
    gap: 18px;
  }

  .stats-card{
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(16,24,40,.06);
    box-shadow: 0 12px 26px rgba(16,24,40,.06);
    padding: 10px 10px;
  }

  .stat--simple {
    padding: 30px 20px !important;
    border-radius: 6px;
    background-color: #F8F8F8;
  }

  .stats-grid{
    display: grid;
    gap: 0;
  }

  .stats-grid--4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stats-grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* Stat block */
  .stat{
    padding: 10px 16px;
    min-width: 0;
  }

  .stat--divided{
    border-left: 1px solid rgba(16,24,40,.10);
  }

  .stat__head{
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .stat__icon{
    color: #6d5efc;          /* violet maquette */
    font-size: 16px;
  }

  .stat__label{
    font-size: 13px;
    color: rgba(16,24,40,.70);
    font-weight: 500;
  }

  .stat__value{
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #111827;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stat__unit{
    font-size: 12px;
    font-weight: 600;
    color: rgba(16,24,40,.55);
    margin-left: 6px;
  }

  .stat__sub{
    display:flex;
    align-items:center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
  }

  .stat__muted{
    color: rgba(16,24,40,.55);
  }

  .stat__badge{
    font-weight: 700;
  }

  .stat__badge--success{ color:#16a34a; }
  .stat__badge--danger{ color:#f97316; } /* orange comme la maquette */

  /* bottom cards style (texte plus “simple”) */
  .stat--simple{
    padding: 6px 10px;
  }
  .stat--simple .stat__label{
    display:block;
    margin-bottom: 10px;
    font-size: 13px;
  }
  .stat--simple .stat__value{
    font-size: 22px;
  }

  /* ========== RESPONSIVE ========== */

  /* <= 1200 : 2 colonnes en haut */
  @media (max-width: 1199.98px){
    .stats-grid--4{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* on enlève les séparateurs verticaux, on passe à une grille */
    .stat--divided{
      border-left: none;
      border-top: 1px solid rgba(16,24,40,.10);
    }
    /* seulement à partir du 3e item (2e ligne) */
    .stats-grid--4 .stat:nth-child(-n+2){
      border-top: none;
    }
  }

  /* <= 768 : 1 colonne */
  @media (max-width: 767.98px){
    .stats-card{
      padding: 14px;
    }
    .stats-grid--4{
      grid-template-columns: 1fr;
    }
    .stats-grid--2{
      grid-template-columns: 1fr;
    }

    .stat{
      padding: 10px 8px;
    }
    .stat--divided{
      border-top: 1px solid rgba(16,24,40,.10);
    }
    .stats-grid--4 .stat:first-child{
      border-top: none;
    }

    .stat__value{
      font-size: 20px;
    }
  }

  .sn-settings {
    display: none !important;
  }

/* =========================
   Campaigns page (maquette)
========================= */

/* =========================
   Cagnottes - style maquette
========================= */

.campaigns-page{
    --t:#111827;
    --muted: rgba(17,24,39,.60);
    --line: rgba(17,24,39,.10);
    --violet:#6d5efc;
  }

  /* Header */
  .campaigns-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 14px;
    flex-wrap: wrap;
  }

  .campaigns-title{
    margin:0 0 8px 0;
    font-weight: 800;
    color: var(--t);
  }

  /* Tabs */
  .campaigns-tabs{
    display:flex;
    gap: 18px;
    align-items:center;
    border-bottom: 1px solid rgba(17,24,39,.08);
    padding-bottom: 8px;
  }

  .campaigns-tab{
    border: 0;
    background: transparent;
    padding: 6px 2px;
    color: rgba(17,24,39,.62);
    font-weight: 700;
    position: relative;
  }

  .campaigns-tab.is-active{ color: var(--t); }

  .campaigns-tab.is-active::after{
    content:"";
    position:absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    height: 2px;
    background: var(--violet);
    border-radius: 2px;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 28px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    margin-left: 6px;
    background: rgba(109,94,252,.12);
    color: var(--violet);
  }

  /* ===== Actions bar (stable, pas de flottement) ===== */
  .campaigns-actions{
    display: grid;
    grid-template-columns: 260px auto 120px; /* recherche | tri | exporter */
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  /* Search */
  .searchbox{ position:relative; min-width:0; }
  .searchbox i{
    position:absolute;
    left: 10px;
    top:50%;
    transform: translateY(-50%);
    color: rgba(17,24,39,.45);
    pointer-events:none;
  }
  .searchbox input{
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    padding-left: 34px;
    width: 100%;
    background:#fff;
  }

  /* Sort */
  .sortbox{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 8px;
    min-width: 0;
  }
  .sortbox i{ color: rgba(17,24,39,.45); font-size: 16px; }
  .sortbox__label{
    font-size: 13px;
    font-weight: 700;
    color: rgba(17,24,39,.62);
    white-space: nowrap;
  }
  .sortbox__select{
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(17,24,39,.10);
    width: 140px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Export */
  .campaigns-export{
    height: 36px;
    width: 110px;
    justify-self: end;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-weight: 800 !important;
    background: var(--violet) !important;
    border: 1px solid var(--violet) !important;
    color:#fff !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* List */
  .campaigns-list{
    margin-top: 12px;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }

  .campaign-item{
    background:#fff;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 12px;
    padding: 12px;
    display:grid;
    grid-template-columns: 68px 1fr auto;
    gap: 14px;
    align-items:center;
  }

  .campaign-item__media img{
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background:#eee;
  }

  .campaign-name{
    font-weight: 800;
    color: var(--t);
    font-size: 14px;
    line-height: 1.25;
  }

  .campaign-sub{
    color: rgba(17,24,39,.55);
    font-size: 12px;
    margin-top: 4px;
  }

  .linkish{ color: var(--violet); font-weight: 800; }

  .campaign-item__meta{
    margin-top: 10px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .meta__k{ font-size: 12px; color: rgba(17,24,39,.55); }
  .meta__v{
    font-size: 12px;
    color: rgba(17,24,39,.85);
    font-weight: 700;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .meta__link{
    color: var(--violet);
    text-decoration: none;
    font-weight: 800;
  }

  /* Actions colonne droite */
  .campaign-item__actions{
    display:flex;
    align-items:center;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid rgba(17,24,39,.08);
  }

  .btn-pill{
    height: 30px;
    border-radius: 999px !important;
    padding: 0 14px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
  }

  .btn-icon{
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(17,24,39,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(17,24,39,.75);
    text-decoration:none;
  }
  .btn-icon:hover{
    color: var(--violet);
    border-color: rgba(109,94,252,.35);
    background: rgba(109,94,252,.06);
  }

  .empty-state{
    padding: 42px 12px;
    text-align:center;
    color: rgba(17,24,39,.55);
  }

  /* =========================
     Responsive (très propre)
  ========================= */

  /* Tablette : actions restent alignées, meta passe en 2 colonnes */
  @media (max-width: 991.98px){
    .campaigns-actions{
      grid-template-columns: 1fr 220px 120px; /* recherche flexible */
    }
    .sortbox{ justify-content:flex-start; }
    .campaign-item__meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Mobile : barre d’actions en 3 lignes, exporter full width */
  @media (max-width: 767.98px){
    .campaigns-actions{
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
    }
    .searchbox{ width:100%; }

    .sortbox{
      width: 100%;
      justify-content: flex-start;
    }
    .sortbox__select{
      width: 52%;
      min-width: 160px;
    }

    .campaigns-export{
      width: 100%;
      justify-self: stretch;
    }

    /* card list */
    .campaign-item{
      grid-template-columns: 64px 1fr;
    }
    .campaign-item__actions{
      grid-column: 1 / -1;
      border-left: 0;
      border-top: 1px solid rgba(17,24,39,.08);
      padding-left: 0;
      padding-top: 12px;
      justify-content: flex-end; /* plus “maquette” et tap-friendly */
      flex-wrap: wrap;
    }

    /* boutons plus faciles à cliquer */
    .btn-pill{ height: 34px; }

    /* meta en 1 colonne */
    .campaign-item__meta{ grid-template-columns: 1fr; }
  }

  /* Très petit mobile : select en pleine largeur */
  @media (max-width: 360px){
    .sortbox{ flex-wrap: wrap; justify-content:flex-start; }
    .sortbox__select{ width: 100%; min-width: 0; }
  }

  /* =========================
   Campaign detail (maquette)
========================= */

.campaign-detail{
  --t:#111827;
  --muted: rgba(17,24,39,.60);
  --line: rgba(17,24,39,.10);
  --card: #ffffff;
  --violet:#6d5efc;
}

.campaign-detail .cd-muted{ color: var(--muted); }
.campaign-detail .cd-link{ color: var(--violet); font-weight: 800; }
.campaign-detail .cd-danger{ color: #dc2626; font-weight: 800; }

/* Header layout */
.cd-header{
  display:grid;
  grid-template-columns: 120px 1fr 260px;
  gap: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(16,24,40,.06);
}

/* Media */
.cd-media img{
  width: 110px;
  height: 110px;
  border-radius: 14px;
  object-fit: cover;
  background: #eee;
}

/* Title */
.cd-h1{
  margin:0;
  font-weight: 900;
  color: var(--t);
  font-size: 18px;
  line-height: 1.2;
}
.cd-by{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* Docs */
.cd-docs{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cd-doc{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
  color: var(--violet);
  font-weight: 800;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(109,94,252,.25);
  background: rgba(109,94,252,.06);
}
.cd-doc i{ font-size: 18px; }

/* Meta grid */
.cd-meta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cd-k{ font-size: 12px; color: rgba(17,24,39,.55); font-weight: 700; }
.cd-v{
  font-size: 12px;
  color: rgba(17,24,39,.85);
  font-weight: 800;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Numbers block */
.cd-numbers{
  border-left: 1px solid rgba(17,24,39,.08);
  padding-left: 16px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.cd-value{
  font-size: 18px;
  font-weight: 900;
  color: var(--t);
  line-height: 1.15;
}
.cd-unit{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.55);
  margin-left: 6px;
}

/* Grid content */
.cd-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.4fr .6fr; /* description | progression */
  gap: 16px;
}

/* Card sections */
.cd-card{
  background: var(--card);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(16,24,40,.06);
  overflow:hidden;
}
.cd-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.cd-card__head--row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cd-card__title{
  margin:0;
  font-weight: 900;
  color: var(--t);
  font-size: 14px;
}
.cd-card__body{
  padding: 14px 16px;
}

.cd-text{
  margin:0;
  color: rgba(17,24,39,.70);
  line-height: 1.6;
  font-size: 13px;
}

/* Progress */
.cd-progress{ border-radius: 999px; overflow:hidden; }
.cd-progress-label{
  font-weight: 900;
  color: var(--t);
  font-size: 13px;
}

/* Full width */
.cd-card--full{ grid-column: 1 / -1; }

/* Empty */
.cd-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: 10px;
  background: rgba(56,189,248,.10);
  color: rgba(17,24,39,.70);
  font-weight: 700;
}
.cd-empty i{ font-size: 20px; color: #0284c7; }

/* Table (légère adaptation) */
.cd-table thead th{
  font-size: 12px;
  color: rgba(17,24,39,.60);
  font-weight: 800;
}
.cd-table tbody td{
  vertical-align: middle;
}

/* =========================
   Responsive
========================= */

@media (max-width: 991.98px){
  .cd-header{
    grid-template-columns: 120px 1fr;
  }
  .cd-numbers{
    grid-column: 1 / -1;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(17,24,39,.08);
    padding-top: 14px;
    flex-direction: row;
    justify-content: space-between;
  }
  .cd-meta{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cd-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px){
  .cd-header{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cd-media{
    display:flex;
    justify-content:flex-start;
  }
  .cd-media img{
    width: 96px;
    height: 96px;
  }
  .cd-meta{
    grid-template-columns: 1fr;
  }
  .cd-numbers{
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================
   Users page (maquette)
========================= */

.users-page{
  --t:#111827;
  --muted: rgba(17,24,39,.60);
  --violet:#6d5efc;
}

.users-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.users-title{
  margin:0 0 8px 0;
  font-weight: 900;
  color: var(--t);
}

/* Tabs style maquette */
.users-tabs{
  display:flex;
  gap: 18px;
  align-items:center;
  border-bottom: 1px solid rgba(17,24,39,.08);
  padding-bottom: 8px;
}
.users-tab{
  border: 0;
  background: transparent;
  padding: 6px 2px;
  color: rgba(17,24,39,.62);
  font-weight: 800;
  position: relative;
}
.users-tab.is-active{ color: var(--t); }
.users-tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-9px;
  width:100%;
  height:2px;
  background: var(--violet);
  border-radius: 2px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
  background: rgba(109,94,252,.12);
  color: var(--violet);
}

/* Actions bar (identique Cagnottes) */
.users-actions{
  display: grid;
  grid-template-columns: 260px auto 120px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.searchbox{ position:relative; min-width:0; }
.searchbox i{
  position:absolute;
  left: 10px;
  top:50%;
  transform: translateY(-50%);
  color: rgba(17,24,39,.45);
  pointer-events:none;
}
.searchbox input{
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  padding-left: 34px;
  width: 100%;
  background:#fff;
}

.sortbox{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  min-width: 0;
}
.sortbox i{ color: rgba(17,24,39,.45); font-size: 16px; }
.sortbox__label{
  font-size: 13px;
  font-weight: 800;
  color: rgba(17,24,39,.62);
  white-space: nowrap;
}
.sortbox__select{
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.10);
  width: 140px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.users-export{
  height: 36px;
  width: 110px;
  justify-self: end;
  border-radius: 999px !important;
  padding: 0 16px !important;
  font-weight: 900 !important;
  background: var(--violet) !important;
  border: 1px solid var(--violet) !important;
  color:#fff !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Card wrapper */
.users-card{
  background:#fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(16,24,40,.06);
  padding: 10px;
}

/* Table */
.users-table thead th{
  font-size: 12px;
  color: rgba(17,24,39,.60);
  font-weight: 900;
}
.btn-pill{
  height: 30px;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}
.btn-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(17,24,39,.75);
  text-decoration:none;
}
.btn-icon:hover{
  color: var(--violet);
  border-color: rgba(109,94,252,.35);
  background: rgba(109,94,252,.06);
}

/* Responsive */
@media (max-width: 991.98px){
  .users-actions{
    grid-template-columns: 1fr 220px 120px;
  }
  .sortbox{ justify-content:flex-start; }
}

@media (max-width: 767.98px){
  .users-actions{
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  .sortbox{
    width: 100%;
    justify-content: space-between;
  }
  .sortbox__select{
    width: 52%;
    min-width: 160px;
  }
  .users-export{
    width: 100%;
    justify-self: stretch;
  }

  .users-card{ padding: 8px; }

  /* Optionnel : actions plus tap-friendly dans le tableau verifs */
  .btn-pill{ height: 34px; }
}

/* enlève les marges parasites */
.users-page .users-table form { margin: 0 !important; }

/* actions toujours centrées verticalement */
.users-page .users-table td { vertical-align: middle; }

/* boutons pill homogènes (évite l’effet “marge bas”) */
.users-page .btn-pill{
  height: 30px;
  line-height: 28px;      /* clé pour éviter le “bas” */
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* si un bouton est dans un <a> ou <button> */
.users-page .btn-pill.btn{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Uniformiser les boutons dans l'onglet Tout */
#tab-all .users-table .btn.btn-success,
#tab-all .users-table .btn.btn-primary{
  border-radius: 999px !important;
  height: 30px;
  padding: 0 14px !important;
  font-weight: 900;
}

#tab-all .users-table .btn.btn-danger{
  border-radius: 999px !important;
  height: 30px;
  padding: 0 14px !important;
  font-weight: 900;
}

/* Version "outline" style maquette */
#tab-all .users-table .btn.btn-success{
  background: transparent !important;
  border: 1px solid #6d5efc !important;
  color: #6d5efc !important;
}
#tab-all .users-table .btn.btn-danger{
  background: transparent !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
}

:root{
  --bg-page:#F7F8FC;
  --card:#FFFFFF;
  --muted:#8A8FA3;
  --text:#1F2330;
  --line:#EEF0F6;
  --primary:#5B5EF7;
  --primary-100:#F0F0FF;
  --violet-50:#F4EEFF;
  --shadow: 0 10px 30px rgba(31,35,48,.06);
  --radius:16px;
}

/* page */
.finance-page{
  background: var(--bg-page);
  padding: 10px 0 30px;
}

/* top cards */
.finance-top{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 992px){
  .finance-top{
      grid-template-columns: 1fr 1fr 1fr;
      align-items: stretch;
  }
}

.stat-card{
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  min-height: 88px;
  position: relative;
  overflow:hidden;
}

.stat-card__label{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px 0;
  font-weight: 500;
}

.stat-card__value{
  font-size: 24px;
  font-weight: 750;
  color: var(--text);
  margin: 0;
  letter-spacing: .2px;
  display:flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.stat-card__currency{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.stat-card__icon{
  position:absolute;
  right: 16px;
  top: 16px;
  font-size: 18px;
  color: var(--muted);
  opacity:.9;
}

.stat-pill{
  position:absolute;
  right: 12px;
  top: 12px;
  background: var(--primary-100);
  color: var(--primary);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.stat-link{
  position:absolute;
  right: 16px;
  bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.stat-link:hover{ text-decoration: underline; }

.stat-card--purple{
  background: var(--violet-50);
  box-shadow: none;
  border: 1px solid rgba(91,94,247,.10);
}

.pm-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 650;
  color: var(--text);
  margin:0;
  font-size: 13px;
}

.pm-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
}

.btn-pill{
  border: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 650;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
}
.btn-pill:hover{ filter: brightness(.95); color:#fff; }

/* history block */
.history-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.history-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.history-title{
  font-size: 16px;
  font-weight: 750;
  margin: 0;
  color: var(--text);
}

/* tabs (like underline active) */
.finance-tabs{
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 0;
  gap: 18px;
}
.finance-tabs .nav-link{
  border: 0 !important;
  background: transparent !important;
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
  padding: 10px 2px;
  border-radius: 0;
  position: relative;
}
.finance-tabs .nav-link.active{
  color: var(--text);
}
.finance-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  height: 2px;
  width: 100%;
  background: var(--primary);
  border-radius: 2px;
}

.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display:grid;
  place-items:center;
  color: var(--muted);
  text-decoration:none;
}
.icon-btn:hover{ border-color: rgba(91,94,247,.25); color: var(--primary); }

/* table look */
.table-shell{
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  margin-top: 14px;
  background:#fff;
}

.finance-table{
  margin: 0;
  font-size: 12px;
}
.finance-table thead th{
  background: #F6F7FB !important;
  color: #6B7280;
  font-weight: 700;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px;
  white-space: nowrap;
}
.finance-table tbody td{
  border-top: 1px solid var(--line) !important;
  padding: 12px 14px;
  vertical-align: middle;
  color: #2A2F3C;
  white-space: nowrap;
}
.finance-table tbody tr:hover{
  background: #FAFAFF;
}

.fee-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-100);
  color: var(--primary);
  font-weight: 750;
  font-size: 12px;
}

.dots-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display:grid;
  place-items:center;
  color: #6B7280;
}
.dots-btn:hover{ border-color: rgba(91,94,247,.25); color: var(--primary); }

/* pagination */
.pagination-sm .page-link{
  border-radius: 10px;
  border-color: var(--line);
  color: #4B5563;
  font-weight: 600;
}
.pagination-sm .page-item.active .page-link{
  background: var(--primary);
  border-color: var(--primary);
}

/* responsive tweaks */
@media (max-width: 575.98px){
  .history-card{ padding: 14px; }
  .stat-card__value{ font-size: 22px; }
}

/* :root{
  --bg-page:#F7F8FC;
  --card:#FFFFFF;
  --muted:#8A8FA3;
  --text:#1F2330;
  --line:#EEF0F6;
  --primary:#5B5EF7;
  --primary-100:#F0F0FF;
  --shadow: 0 10px 30px rgba(31,35,48,.06);
  --radius:16px;
} */

/* page wrapper */
.report-page{
  background: var(--bg-page);
  padding: 10px 0 30px;
}

.report-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* head */
.report-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.report-title{
  margin:0;
  font-weight: 800;
  color: var(--text);
  font-size: 18px;
}

.report-title__link{
  color: var(--text);
  text-decoration: none;
}
.report-title__link:hover{ text-decoration: underline; }

.report-subtitle{
  margin: 6px 0 0 0;
  color: var(--muted);
  font-size: 12px;
}

.dot{ margin: 0 8px; }

.report-back{
  border-radius: 12px;
  border: 1px solid var(--line);
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-weight: 650;
  padding: 10px 12px;
}

/* section */
.report-section{
  padding-top: 4px;
}

.report-section__title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.report-section__title h5{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.report-count{
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

/* table shell */
.table-shell{
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}

.report-table{
  margin:0;
  font-size: 12px;
}

.report-table thead th{
  background: #F6F7FB !important;
  color: #6B7280;
  font-weight: 800;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px;
  white-space: nowrap;
}

.report-table tbody td{
  border-top: 1px solid var(--line) !important;
  padding: 12px 14px;
  vertical-align: middle;
  color: #2A2F3C;
  white-space: nowrap;
}

.report-table tbody tr:hover{
  background: #FAFAFF;
}

.desc{
  max-width: 520px;
  white-space: normal;
}
.desc__text{
  color:#4B5563;
}

.link-btn{
  border:0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  padding: 0;
  margin-left: 6px;
  font-size: 12px;
}
.link-btn:hover{ text-decoration: underline; }

/* pills */
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.pill--type{
  background: #FEF3C7;
  color: #92400E;
}

.pill--danger{
  background:#FEE2E2;
  color:#991B1B;
}

.pill--warning{
  background:#FFF7ED;
  color:#C2410C;
}

.pill--success{
  background:#ECFDF5;
  color:#047857;
}

.pill--neutral{
  background:#F3F4F6;
  color:#374151;
}

/* action button like maquette */
.dots-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display:grid;
  place-items:center;
  color: #6B7280;
}
.dots-btn:hover{
  border-color: rgba(91,94,247,.25);
  color: var(--primary);
}

/* empty */
.empty-state{
  text-align:center;
  padding: 38px 10px;
}
.empty-state__icon{
  font-size: 64px;
  color: #10B981;
}

/* responsive */
@media (max-width: 575.98px){
  .report-card{ padding: 14px; }
  .report-head{ flex-direction: column; align-items: stretch; }
  .desc{ max-width: 100%; }
}


#kycReviewModal .modal-body img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}