/* Container for the whole section */
.external-reviews-container {
    /* Add any overall padding or borders for the section if needed */
}

/* Styling for each label + input row */
.form-row {
    /*display: flex; !* Enable Flexbox *!*/
    align-items: start; /* Align items to the top */
    margin-bottom: 1rem; /* Space between rows (adjust as needed) */
    /* Match spacing of Tracking & Workflow if possible */
}

/* Styling for the labels */
.form-label {
    width: 150px; /* Fixed width for labels - adjust as needed */
    min-width: 150px; /* Prevent shrinking below this width */
    margin-right: 10px; /* Space between label and input wrapper */
    padding-top: 5px; /* Align label text better with input text (adjust as needed) */
    font-weight: bold; /* Make labels bold like the example */
    text-align: right; /* Optional: align label text to the right */
    flex-shrink: 0; /* Prevent label from shrinking */
}

/* Wrapper for input and help text */
.form-input-wrapper {
    flex: 1; /* Allow this wrapper to grow and take remaining space */
    display: flex; /* Use flexbox here too */
    flex-direction: column; /* Stack input and help text vertically */
}

/* Common styling for input, select, textarea */
.form-input {
    width: 90%; /* Make inputs take full width of their wrapper */
    padding: 6px 8px; /* Adjust padding for desired size */
    border: 1px solid #ccc; /* Basic border */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-bottom: 4px; /* Small space between input and help text */
}

/* Make textarea resizable vertically only */
.form-input[type="textarea"] {
    resize: vertical;
    min-height: 60px; /* Give textarea a minimum height */
}


/* Styling for the help text */
.form-text {
    font-size: 0.85em; /* Smaller font size */
    font-style: italic; /* Italicized text */
    color: #6C757D; /* Grey color, similar to Bootstrap's text-muted */
    display: block; /* Ensure it takes its own line */
}

/* --- View/Edit Mode Toggling --- */

/* Default: Assume edit mode or style explicitly */
.external-reviews-container.edit-mode .form-data-display {
    display: none; /* Hide the view-mode data span */
}
.external-reviews-container.edit-mode .form-input {
    display: block; /* Show the form inputs (default, but explicit) */
}
/* Special handling for select in edit mode */
.external-reviews-container.edit-mode select.form-input {
    display: inline-block; /* Select elements behave slightly differently */
}


/* Styles for View Mode */
.external-reviews-container.view-mode .form-input {
    display: none; /* Hide the actual input fields */
}

.external-reviews-container.view-mode .form-data-display {
    display: inline-block; /* Show the data span */
    padding: 5px 0; /* Add some vertical padding to mimic input height */
    min-height: calc(1.5em + 12px); /* Approximate height of an input field */
    word-break: break-word; /* Prevent long text from overflowing */
}

/* Optionally hide help text in view mode if desired */
/*
.external-reviews-container.view-mode .form-text {
  display: none;
}
*/