/* Custom CSS for aligned, evenly spaced buttons based on reference screenshots */

/* Button container styles */
.button-group {
    display: flex;
    margin-bottom: 0.5rem;
    gap: 8px; /* Perfectly even spacing between buttons */
    align-items: center;
}

/* Common button styles - compact size matching screenshots */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* Smaller fixed consistent button height */
    margin: 0;
    padding: 0.25rem 0.5rem; /* Reduced padding for more compact buttons */
    font-size: 0.75rem; /* Smaller font size */
    font-weight: normal;
    line-height: 1.2;
    border-radius: 0.25rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* Button icon alignment - more compact */
.btn i {
    margin-right: 0.25rem;
    font-size: 0.75rem; /* Smaller icon size */
}

/* Specific section spacing */
.input-buttons, .output-buttons {
    display: flex;
    margin-bottom: 0.5rem;
}

/* Ensure buttons never wrap to second line */
.button-group {
    flex-wrap: nowrap;
    overflow: visible;
}

/* Specific spacing for text buttons */
.btn-outline-secondary {
    height: 32px; /* Match the height of other buttons */
}

/* Make sure labels don't affect button alignment */
.section-label {
    margin-bottom: 0.375rem;
}

/* Common spacer for right-aligned buttons */
.spacer {
    flex-grow: 1;
}