/* Password Generator Styles */

.password-generator-container {
    position: relative;
}

.password-generator-btn {
    margin-left: 10px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.42857143;
}

.password-field-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-field-group .form-control {
    flex: 1;
}

.password-field-group .password-generator-btn {
    margin-left: 0;
    flex-shrink: 0;
}

/* Override October's default button styles for better integration */
.password-generator-btn.btn.btn-default {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

.password-generator-btn.btn.btn-default:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.password-generator-btn.btn.btn-default:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

@media (max-width: 768px) {
    .password-field-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .password-field-group .password-generator-btn {
        margin-left: 0;
    }
}