/**
 * Cross-version search styling
 *
 * Uses data attributes instead of classes because Javadoc's _renderMenu
 * overwrites the class attribute after _renderItem returns.
 *
 * Provides subtle visual differentiation for search results:
 * - Items from newer versions (not yet available): green tint (like "added")
 * - Items from older versions (removed): red tint (like "removed")
 *
 * Colors match the inline diff styling for consistency.
 *
 * NOTE: Uses .dark-mode class (not prefers-color-scheme media query) because
 * the site has its own theme toggle that may differ from system preference.
 */

/* Version hint text - monochrome, stands out against tint */
/* High specificity to override Javadoc styles */
/* Only apply special styling to items with cross-version hints */
ul.ui-autocomplete li[data-cv-status] {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important; /* Override newer Javadoc's min-width: 100% */
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Content element - flex child that shrinks and ellipses */
ul.ui-autocomplete li[data-cv-status] div,
ul.ui-autocomplete li[data-cv-status] a {
    flex: 1;
    min-width: 0; /* Critical: allows flex item to shrink below content size */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent !important; /* Let li's background show through */
    /* Ensure consistent box model in default and hover states */
    border: none !important;
    margin: 0 !important;
}

/* Apply Javadoc highlight color to entire row when inner element is active */
/* Uses :has() for consistent highlight across text and hint */
ul.ui-autocomplete li[data-cv-status]:has(.ui-state-active),
ul.ui-autocomplete li[data-cv-status]:has(.ui-state-focus) {
    background: var(--selected-background-color, #f8981d) !important;
}

/* Hint - fixed flex child, doesn't shrink */
ul.ui-autocomplete li[data-cv-status] > .cv-hint {
    flex: none;
    margin-left: 8px;
    margin-right: 8px;
    white-space: nowrap;
    font-size: 0.85em;
    font-style: italic;
    font-weight: 500;
    color: #383838 !important; /* Medium dark gray for light mode */
}

/* === Light Mode (default) === */

/* Items added in newer versions - green tint (matches inline diff "added") */
ul.ui-autocomplete li[data-cv-status="newer"] {
    background: rgba(40, 167, 69, 0.15) !important; /* Green - same as diff-badge--added */
}

/* Items removed in older versions - red tint (matches inline diff "removed") */
ul.ui-autocomplete li[data-cv-status="older"] {
    background: rgba(220, 53, 69, 0.15) !important; /* Red - same as diff-badge--removed */
}

/* === Dark Mode (via .dark-mode class on html element) === */

/* Override javadoc-dark.css background on inner elements - needs high specificity */
html.dark-mode ul.ui-autocomplete li[data-cv-status] div,
html.dark-mode ul.ui-autocomplete li[data-cv-status] a,
html.dark-mode ul.ui-autocomplete li[data-cv-status] .ui-menu-item-wrapper,
html.dark-mode .ui-menu li[data-cv-status] .ui-menu-item-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Also override on hover/active states in dark mode */
html.dark-mode ul.ui-autocomplete li[data-cv-status] .ui-state-active,
html.dark-mode ul.ui-autocomplete li[data-cv-status] .ui-state-focus,
html.dark-mode ul.ui-autocomplete li[data-cv-status] div:hover,
html.dark-mode ul.ui-autocomplete li[data-cv-status] a:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

html.dark-mode ul.ui-autocomplete li[data-cv-status] > .cv-hint {
    color: #c8c8c8 !important; /* Medium light gray for dark mode */
    background: transparent !important; /* Ensure hint shows li's background */
}

/* Dark mode tints - use lighter pastel colors matching inline-diff.css */
html.dark-mode ul.ui-autocomplete li[data-cv-status="newer"] {
    background: rgba(134, 239, 172, 0.2) !important; /* Pastel green - matches diff-badge--added */
}

html.dark-mode ul.ui-autocomplete li[data-cv-status="older"] {
    background: rgba(252, 165, 165, 0.2) !important; /* Pastel red - matches diff-badge--removed */
}