/* Toolbar / Pagination */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.pagesize select {
  appearance: none;
  background: #0b1220;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
}

.pager { display: flex; align-items: center; gap: 10px }

.btn {
  border: 1px solid var(--border);
  background: #0b1220;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.btn:disabled { opacity: .5; cursor: not-allowed }

#pageInfo { color: var(--muted); font-weight: 700 }

/* Barre de recherche (ID / Nom) */
.toolbar-left .searchbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.toolbar-left .searchbar label{
  font-weight:900;
  color:var(--muted);
}

#searchId{
  appearance: textfield;
  -moz-appearance: textfield;
  background:#0b1220;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-weight:800;
  line-height:1;
  width:120px;
  max-width:160px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#searchId::placeholder{ color:var(--muted); opacity:.85 }

/* Retire les flèches (Chrome/Safari/Edge) au cas où type=number serait utilisé */
#searchId::-webkit-outer-spin-button,
#searchId::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin:0;
}

/* Focus */
#searchId:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 2px rgba(56,189,248,.25);
}

/* Désactivé */
#searchId:disabled{ opacity:.6; cursor:not-allowed }

/* Bouton aligné */
.searchbar .btn{
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
}

/* Grille */
.grid{
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  align-items: start;
}