/* ============================================================================
   SHARED RECIPE COMPONENTS STYLES
   Autocomplete dropdown and ingredient row styles used by both
   the recipe editor and chatbot proposal cards.
   ============================================================================ */

/* Autocomplete Dropdown (created by RecipeComponents.setupAutocomplete) */
.rc-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--chat-white, #fff);
    border: 1px solid var(--chat-border, #DEE2E6);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 180px;
    overflow-y: auto;
    z-index: 200;
}

.rc-autocomplete-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--chat-light, #F8F9FA);
    transition: background 0.15s;
}

.rc-autocomplete-item:last-child {
    border-bottom: none;
}

.rc-autocomplete-item:hover,
.rc-autocomplete-item.rc-highlighted {
    background: var(--chat-light, #F8F9FA);
}

.rc-autocomplete-unit {
    color: var(--chat-gray, #94a0ad);
    font-size: 0.85em;
}

/* Dark theme support */
.dark-theme .rc-autocomplete-dropdown {
    background: var(--dark-bg-card, #1e2533) !important;
    border-color: var(--dark-border, #2f3944) !important;
}

.dark-theme .rc-autocomplete-item {
    color: var(--dark-text-primary, #e7e9ea) !important;
    border-bottom-color: var(--dark-border, #2f3944) !important;
}

.dark-theme .rc-autocomplete-item:hover,
.dark-theme .rc-autocomplete-item.rc-highlighted {
    background: var(--dark-bg-tertiary, #252d3d) !important;
}

/* Generated ingredient row indicator */
.ingredient-row.generated {
    border-left: 3px solid var(--chat-warning, #F39C12);
    background: rgba(243, 156, 18, 0.06);
    padding-left: 8px;
    transition: border-color 0.3s, background 0.3s;
}

.dark-theme .ingredient-row.generated {
    background: rgba(243, 156, 18, 0.1);
}