/* ===================================================================
   Indigo custom overrides for the Vuexy theme
   Carried over from the old dist/css/style.css for features whose
   styling lived in the old theme stylesheet (which is no longer loaded).
   =================================================================== */

/* ---------- Watchlist: live price flash colours ---------- */
.blueStyle { background-color: dodgerblue; color: #fff !important; }
.redStyle  { background-color: red;        color: #fff !important; }
.wgreen    { color: green !important; }
.wred      { color: red !important; }

td .symbol-text {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Watchlist: symbol search + segment filter widget ---------- */
.search-filter-container { position: relative; width: 100%; }
.search-wrapper { position: relative; display: flex; }
#searchBox {
  width: 100%;
  padding: 10px 36px 10px 36px;
  font-size: 14px;
  border: 1px solid var(--bs-border-color, #ccc);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex-grow: 1;
}
.search-icon, .filter-icon, .clear-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #888; font-size: 14px;
}
.search-icon { left: 10px; pointer-events: none; }
.clear-icon  { right: 50px; display: none; cursor: pointer; z-index: 2; }
.filter-icon { right: 10px; cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; }
.filter-icon:hover { color: #0B2E59; }
.filter-icon.rotated { transform: translateY(-50%) rotate(180deg); }
#loader { position: absolute; right: 85px; top: 50%; transform: translateY(-50%); display: none; color: #0B2E59; }

.filter-dropdown {
  display: none; position: absolute; top: 42px; right: 0;
  background: var(--bs-body-bg, #fff); width: 220px; border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1); padding: 12px; z-index: 10;
  opacity: 0; transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.filter-dropdown.show { display: block; opacity: 1; transform: translateY(0); }
.filter-dropdown label { display: block; font-size: 13px; margin: 6px 0; cursor: pointer; }
.filter-dropdown input[type="checkbox"] { margin-right: 6px; }
.filter-header {
  display: flex; justify-content: space-between; font-size: 13px; font-weight: bold;
  border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 4px;
}
.filter-group-title {
  margin-top: 10px; font-size: 12px; font-weight: bold; color: #0B2E59;
  border-bottom: 1px solid #eee; padding-bottom: 2px;
}
#clearFilters { background: none; border: none; color: #007BFF; cursor: pointer; font-size: 12px; }
.badge-count {
  background: #0B2E59; color: white; font-size: 11px; font-weight: bold;
  padding: 2px 6px; border-radius: 999px; margin-left: 8px;
}
.results-container {
  background: var(--bs-body-bg, #fff); border-radius: 6px; margin-top: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: none; position: absolute;
  width: 100%; max-height: 300px; overflow-y: auto; z-index: 5;
}
.result-item { padding: 10px; font-size: 13px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.result-item:hover { background-color: #f0f0f0; }

/* segment-coloured pills used in the watchlist symbol column */
.badge-indigo { background-color: #5a8dee !important; color: #fff !important; }
.badge-purple { background-color: #8c54ff !important; color: #fff !important; }
.badge-brown  { background-color: #8d6e63 !important; color: #fff !important; }