:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --line:#e5e7eb;
  --brand:#4f46e5;
  --radius:18px;
}

html,body{ background:var(--bg); color:var(--text); }
a{ text-decoration:none; }
.shadow-soft{ box-shadow:0 12px 30px rgba(17,24,39,.06); }

.sidebar{
  width: 270px;
  background: #fff;
  border-right:1px solid var(--line);
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 18px 12px 18px;
}
.sidebar .brand-badge{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:900;color:#fff;background:var(--brand);
}
.sidebar .menu{ padding:10px; }
.sidebar .menu .section{
  font-size:12px; color:var(--muted);
  font-weight:900; letter-spacing:.08em;
  padding:14px 10px 8px 10px;
}
.sidebar .menu a.item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  color:#111827; font-weight:800;
}
.sidebar .menu a.item:hover{ background:#f3f4f6; }
.sidebar .menu a.item.active{
  background:#eef2ff;
  color:#3730a3;
}
.sidebar .menu .ico{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  color:#374151;
}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 18px;
}
.searchbox{
  width: 360px; max-width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
}
.cardx{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.cardx-h{
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.cardx-b{ padding:18px; }
.stat{
  display:flex; gap:14px; align-items:center;
}
.stat .icon{
  width:44px;height:44px;border-radius:16px;
  background:#eef2ff; color:#3730a3;
  display:grid;place-items:center;
}
.stat .num{ font-weight:950; font-size:26px; }
.stat .lbl{ color:var(--muted); font-weight:700; font-size:13px; }

.table-wrap{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.table thead th{
  background:#f9fafb !important;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
}
.btn-brand:hover{ filter:brightness(.95); }
.badge-pill{
  border-radius:999px;
  padding:.35rem .65rem;
  font-weight:800;
}

.dt-paging .page-link{ border-radius:12px; }
.dataTables_filter input{
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  padding:8px 12px !important;
}
.dataTables_length select{
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:6px 10px !important;
}
.stat-ico{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  font-size:20px;
}
.stat-num{font-weight:950;font-size:24px;line-height:1;}
.stat-label{color:var(--muted);font-size:13px;margin-top:2px;}

.listy{display:flex;flex-direction:column;gap:10px;}
.listy-item{
  display:flex;align-items:center;
  padding:10px;border:1px solid var(--line);
  border-radius:18px;background:#fff;
}

/* -------------------------------------------------------
   Boutons (fix hover invisible)
------------------------------------------------------- */
.btn,
.btn:focus,
.btn:hover{
  opacity: 1 !important;        /* évite les boutons "fantômes" */
  filter: none !important;
}

/* Si tu utilises btn-light / btn-outline etc. */
.btn-light{
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: #111827 !important;
}
.btn-light:hover,
.btn-light:focus{
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Un style "soft" propre si tu veux pour Ajouter */
.btn-soft{
  background:#fff;
  border:1px solid var(--line);
  color:#111827;
  border-radius:14px;
  padding:.55rem .95rem;
  font-weight:700;
}
.btn-soft:hover{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.btn:focus, .btn:hover {
    opacity: 1 !important;
    filter: none !important;
    color: black !important;
    border: 1px solid black !important;
}

.dataTables_length select {
    border: 1px solid var(--line) !important;
    border-radius: 35px !important;
    padding: 7px 35px !important;
    margin-left: 13px !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
}
.dataTables_filter input {
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
     margin-top: 12px !important;
    margin-bottom: 6px !important;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: .85em;
      margin-top: 6px !important;
    margin-bottom: 12px !important;
     margin-left: 13px !important;

}


div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
      margin-top: 6px !important;
    margin-bottom: 12px !important;
     margin-right: 13px !important;

}


/* -------------------------------------------------------
   DataTables (pagination + layout)
------------------------------------------------------- */
.dataTables_wrapper .dataTables_paginate{
  padding-top: 10px !important;
  padding-right: 6px !important; /* évite "collé" au bord */
  text-align: right !important;
}

/* Bootstrap pagination (si DataTables bootstrap) */
.dataTables_wrapper .dataTables_paginate .pagination{
  margin: 0 !important;
  gap: 8px !important;            /* <-- spacing */
  flex-wrap: wrap;                /* responsive */
  justify-content: flex-end;
}

.dataTables_wrapper .page-item .page-link{
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: .45rem .70rem !important;
  color: #111827 !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}

.dataTables_wrapper .page-item .page-link:hover{
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.dataTables_wrapper .page-item.active .page-link{
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

.dataTables_wrapper .page-item.disabled .page-link{
  opacity: .55;
  cursor: not-allowed;
}


/* Alignement length/select & search */
.dataTables_wrapper .dataTables_length select{
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  padding: .40rem .65rem !important;
  background:#fff !important;
}

.dataTables_wrapper .dataTables_filter input{
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  padding: .45rem .9rem !important;
  background:#fff !important;
}