/* TYPEAHEAD_V1_BEGIN (2026-09-14)
   Dropdown for the nav search box on MiningNewsTerminal and SEDITracker.

   One file serves both sites: /opt/sedi/app/portal/static is a symlink to
   /opt/mnt/app/portal/static, so SediTracker loads this same stylesheet.

   Ported from MineTerminalPro's MTP_SEARCH_V1 panel so the three sites look
   alike when you type. Deliberately styles ONLY the dropdown, never the input
   or the button — those already have their own rules in style.css and five
   table shapes' worth of history says positional restyling of shared furniture
   is how this codebase breaks pages it was not looking at.
*/

/* The panel is positioned against the form, so the form is the containing
   block. The nav rule already lays the form out; this adds nothing but the
   coordinate system. */
.primary-nav-search { position: relative; }

.primary-nav-search .ta-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  z-index: 9998;
  text-align: left;
  padding-bottom: 4px;
}
.primary-nav-search .ta-results.open { display: block; }

.ta-group {
  padding: 8px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
  font-weight: 700;
  border-top: 1px solid #f0f0f0;
}
.ta-group:first-child { border-top: none; }

.ta-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  margin: 0 4px;
}
.ta-item:hover,
.ta-item.active { background: #fff5f5; }

.ta-item .ico {
  width: 18px;
  text-align: center;
  color: var(--brand-red, #c62828);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ta-item .body { flex: 1; min-width: 0; }
.ta-item .label {
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-item .sub { font-size: 11px; color: #888; margin-top: 1px; }
.ta-item .tk {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-red, #c62828);
  background: #fff5f5;
  border: 1px solid #ffe0e0;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

.ta-empty {
  padding: 14px 16px;
  color: #888;
  font-size: 12px;
  text-align: center;
}

/* Keyboard users must be able to see where they are. The active row is marked
   by background alone above, which is a colour-only cue; add a left edge so it
   survives greyscale and high-contrast modes. */
.ta-item.active { box-shadow: inset 2px 0 0 var(--brand-red, #c62828); }

@media (max-width: 780px) {
  .primary-nav-search .ta-results { min-width: 0; max-height: 50vh; }
}
/* TYPEAHEAD_V1_END */