/* assets/css/dynamic.css - Dynamic Options Styling */

/* Dynamic option items in dropdown */
.dynamic-option {
    background-color: #e8f5e9 !important;
    border-left: 4px solid #4caf50 !important;
    position: relative;
    font-weight: 500 !important;
}

.dynamic-option:hover {
    background-color: #c8e6c9 !important;
}

/* Indicator for dynamic options */
.dynamic-option::before {
    content: "🔄";
    position: absolute;
    right: 10px;
    font-size: 12px;
    opacity: 0.7;
}

/* Field with dynamic options active */
.field.dynamic-active {
    border-left: 3px solid #4caf50;
    padding-left: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.field.dynamic-active label {
    color: #2e7d32;
    font-weight: bold;
}

.field.dynamic-active label::after {
    content: " (Dynamic)";
    color: #4caf50;
    font-size: 12px;
    font-weight: normal;
    margin-left: 5px;
}

/* Highlight for active keyboard selection in dynamic mode */
.field.dynamic-active .suggestions li.active {
    background-color: #2196f3 !important;
    color: white !important;
    border-left: 4px solid #1976d2 !important;
}

/* Better autocomplete for dynamic options */
.autocomplete-container.dynamic-active {
    position: relative;
}

.autocomplete-container.dynamic-active::after {
    content: "✨";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #ff9800;
    z-index: 1;
}

/* Animation for dynamic updates */
@keydynamic fadeInOption {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dynamic-option {
    animation: fadeInOption 0.3s ease-out;
}

/* Status indicator for dynamic loading */
.dynamic-loading {
    position: relative;
}

.dynamic-loading::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #4caf50;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Tooltip for dynamic fields */
.field.dynamic-active .autocomplete-container input:hover::after {
    content: "This field has dynamic options based on other selections";
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

/* Responsive adjustments for dynamic options */
@media (max-width: 700px) {
    .field.dynamic-active label::after {
        content: " 🔄";
        font-size: 10px;
    }
    
    .dynamic-option::before {
        right: 5px;
        font-size: 10px;
    }
}

/* Visual feedback when dynamic options are applied */
.field.dynamic-updated {
    animation: highlightUpdate 1s ease;
}

@keyframes highlightUpdate {
    0% { background-color: #e8f5e9; }
    50% { background-color: #c8e6c9; }
    100% { background-color: #f9f9f9; }
}

/* Badge for dynamic fields */
.dynamic-badge {
    display: inline-block;
    background: #4caf50;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}