/* Styles for Validation Rule Form Fragment */

.validation-rule-form .form-control,
.validation-rule-form .form-select {
    /* Base styles are inherited from components.css */
}

/* Rule Name Input */
.validation-rule-form input[name$=".name"] {
    min-width: 150px; 
    flex-basis: 20%; 
}

/* Method/Source Selects */
.validation-rule-form select[name$=".methodType"],
.validation-rule-form select[name$=".sourceType"] {
    width: auto; 
}

/* Ensure selects fit nicely in compact groups */
.input-group-compact .form-select {
    flex: 1 1 auto; 
}

/* Parameters Container */
.validation-rule-form .parameters-container {
    min-width: 150px; 
    flex-grow: 1; 
    position: relative; /* Ensure dropdown menu can position relative to this */
    overflow: visible; /* Allow dropdown to overflow */
}

/* Parameters Textarea */
.validation-rule-form textarea[name$=".sourceParameters"] {
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    font-size: 0.875rem; 
    resize: vertical; 
    min-height: calc(1.5em + 0.5rem + 2px); 
}

/* Specificity for input groups to maybe shrink less */
.validation-rule-form .input-group-compact {
    flex-shrink: 0; 
} 

/* JSON Path dropdown styling */
.validation-rule-form .json-path-dropdown-container {
    flex-shrink: 0;
}

.validation-rule-form .json-path-dropdown-container .json-path-dropdown-btn {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--input-group-text-bg); /* Match input-group-text background color */
    border-color: var(--border-color) !important; /* Match input-group-text border color */
    border-width: 1px !important; /* Match input-group-text border thickness */
    color: var(--text-muted); /* Match input-group-text text color */
}

/* Ensure textarea has proper border radius when dropdown is present */
.validation-rule-form .parameters-container:has(.json-path-dropdown-container) .validation-parameters {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

/* JavaScript-applied class for textarea with dropdown on the right */
.validation-rule-form .validation-parameters.has-dropdown-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

/* Alternative approach - style textarea when dropdown is present (adjacent sibling) */
.validation-rule-form .parameters-container .validation-parameters + .json-path-dropdown-container {
    border-left: 0;
}

.validation-rule-form .parameters-container .validation-parameters + .json-path-dropdown-container .json-path-dropdown-btn {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--input-group-text-bg); /* Match input-group-text background color */
    border-color: var(--border-color) !important; /* Match input-group-text border color */
    border-width: 1px !important; /* Match input-group-text border thickness */
    color: var(--text-muted); /* Match input-group-text text color */
}

/* Dropdown menu positioning and styling */
.validation-rule-form .json-path-dropdown-container .dropdown-menu {
    font-size: 0.875rem;
}

.validation-rule-form .json-path-dropdown-container .dropdown-item {
    font-family: monospace;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
}

.validation-rule-form .json-path-dropdown-container .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

/* Ensure the opened dropdown menu is above other content */
/* 
.json-path-dropdown-container.show .dropdown-menu {
    z-index: 2000 !important; 
}
*/

.validation-rule-form {
    overflow: visible; /* Allow dropdown to overflow from the rule form itself */
    position: relative; /* Needed for z-index to apply, and for potential future absolute positioning of children */
    /* z-index: 10; */ /* Likely not needed anymore if parent card handles stacking */
}