/* web_viewer/static/css/champ_recherche_symboles.css */
/* Objectif: forcer un panneau blanc, rectangulaire, scroll, hover gris, cursor pointer,
   et éviter que d'anciens CSS (menu/dropdown) écrasent le style. */

/* ============ Suggest box ============ */
#symSuggestBox.symSuggestBox{
  position: fixed !important;
  z-index: 2147483647 !important;  /* au-dessus de tout */
  display: none;

  width: 320px;                    /* la largeur sera écrasée par JS */
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: #ffffff !important;
  color: #111111 !important;

  border: 1px solid rgba(0,0,0,0.20) !important;
  border-radius: 8px !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;

  padding: 4px 0 !important;
  margin: 0 !important;

  opacity: 1 !important;
  backdrop-filter: none !important;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 12px !important;      /* ✅ police plus petite */
  line-height: 1.25 !important;
}

/* Scrollbar (Chrome/Edge) */
#symSuggestBox.symSuggestBox::-webkit-scrollbar{
  width: 10px;
}
#symSuggestBox.symSuggestBox::-webkit-scrollbar-track{
  background: transparent;
}
#symSuggestBox.symSuggestBox::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  border: 3px solid #fff;
}

/* ============ Rows ============ */
#symSuggestBox .symSuggestRow{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 7px 10px !important;
  margin: 0 !important;

  user-select: none !important;
  cursor: pointer !important;      /* ✅ curseur main */
  background: transparent !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* hover gris clair */
#symSuggestBox .symSuggestRow:hover{
  background: #f2f2f2 !important;
}

/* séparation */
#symSuggestBox .symSuggestRow + .symSuggestRow{
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* ============ Columns: Label | Symbol | Category ============ */
#symSuggestBox .symL{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  font-weight: 600 !important;
  color: #111 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#symSuggestBox .symS{
  flex: 0 0 auto !important;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-weight: 700 !important;
  color: #333 !important;

  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: rgba(0,0,0,0.07) !important;
}

#symSuggestBox .symC{
  flex: 0 0 auto !important;
  color: #666 !important;
  font-size: 11px !important;

  white-space: nowrap !important;
  max-width: 40% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ============ Erreur sous input ============ */
#symSearchError.symSearchError{
  display: none;
  margin-top: 6px !important;
  padding: 6px 10px !important;

  background: #fff3f3 !important;
  border: 1px solid rgba(220, 38, 38, 0.30) !important;
  color: #b91c1c !important;

  border-radius: 8px !important;
  font-size: 12px !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
}
/* sécurité : évite toute transparence héritée / filtres */
#symSuggestBox.symSuggestBox{
  background: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* box sizing propre */
#symSuggestBox.symSuggestBox,
#symSuggestBox.symSuggestBox *{
  box-sizing: border-box !important;
}