/*
 * EARONTECH — REPÈRES DE MAINTENANCE
 * Écrans : Suggestions de produits : styles communs des cartes et commandes d’examen.
 * Chargement : private/view.php.
 * Les couleurs et tailles paramétrables utilisent les variables --app-* / --product-*.
 * Les blocs @media adaptent la même interface à la largeur de l’écran.
 * Conserver l’ordre des règles : les ajustements spécialisés suivent le socle commun.
 */

/* Suggestions internes : cartes compactes, examen avant partage explicite. */
.suggestion-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0
}

.suggestion-card {
  border:1px solid #dce5ed;
  border-radius:10px;
  padding:12px;
  min-width:0;
  background:white;
  font-size:calc(12px * var(--app-font-scale, 1))
}

.suggestion-card h2 {
  font-size:calc(15px * var(--app-font-scale, 1));
  color:var(--app-primary-color, #1c75bc)
}

.suggestion-card h3 {
  font-size:calc(12px * var(--app-font-scale, 1))
}

.suggestion-overview {
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:10px
}

.suggestion-overview img {
  max-width:100%;
  max-height:110px;
  object-fit:contain
}

.suggestion-card label {
  display:flex;
  flex-direction:column;
  color:var(--app-primary-color, #1c75bc);
  margin:8px 0
}

.suggestion-card textarea {
  width:100%;
  box-sizing:border-box;
  font-size:calc(12px * var(--app-font-scale, 1));
  color:#222;
  resize:vertical
}

.suggestion-card .button,.suggestion-card button,.work-queue-grid .button,.work-queue-grid button {
  font-size:calc(11px * var(--app-font-scale, 1));
  padding:5px 8px;
  min-height:0;
  margin:4px 3px 0 0
}

.suggestion-pages {
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

.suggestion-pages [aria-current=page] {
  background:var(--app-primary-color, #1c75bc);
  color:var(--app-button-text, #fff)
}

/* Vue personnelle : listes indépendantes, priorité aux échéances dépassées. */
@media(max-width:1100px) {
  .suggestion-grid,.work-queue-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:650px) {
  .suggestion-grid,.work-queue-grid {
    grid-template-columns:1fr
  }

}