/* ================================================================
   GuideXpresse — klantkaarten en badges. Het klantoverzicht van service
   (contacten.php) en manager (customers.php) is hetzelfde raster met
   dezelfde kaart; tot 2026-10-01 stond dit in service/css/style.css.
   Zelfde kaart als in het contactenoverzicht van ERP (.cp-card):
   zandkleurig vlak met rand, en een groene rand bij aanwijzen.
   ================================================================ */

.client-card {
  /* Kolom met de badges onderaan (margin-top: auto), zodat elke kaart dezelfde opbouw heeft, hoe
     lang de naam ook is en of er een plaats bij staat of niet. */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.client-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(28, 43, 45, 0.08);
}

.client-card__meta {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

/* Een klant die in ERP ontkoppeld is maar historie heeft, en dus niet verwijderd — grijs en niet
   klikbaar (een <div> in plaats van een <a>). */
.client-card--inactive {
  opacity: 0.55;
  cursor: default;
}

.client-card--inactive:hover {
  border-color: var(--sand-line);
  box-shadow: none;
}

.client-card__name {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.client-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sand-line);
}

/* Badges: op de kaart, en in service ook in de reparatie- en batchoverzichten. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 9999px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.badge--gray   { background: var(--sand); color: var(--ink-soft); }
.badge--green  { background: var(--success-bg); color: var(--success-text); }
.badge--orange { background: #fed7aa; color: #9a3412; }
.badge--blue   { background: var(--info-bg); color: var(--info-text); }
.badge--amber  { background: var(--warning-bg); color: var(--warning-text); }